Two blocks side by side like 2 columns in a row

Topic summary

A Shopify developer is trying to position two elements—“marime” (variant picker) and “ghid marimi” (perks)—side by side on a product page instead of stacked vertically.

Initial Problem:

  • The variant picker and perks blocks are defined separately in product-page.liquid
  • They currently display one below the other

Proposed Solution:
Another user suggested adding the perks code directly inside the variant-picker file after the closing </legend> tag.

Implemented Workaround:
The original poster moved the perks data/parameters from product-page.liquid to the product-variant snippet, then:

  1. Removed the when 'perks' branch from the main file
  2. Inserted the perks code after the </legend> tag in product-variant.liquid
  3. Wrapped both elements in a container to align them horizontally

Remaining Concern:
While functional, the developer feels uncertain whether passing perks data one level up is best practice and seeks validation on the approach.

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

Hi,

My product page looks like in the image below.

The thing is that I want to move the “gid marimi” on the same line with “marime”

“Marime” is defined in the code as “variant_picker” and “ghid marimi” as perks.

Below the image I pasted the code from my product.liquid file.

How can I do this?

I leave below the product-page.liquid code sample where the you can see the varinat_picker block and the perks block and alos the site url and password

url: https://gogofit-ro.myshopify.com/products/costum-inot-jaked-femei-milano-violet-verde?_pos=5&_sid=96…

password: demopass21

Thanks in advance!

{%- when 'variant_picker' -%}
   {% unless has_product_combo %}
      <div class="productView-moreItem productView-moreItem-product-variant{% if settings.banner_animation == 'effect_fade_up' %} scroll-trigger animate--slide-in{% endif %}" style=" --spacing-top: {{ spacing_top | append: 'px' }}; --spacing-bottom: {{ spacing_bottom | append: 'px' }}"
      >
        {% render 'product-variant',
            block: block,
            product: product,
            variantCount: variantCount,
            current_variant: current_variant,
            picker_type: picker_type,
            show_variant_image_group: show_variant_image_group
         %}
      </div>
    {% endunless %}
   </div>
   {%- when 'customization_property' -%}
      {% if has_customization_option == true %}
    <div class="productView-moreItem{% if settings.banner_animation == 'effect_fade_up' %} scroll-trigger animate--slide-in{% endif %}" style=" --spacing-top: {{ spacing_top | append: 'px' }}; --spacing-bottom: {{ spacing_bottom | append: 'px' }} "
    >
       {% render 'product-customization',
        block: block,
        product: product,
        customization_option_1: customization_option_1,
        customization_option_2: customization_option_2,
        customization_option_hidden: customization_option_hidden
       %}
     </div>
   {% endif %}
      {%- when 'hot_stock' -%}
         {% unless has_product_combo %}
            {% render 'product-hot-stock',
             block: block,
             product: product,
             variantCount: variantCount,
             show_hot_stock: show_hot_stock,
             productMaxStock: productMaxStock,
             current_variant: current_variant
            %}
         {% endunless %}
      {%- when 'perks' -%}
        <div class="productView-moreItems-perks">
          {% unless has_product_combo %}
            <div class="productView-moreItem{% if settings.banner_animation == 'effect_fade_up' %} scroll-trigger animate--slide-in{% endif %}" style=" --spacing-top: {{ spacing_top | append: 'px' }}; --spacing-bottom: {{ spacing_bottom | append: 'px' }}"
             >
               {% render 'product-perks',
                product: product,
                show_size_chart: show_size_chart,
                has_size_chart: has_size_chart,
                show_compare_color: show_compare_color,
                isColor: isColor,
                compare_layout: compare_layout
                %}
             </div>
          {% endunless %}
       </div>

Hello @stefanpandele

You can add perks code in the variant-option file not add in variant-picker file

Hi,

I do not have any variant-option file

Thanks!

then open product variant and search this tag legend and then perks add after legend tag close

Let me show you how I managed to do it.

I have experience with other frameworks and with my solution I feel like I’m scratching my left ear with my right hand and I don’t know if I did right.

well.. let’s begin

  1. in the product-page.liquid, I moved the data passed to the product-perks snippet, to product-variant snipet because later I will move the perks code after the ending legend tag and must have it’s data to work with. After that I removed the when ‘perks’ branch because I no longer need it there.

see below image:

  1. in the product-variant.liquid I put the ‘perks’ code that I have removed from the product-page.liquid just after the ending legend tag.

I wrapped both of them in a container to be able to align both of them (legend and perks)

What do you think? I know it is functional but I do not know if it the best practice. It feels a little weird to process the data that perks needs one level above.

Let me know what you think.

Thanks!!