Skip to content

Customizing the Product Page Output

Linked Products renders its swatches on the Hyvä product page with a single block, product.info.linked, inside product.info.form. This page covers the layout handles that add the block, the template and view model behind it, and how to restyle or override the output in your theme.

Linked Products Layout Handles

Linked Products doesn't use catalog_product_view.xml. An observer on layout_load_before adds its own layout handles to the product page, and only while Enabled (hyva_linked_products/general/enabled) is Yes for the current store view:

Handle Added when What it does
hyva_linkedproducts_enabled Every product page Adds the product.info.linked block to product.info.form, before all other children
hyva_linkedproducts_enabled_configurable Configurable product pages Moves product.info.options.configurable after product.info.linked

To move or remove the swatches, reference the block from one of these handles in your theme. Because the handle only exists while the feature is enabled, your changes never run against a missing block.

app/design/frontend/<Vendor>/<theme>/Hyva_LinkedProducts/layout/hyva_linkedproducts_enabled.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Show the linked product swatches below the product options instead of above them -->
        <move element="product.info.linked" destination="product.info.form" after="product.info.options.wrapper"/>
    </body>
</page>

The Block Doesn't Exist When the Feature Is Off

With Enabled set to No, product.info.linked is not added at all. Layout XML in catalog_product_view.xml that positions another block after="product.info.linked" loses its anchor on those store views. Use the Linked Products handles above for anything that depends on the block.

The Linked Products Template and View Model

The product.info.linked block uses the core Magento\Catalog\Block\Product\View class with the template Hyva_LinkedProducts::product/view/linked-products.phtml. The template gets its data from the Hyva\LinkedProducts\ViewModel\LinkedProducts view model through the Hyvä view model registry.

The view model methods you're most likely to use in an override:

  • getLinkedProducts($product) - the other group members the current store can show, ordered by product ID.
  • getLinkAttributeCodes($product) - the group's link attribute codes.
  • getAttributeLabel($attributeCode) - the attribute's store label.
  • getOptionsForAttribute($product, $attributeCode) - one entry per swatch, with the render data (swatch), the target url, and the current and inactive flags.
  • getSwatchDimension($type, $dimension, $fallback) - the swatch size from the theme's etc/view.xml.

To change the markup, copy the template into your theme and edit the copy:

app/design/frontend/<Vendor>/<theme>/Hyva_LinkedProducts/templates/product/view/linked-products.phtml

The module's styles rely on these parts of the shipped template, so keep them in your copy:

  • the <div class="linked-products"> wrapper, which scopes the color swatch and closest-match styles;
  • each swatch as an <a class="swatch-option"> link, with data-swatch-type="visual" for color and image swatches, which gives them their round shape, and data-swatch-type="text" otherwise;
  • each color in a <span class="linked-swatch-color"> that sets the --lp-swatch-w, --lp-swatch-h, and --lp-swatch-bg custom properties, which give it its size and color;
  • aria-current="page" on the current product's swatch, and data-swatch-inactive="true" on closest-match links.

Linked Products and Tailwind CSS

Linked Products registers itself for Tailwind compilation through the hyva_config_generate_before event, so bin/magento hyva:config:generate adds it to app/etc/hyva-themes.json and your theme picks up its styles on the next build. The module ships entry points for both Tailwind versions:

  • Tailwind v4: view/frontend/tailwind/module.css, which scans the module templates and imports src/swatches.css.
  • Tailwind v3: view/frontend/tailwind/tailwind-source.css and tailwind.config.js, with src/swatches.v3.css.

The swatch styles extend the Hyvä .swatch-option component and add .linked-swatch-color, which reads its size and color from the --lp-swatch-w, --lp-swatch-h, and --lp-swatch-bg custom properties the template sets. If the color swatches render as empty circles, the theme CSS was built before Linked Products was installed: rebuild it. See Registering a Module for Tailwind Compilation.