Product Blocks
Product blocks are Shopify app blocks designed to increase your product page performance.
Last updated
Product blocks are Shopify app blocks designed to increase your product page performance.
Last updated
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:
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.
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.
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.
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.
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:
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:
NOTE: If the title of your product contains a colon (:) just remove the colon in the custom colors or custom names setting and it should work correctly. If it doesn't reach out to help@design-packs.com.
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
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.
You may want the name for your connected products to simply be the color of the product rather than the full name. For this reason we've given the ability to override the product title for the buttons and the hover for the swatches. This works similarly to the colors where you will use the product title separated by a column.
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
We've create a simple way to create MetaObject definitions in the app. Here's an explanation of our one-click metaobject feature:
Product Metafield definition
Entry for the MetaObject
Connect the MetaObject entry to the Product
Connect specific field to the block
Please note this block requires a Variant metafield - learn more
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:
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.
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:
For the most in-depth explanation check out the instructions for Image with text
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:
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
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:
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:
For the most in-depth explanation check out the instructions for Image with text
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:
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
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:
For the most in-depth explanation check out the instructions for Image with text
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:
Product Metafield definition
Entry for the MetaObject
Connect the MetaObject entry to the Product
Connect specific field to the block
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:
