Product Blocks
Product blocks are Shopify app blocks designed to increase your product page performance.
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:
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:
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.
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:
Create MetaObject definition.
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.
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.
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.
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.
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:
Connected products
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:
Setting Colors & Custom Images
Color swatches with hex codes
To create color swatches, just set the style to 'Color swatches' and then for each product name connect the hex color you'd like to show up for that color separated by a colon like the below example. Each product will go on a separate line.
product name: #BADA55
Color swatches with images
If you'd like to use images that are not the product images, upload the image files you'd like to the store file system.
In the Connected products section, instead of using a hex value, use the image file name (make sure to note the correct file suffix) and connect them through the custom colors setting. For this option, you'll also need to set the Style to Color swatches.
Dynamic blocks with MetaObjects
You can use MetaObjects to customize each product page to have a unique look. 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.
For the most in-depth explanation check out the instructions for Image with text
MetaObject Definition
Product Metafield definition
Entry for the MetaObject
Connect the MetaObject entry to the Product
Connect specific field to the 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:
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.
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:
Dynamic blocks with MetaObjects
For the most in-depth explanation check out the instructions for Image with text
MetaObject definition
Product Metafield definition
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.
Connect the MetaObject entry to the Product
Connect specific field to the block
Video
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:
Custom CSS example
Rounded corners on videos are quite popular right now, as are mesh gradients. Here's the easy way to customize your video block with custom CSS variables:
Dynamic blocks with MetaObjects
For the most in-depth explanation check out the instructions for Image with text
MetaObject definition
Product Metafield definition
Entry for the MetaObject
Hot tip 🔥
If there's not a good field for a display name, changing the handle will set the title of the entry - which makes it easier to find later 😁. Just remember, no spaces in the name
Connect the MetaObject entry to the Product
Connect specific field to the block
Collapsible Accordion
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:
Dynamic blocks with MetaObjects
For the most in-depth explanation check out the instructions for Image with text
MetaObject definition
Product Metafield definition
Entry for the MetaObject
Connect the MetaObject entry to the Product
Connect specific field to the block
Feature Range
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:
Last updated
