# Connected products block

## Connected products

{% embed url="<https://youtu.be/gSS3X3ue5Sw>" %}

### 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:&#x20;

```
--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

{% hint style="warning" %}
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>.
{% endhint %}

#### 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`

<figure><img src="/files/wYXiInkmoI9AquL2dqdT" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/4oMTsErROtUv0k8EhV4V" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/CLlL8tWiA18jXZGQvtYu" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/dNDLkE8rbS9YZGkzFEMN" alt=""><figcaption></figcaption></figure>

### 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.

{% hint style="info" %}
For the most in-depth explanation check out the instructions for [Image with text](#dynamic-blocks-with-metaobjects)
{% endhint %}

{% embed url="<https://share.zight.com/KouKW159>" %}

1. &#x20;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:

{% embed url="<https://youtu.be/0rAflHJwEO8?si=tSmqCjoE9iHrcY8W>" %}

<figure><img src="/files/p4WQ0Y2Ymori5HATjdC8" alt="" width="563"><figcaption></figcaption></figure>

2. Product Metafield definition

<figure><img src="/files/pLUUbDxWhWvZseI5LicE" alt="" width="563"><figcaption></figcaption></figure>

3. Entry for the MetaObject

<figure><img src="/files/tBdNPTn5UONLZg4bUh4r" alt="" width="563"><figcaption></figcaption></figure>

4. Connect the MetaObject entry to the Product

<figure><img src="/files/SYPFOl2zF7OAgv2cLafL" alt="" width="563"><figcaption></figcaption></figure>

5. Connect specific field to the block

{% embed url="<https://share.zight.com/z8uBXgXY>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design-packs.gitbook.io/docs/product-blocks/product-blocks/connected-products-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.