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. This approach is particularly valuable for stores that don't have access to combined listings or find combined listings too restrictive for their needs.

This block enables you to create a variant-like experience while keeping your products separate in the backend. This is an extremely popular approach used across thousands of websites and offers several significant advantages:

Better Backend Management: By keeping products separate instead of creating variants, you avoid the complexity of managing products with dozens or hundreds of variants. This makes your product catalog much cleaner and easier to navigate.

Improved Reporting: Separate products provide more accurate analytics and reporting. You can track performance, inventory, and sales data for each individual product variant without the complexity of variant-level reporting.

Flexible Promotions: You can easily put just one color or style on sale without affecting other variants. This gives you much more control over your marketing and promotional strategies.

Operational Efficiency: Managing separate products is often easier for operations teams. You can update pricing, inventory, and product details independently, and it's simpler to handle returns and exchanges for specific variants.

This approach is especially useful for products with multiple colors, sizes, or styles where you want the customer experience to feel like they're selecting variants, but you need the flexibility and simplicity of separate products in your admin.

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 Horizon theme system so that it works out of the box. If you are using a different 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.

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

--color-variant-border​

Description: Defines the border color for variant buttons.

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

--color-variant-background​

Description: Defines the background color for variant buttons.

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

--color-variant-text​

Description: Defines the text color for variant buttons.

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

--color-variant-hover-background​

Description: Defines the background color for variant buttons on hover.

:root {
  --color-variant-hover-background: 245, 245, 245; /* RGB for light gray */
}

--color-variant-hover-border​

Description: Defines the border color for variant buttons on hover.

:root {
  --color-variant-hover-border: 0, 0, 0; /* RGB for black */
}

--color-variant-hover-text​

Description: Defines the text color for variant buttons on hover.

:root {
  --color-variant-hover-text: 0, 0, 0; /* RGB for black */
}

--color-selected-variant-background​

Description: Defines the background color for the currently selected variant.

:root {
  --color-selected-variant-background: 0, 0, 0; /* RGB for black */
}

--color-selected-variant-text​

Description: Defines the text color for the currently selected variant.

:root {
  --color-selected-variant-text: 255, 255, 255; /* RGB for white */
}

--color-selected-variant-border​

Description: Defines the border color for the currently selected variant.

:root {
  --color-selected-variant-border: 0, 0, 0; /* RGB for black */
}

--variant-picker-button-border-width​

Description: Specifies the border width for variant buttons.

:root {
  --variant-picker-button-border-width: 1px;
}

--variant-picker-button-radius​

Description: Defines the border radius for variant buttons and image swatches.

:root {
  --variant-picker-button-radius: 4px;
}

--focus-outline-width​

Description: Sets the width of the focus outline for accessibility.

:root {
  --focus-outline-width: 2px;
}

--focus-outline-offset​

Description: Sets the offset of the focus outline from the element.

:root {
  --focus-outline-offset: 2px;
}