Value icons block

Value icons

Custom CSS & CSS Variables

We've provided an area in each block that will allow you to add your own custom CSS so you can match your brands style exactly. We decided to make this even easier by providing CSS variable for common changes to make this even easier 🎉

Here is a list of the Variables available in this block:

--text-size
--font-family
--font-weight
--letter-spacing
--line-height
--text-color

--border-radius
--background-color

--icon-size
--icon-gap

--margin-top
--margin-bottom
--padding
--size

Dynamic blocks with MetaObjects

For the most in-depth explanation check out the instructions for Image with text

1. MetaObject definition

We've create a simple way to create MetaObject definitions in the app. Here's an explanation of our one-click metaobject feature:

1. Product Metafield definition

2. Entry for the MetaObject

One thing to note, is you don't need to add 5 icons for every MetaObject entry. You could add 2, 3 or 4 and the section will only show what is available on that specific product and you won't get any broken image issues.

1. Connect the MetaObject entry to the Product

2. Connect specific field to the block