Connected products block

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:

--heading-size
--heading-letter-spacing
--heading-line-height
--heading-color

--text-size
--letter-spacing
--line-height

--button-border-color
--button-label-color
--button-background-color
--button-radius
--button-gap
--button-padding

--swatch-size
--swatch-padding
--swatch-border-size
--swatch-gap

--background-color

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

Setting Colors, Custom Images & Custom Names

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 [e-mail].

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.

Custom Names

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.

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

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

1. Connect the MetaObject entry to the Product

1. Connect specific field to the block