Switch linked metafield products from Vertical To Horizontal

Store Design
,

Topic summary

A user is experiencing a layout issue with metafield-linked product variants on their Shopify store using the Impulse theme. After a recent theme update, alternative color products that previously displayed horizontally now appear in a vertical row.

Current Setup:

  • Using custom metafields to show alternate product colors
  • Custom HTML block implemented on product pages
  • Theme: Impulse

The Problem:
The layout switched from horizontal to vertical arrangement following the theme update.

Supporting Evidence:
The user provided:

  • Code snippet showing their metafield implementation
  • Two images comparing the layouts (vertical vs. horizontal)

Status:
The discussion remains open with no solutions provided yet. The user is seeking CSS or code modifications to restore the horizontal display of linked products.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Im using metafields on our shop to show and link to alternate colors of products. Since my last theme-update the products show in a vertical row instead of horizontal as showed on my pictures.

Can anyone help me switch from vertical to horizontal again. Theme is Impulse.

HTML Code used in custom block:

{%- if product.metafields.custom.alternative_products.value -%}
  <p><strong>Finns även i dessa färger</strong></p>
  {%- for alt_product in product.metafields.custom.alternative_products.value -%}
    {%- if alt_product.available -%}
    <a href="{{ alt_product.url }}" title="{{ alt_product.title }}"><img src="{{ alt_product.featured_image | img_url: '90x90', format: 'pjpg' }}" alt="{{ alt_product.title }}" loading="lazy"></a>  
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

Thanks!

Horizontal
Horizontal663×170 32 KB

line.jpg
line.jpg275×518 12 KB