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 you're 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, 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. The right rail opens with a single list of settings for that block. There are no tabs in the right rail.
Right rail settings
The right rail is where you manually control block settings. You can update images, text, button labels, destination links, icons, background and padding, and more depending on the block. Categories are collapsible. 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.
Near the bottom of the rail you will also find Visibility, which controls who can see the block (for example, Everyone).
AI
AI is a separate control outside the right rail. Use the floating AI button on the preview (bottom right of the canvas, to the left of the right rail) to make quick changes with a 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.
In the editor header you may also see Get Tapcart AI Pro. 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.
Developer
Developer is the last option at the bottom of the right rail (code icon). It is available to Enterprise merchants and opens the underlying React code for the block. This lets your development team build fully bespoke experiences beyond the settings in the right rail.
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 in the right rail
Choose the category for which you are adding a conditional
Click Add Condition and note that the condition is added
Save your 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.
Please note: If you do not have an integration enabled within your Tapcart dashboard, the integration block may not work properly on your screen.
Need Help?
Need more help or have questions about editing blocks? Reach out to us at [email protected] and we'll be happy to help!