Enterprise Theme - Product Page/Template - Place Image Blocks horizontally (metaobject references)

[Ryhage]

Hi,

On our Product Page, we display different Symbols associated to their respective product. The Symbols comes from Metaobjects (1. Technology | 2. Placement | 3. Functions) we have created and attached to each product.

But they are currently positioned/aligned vertically and we would like them to be positioned/aligned horizontally (in a row). Please see below screenshot for explanation.

How can we achieve this?

LINK: https://72128c-9a.myshopify.com/collections/shower-sets/products/dv-hydro-sh-set-1f

PASSWORD: marcus

[Mehran_Ali]

Hi @Ryhage 

I can be done using CSS but it is not an optimized way you should customize the liquid to add a different block for these images so that I will never be disturbed whenever you add new photos and products

[PaulNewton]

Hi @Ryhage 👋 Use CSS grid and target the ~2nd or ~3rd .product-info__block inside the .product-info__block element and tweak the grids columns to get the right proportions.

Really though nested-blocks is now available so you may want to check for a theme update or customize the theme to put all those images into their own container element for easier layout control or configuration as .

https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks

https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#metaobject

If you need this customization done for you then contact me for paid services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.