Image with text block

Image with text

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

--button-text-size
--button-text-align
--button-font-family
--button-font-weight
--button-radius
--button-label-color
--button-background-color
--button-border-color
--button-border-width
--button-padding

--image-size

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

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

To use these variables all you need to do is wrap the variables in curly braces { }

And set the values like this image

Here's some example code you could copy in and adjust to your liking:

{
--heading-letter-spacing: 2px;
--line-height: 1.3;
--letter-spacing: 1px;
}

Gradiants

We've designed product blocks to work smoothly with MetaObjects. This limited us to choosing only the regular color picker for color options. However, you can still use gradients with the CSS variables.

In the above example we've just copied the mesh gradient code into the custom CSS. Below is an example of setting the background color of the section as a gradient.

{
  --background-color: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}

Dynamic blocks with MetaObjects

We've set up each block to work well with MetaObjects and Metafields to facilitate dynamic product pages. For this reason, when there's no content in the block, we show a small notice in the Theme editor and hide it completely on the live site.

In order to take advantage of MetaObjects, there's a few steps to take, but once it's set up it will make the management of the products a lot easier. Instead of need completely different templates to have different informatin, you'll just need to populate the MetaObject and connect it to the product.

Steps:

1. Create 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:

For the Image with text the definition will look like this. I called the MetaObject "Image with text" to make it easy to remember. Add the following fields to the MetaObject - I've annotated to field type on the image.

1. Create Metafield connected to the Product object

Go to Metafield definitions, choose product and create a field that references a MetaObject and choose the "Image with text" MetaObject. I called this Metafield "Image with text" also. This could be a little confusing, but I think it's a bit easier if you're going to add multiple things - you'll remember which Metafield connects to which MetaObject.

1. Create an Entry for the MetaObject

Populate the entry with the unique information for one product. Then repeat this process for every product you want to.

1. Connect the MetaObject entry to the Product

At the bottom of the Product page you'll see all of the Metafields available for products. Select the "Image with text" Metafield and you'll see a dropdown of the available Entries to connect. Choose the correct one.

1. Connect specific field to the block

Each field in the MetaObject correlates to options in the block that can be connected to dynamic data. In the theme editor, choose the block and go to the settings. In the settings you'll see the option to connect dynamic data. Then you'll have the option to choos the 'Image with text' MetaObject. From there you'll be able to select any field that corresponds to the data type.

Dynamic Product pages

In the theme editor you'll see that once set up, each product will be populated with unique data. If a product doesn't have any MetaObject associate, the whole block will not show up. In the theme editor there's a small note to indicate that there is something there. On the live site, there will be no evidence of the block.

The great thing about MetaObjects is that they can be re-used! You could set up 3 MetaObject Entries and then use 1 for 4 products and have 2 products be unique. This will help to decrease the amount of time setup and management of your shop.

On the live site: