Skip to main content

Linked Products

Overview​

The Linked Products Expansion Block can be used to link together multiple Shopify products so that they look like variants on the product page.

Required Metafields​

To ensure the expansion-linked-products block functions correctly, you need to set up specific metafields for your products. These metafields store the necessary data to display linked products effectively.

  1. custom.linked_products​

    • Name: Linked products
    • Type: List of products
    • Description: This metafield should contain a list of linked products that you want to display on the current product page. Each entry in the list should reference a product that is related to the current product.

  2. custom.linked_products_name​

    • Name: Linked products name
    • Type: Single line text
    • Description: This metafield stores the name or title of the linked product. It is used as a fallback if a specific name is not provided in the block settings.

  3. custom.linked_products_swatch_color​

    • Name: Linked products swatch color
    • Type: Color
    • Description: If you are using the color input type, this metafield should contain the color value for each linked product. It allows the block to display a color swatch representing the linked product.

​

Required CSS Variables​

This Extension Block is designed to inherit some of the global settings in Shopify’s Dawn theme. If you are using a different theme or have customized your Dawn theme, you may need to set some CSS variable values for the default installation to display correctly. Below is a list of CSS variables that you may need to define:

--color-foreground​

Description: Defines the foreground color used for text and borders.
Usage: Applied to text color and border color in various elements.

:root {
  --color-foreground: 0, 0, 0; /* RGB for black */
}

--color-background​

Description: Defines the background color for elements.
Usage: Used for the background color of pills and other elements.

:root {
  --color-background: 255, 255, 255; /* RGB for white */
}

​

--variant-pills-border-width​

Description: Specifies the border width for variant pills.
Usage: Sets the border width for pill-style linked products.

:root {
  --variant-pills-border-width: 1px;
}

​

--variant-pills-border-opacity​

Description: Controls the opacity of the border for variant pills.
Usage: Adjusts the transparency of the pill borders.

:root {
  --variant-pills-border-opacity: 0.5;
}

​

--variant-pills-radius​

Description: Defines the border radius for variant pills.
Usage: Rounds the corners of pill-style linked products.

:root {
  --variant-pills-radius: 10px;
}

​

--duration-short​

Description: Sets the duration for transition effects.
Usage: Used for smooth transitions on hover and other interactions.

:root {
  --duration-short: 0.3s;
}

​

--swatch-input--size​

Description: Determines the size of color and image swatches.
Usage: Sets the dimensions for swatch elements.
Example:

:root {
  --swatch-input--size: 2.8rem;
}

​

--swatch-input--border-radius​

Description: Specifies the border radius for swatches.
Usage: Rounds the corners of swatch elements.

:root {
  --swatch-input--border-radius: 50%;
}