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 the block beyond what you see once added to the screen follow these steps
Hover over any block and click Edit
Click any of the categories shown on the right side of the block to make an adjustment
Click Save once you have the block working as desired
While Design Blocks might have many attributes, we recognize that not all of them will be desired or applicable to you. You can easily turn on/off any attribute within a block by hovering over that category and clicking the eyeball.
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
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 going to add a conditional
Click Add Condition and note that the condition is added
Save you block changes and publish the block 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 of the blocks that you may add to a given screen might have a required integration in order to use all the features. For example, on your Product Details page you might see that you can add reviews within the settings of our Product Title and Price block. By default we will have turned this option off however you will still see the option to turn it on. If you do not have a required integration installed on your app we don't recommend configuring the option. If you have any concerns about one you do think should work please contact your Tapcart representative.
Please note: If you do not have an integration enabled within your Tapcart dashboard, the integration block may not work properly on your screen. For more support, contact [email protected].