Variant descriptions block

Variant Descriptions

Please note this block requires a Variant metafield - learn more

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:

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

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

--background-color
--border-radius
--border-color
--border-width
--border-style

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

Dynamic blocks with Metafields

In order for the Variant Descriptions to work, you'll need to add a metafield on the Variant level. By default the blocks works with a metafield called custom.description with any text type (single line text, multi-line text, richtext)

Once this metafield is created you'll want to go back to the product admin page and add content to these metafields for each variant (if one or more variant metafields are blank, they will simply not show up when that variant is selected).

If you created a metafield with the default name, these values will automatically show up for each variant. If you made (or already have) a metafield with a different name. In the app block, you can set which variant metafield you would like by setting the namespace and the key. In the metafield definition above, you'll see that it has a muted out field called namespace and key. The first value is the namespace and the second value after the dot is the key.