Design Blocks are provided by Tapcart and enable you to build experiences for your app efficiently while still achieving your brand look and feel. Use the guide below to review how to add blocks to a given screen and configure them.

Adding a Design Block to a Screen

Open your Tapcart Dashboard
Hover over App Studio in the header
Select Screens from the drop down
Select one of the screens your looking to edit
Use the block bank on the left hand side to drag over a block to the screen
Once added to the screen you click Edit to start configuring it

Configuring a Design Block

Every time you drag a Design block onto a screen it will have a default set of data and styling that is pulled from your Brand Kit. If you don't have your Brand Kit setup please refer to this article and get that setup to make block configuration simpler.

To edit a block, hover over it and click Edit. This opens the right rail where you'll see three tabs: AI, Visual, and Dev. Each tab gives you a different way to customize the block.

1.AI tab The AI tab lets you make quick changes to any block using a simple text prompt — for example, typing "make the headline bigger" or "add an overlay" or "round the buttons". This is the fastest way to iterate on your design without digging through individual settings. If you are on the AI Pro bundle, you also have access to more advanced capabilities like remixing the block entirely, generating an AI scene with lifestyle imagery using your products, or creating an AI video.

2.Visual tab The Visual tab is where you manually control specific block settings. You can update images, text, button labels, destination links, and more depending on the block. To show or hide individual elements within a block, hover over any category and click the eyeball icon — this lets you hide sections you don't need without removing the block entirely.

3.Dev tab The Dev tab is available to Enterprise merchants and gives you direct access to the underlying React code of any block. This allows your development team to build fully bespoke experiences beyond what's available through the Visual tab.

Example Block level configurations

There are hundred of settings that any given block may use including categories such as:

Image Attributes
- Fit & Fill
- Image Ratio
Typography Styles
- Font
- Weight
- Size
- Color
- Alignment
Icon settings
- Icons
- Icon Color (active and inactive)
- Placement
Background & Padding
- Borders
- Colors
- Corner
Destination linking to
- a static block
- a product
- a collection
- a URL
- another screen within the app (eg. Custom Screen, Account page, etc)

Delivering dynamic content

When you want to have blocks show dynamically based on certain conditions you can use Conditional Tagging to ensure a block only shows up when desired. This can be especially helpful for use cases like:

Localizing content: Showing a Spanish homepage banner or related content based on a person's device language
Dynamic Products/Collection: Conditionally showing promotional banners based on a product tags/metafields
Personalization: Leverage Customer Tags/Metafields to show VIP banner to key customers

Currently we have support for the following conditional methods

Product: Name, Tag, Metafield (single string only*)
Collection: Name, Metafield (single string only*)
Customer: Tag, Metafields (single string only*),
Authentication status (Logged in / Logged Out)
Device: Region and Language

To add a conditional to a block

Click Edit on the block
Find the Conditional Tags category on the block, typically at the bottom
Choose the category for which you are adding a conditional
Click Add Condition and note that the condition is added
Save you block changes and publish when ready

Conditionals currently support ANY conditions meaning if any of the conditions are met, we will show the block. Please take this into account when configuring these.

Blocks with Required Integrations

Some blocks may require a specific integration to be enabled in order to use all their features. For example, on your Product Details page you may see an option to show product reviews — but this requires a reviews integration like Okendo or Loox to be connected first. By default this option will be turned off. If you do not have the required integration installed, we don't recommend enabling it. If you have any concerns, please contact your Tapcart Implementation Manager.

Please note: If you do not have an integration enabled within your Tapcart dashboard, the integration block may not work properly on your screen.