Collapsible content block

Collapsible Content

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-family
--heading-font-weight
--heading-letter-spacing
--heading-line-height
--heading-color

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

--image-width
--icon-size

--top-border-color
--bottom-border-color
--background-color

--open-icon
--closed-icon

--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

1. Entry for the MetaObject

2. Connect the MetaObject entry to the Product

1. Connect specific field to the block