Custom blocks are bespoke blocks created for your brand. You can find them in App Studio, add them to any screen, and edit them directly from the dashboard.
This guide is for merchants and marketers working in the Tapcart dashboard. If your team develops blocks locally with the CLI, see Creating and Maintaining Custom Blocks via Tapcart CLI.
Availability: Creating and editing custom block code (including the Dev tab) is available on Tapcart Enterprise. All users can add existing custom blocks to screens and configure supported settings in the Visual tab when those controls are available.
Custom blocks vs Design Blocks
Design Blocks are Tapcart-provided templates (banners, carousels, product grids, and more). Configure them with the Visual and AI tabs. See Building with Design Blocks.
Custom blocks are built specifically for your app (by your team, an agency, or Tapcart). They appear in My Blocks in the block bank and can include brand-specific logic, layouts, or integrations.
Where to find your custom blocks
Open your Tapcart Dashboard
Hover over App Studio in the header and select Screens
Open the screen you want to edit (for example Home, Product Detail, or a custom screen)
In the block bank on the left, look for My Blocks
Your custom blocks live here. Tapcart Design Blocks are grouped in the other library categories (Basics, Carousels, Content, Hero, Integrations, Media, and so on).
You can also manage your custom block library from My Blocks (including creating a new custom block on Enterprise). Older blocks created before App Studio may appear under Legacy Custom Blocks.
Add a custom block to a screen
Go to App Studio → Screens and open the screen
In the left block bank, open My Blocks
Drag the custom block onto the canvas where you want it to appear
Reorder by dragging the block up or down on the screen
Save your screen as draft, then Publish when you are ready for the change to go live
Tip: Custom blocks work on standard screens and on block-based custom screens.
Edit a custom block from the dashboard
Once a block is on the screen:
Hover over the block on the canvas
Click Edit
Use the right rail tabs to make changes:
Visual tab
Use this for day-to-day updates that do not require code. For example: text, images, colors, buttons, destination links, and show/hide toggles for sections the block exposes.
Hover a settings category and use the eyeball icon to hide elements you do not need
Available options depend on how the block was built. Some custom blocks expose many Visual controls; others are mostly fixed and only editable in the Dev tab
Show or hide a block with display conditions
You can control when a custom block appears without changing code:
Click Edit on the block
Find Conditional Tags (usually near the bottom of the right rail)
Click Add Condition and choose criteria such as customer tags, authentication status, device language/region, or product/collection attributes
Save and publish
Common uses: VIP-only banners, language-specific content, or limiting a new block to internal tester accounts before a full rollout.
AI tab
Describe the change you want in plain language (for example "make the headline larger" or "center the button"). This is often the fastest way to iterate on styling when the block supports AI editing.
Dev tab (Enterprise)
Opens the underlying React code for the block. Use this when you need behavior or layout changes beyond the Visual controls, or when your developer is working in the dashboard instead of the CLI.
After editing:
Save the block changes
Review the canvas preview
Publish the screen (or the block update, depending on the flow shown in App Studio) so shoppers see the change
Creating and Maintaining Custom Blocks
Create a new custom block in the dashboard
Go to App Studio → Screens
Open My Blocks
Click Create a Custom Block
Name the block, then configure it with the Visual / AI / Dev tabs
Save, then drag it onto any screen when you are ready to use it
If you need a developer to build more advanced logic, point them to the CLI article or have them work in the Dev tab.
Remove a block from a screen
Hover over the block on the canvas
Click the three-dot menu
Select Delete (this removes it from that screen; it does not delete the block from My Blocks)
Publish the screen so the removal goes live
Archive a custom block you no longer need
If a custom block is no longer relevant, archive it from My Blocks so it stops cluttering your library. Archiving is available for custom blocks and legacy custom blocks. You cannot archive Tapcart Design Blocks.
Quick checklist before publishing
The block is on the correct screen and in the right order
Visual settings (copy, images, links) look correct in the canvas preview
Any display conditions are intentional
You have published (draft changes are not live for shoppers)
For bigger Dev-tab code changes: preview on a test device or soft-launch with conditions first
Need help?
Reach out through LiveChat in your Tapcart dashboard or email [email protected].