Two blocks side by side like 2 columns in a row

[stefanpandele]

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>

[AK_Design_Dev]

Hello @stefanpandele 

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

[stefanpandele]

Hi,

I do not have any variant-option file 

Thanks!

[AK_Design_Dev]

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

[stefanpandele]

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:

2. 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!!