How to set up linked product swatches

Add links to similar products in the form of text, color, or image swatches. AKA connect different products to make them look like variants.

Note: this feature is available from Divide 1.2.0.

Prerequisites

This functionality works by relying on a consistent product title format. You'll need to make sure to include the variant information (e.g. color, or size) in the product title for this to work.

✅ Example product title formats that would work:

• Jeans in indigo
• Tote bag | Blue
• Coffee beans - 350g
• Sunflower plate ~ small

Create a metafield so that you can link your products

1. Head to Settings > Custom data > Products > Add definition (or click here - https://admin.shopify.com/store/settings/custom_data/product/metafields/create)
2. Set up the metafield with the following details:
   Name: Linked products
   Namespace and key: squiggle_and_code.linked_products
   Type: List of products

3. Click Save.

Create a metaobject to store the colors

Note: this is only required if you'd like to have color or image swatches. If you're happy for the swatch to just be taken from the product title, head onto the next step.

1. Head to Settings > Custom data > Metaobjects (scroll down) > Add definition (or click here - https://admin.shopify.com/store/divide-dev/settings/custom_data/metaobjects/create)
2. Enter the following details:
   Name: Squiggle and code swatch
   ‍
   Field definition #1 (required):
   Type: Single line text
   Name: Color name
   ‍
   Field definition #2 (requied):
   Type: Color
   Name: Color one
   
   Field definition #3 (only needed to have two-color/split swatches):
   Type: Color
   Name: Color two
   
   Field definition #4 (only needed to have image swatches):
   Type: File
   File: Image
   Description: 100x100px .jpg or .png recommended.

Link your products

1. Open the product you'd like to link, and scroll down to metafields. Under Linked products select the product(s) that you'd like to display a swatch for:

2. Click save, and repeat for any other products you'd like to add swatches to.

Create the swatches

Note: this step is only required for color and image swatches. Skip to the next section if you're just using text swatches/links.‍

1. Go to Content > Metaobjects > Add entry > Squiggle and code swatch:

2. Enter the color name exactly as it appears in the product titles. Ensure the handle pulls through from the title. E.g. if your color name was "Blue", the handle should be "blue". If the color name was "Pink/White", the handle should be "pink-white". 'Enter your colour information, and click Save:

Add the block to your product page/featured product section

Depending on where you'd like the linked product swatches to display, navigate to either a featured product section, or one of your product templates.

1. Click Add block

2. Drag the block above the variant picker (or wherever else you'd like to position it).
3. Click into the block and adjust the settings as required. The most important value is the Delimiter. This needs to be the same as the character you've used to separate the color name from the product title. E.g. if your product titles were in the format "Product name - color", the delimiter would be "-".

And that's it! You've set up product links that not only look good, they'll help your customers get to the products they're looking for.
‍

If you have any questions or issues, send us a message, we're more than happy to help you out.

‍