Wrap Quantity and Add to cart button in a div

[repsicha]

Hello,

I am trying to wrap {%- when 'quantity_selector' -%} and {%- when 'buy_buttons' -%} (Add to cart button) in a div, so I can align them in a row.

For mobile I have sticky version of the button which works perfectly but I don't know how to do it in that {%- for block in section.blocks -%} and {%- case block.type -%}. I just started with shopify and I will be thankful if someone can explain me how to wrap two {%when%} blocks.

Thank you !

https://codefile.io/f/mN1efi8LDB it's too long to post it here as code.

[goldi07]

Hello @repsicha 

You're on the right track wanting to wrap two {% when %} blocks — specifically 'quantity_selector' and 'buy_buttons' — inside a <div> so they can be styled in a row. The trick is to detect them as you're looping, and only render the wrapper once.

Here’s a simple and clean way to do it:

Goal
Wrap only the quantity_selector and buy_buttons blocks inside a <div class="buy-block-wrapper">...</div> so you can style them together in one row.

Solution
You’ll need to do one loop pass before rendering to check if these blocks exist, then wrap them only when you're rendering them. Here's how to do it inside your existing for block in section.blocks loop:

{%- assign wrap_buy_blocks = false -%}

{%- for block in section.blocks -%}
  {%- if block.type == 'quantity_selector' or block.type == 'buy_buttons' -%}
    {%- assign wrap_buy_blocks = true -%}
  {%- endif -%}
{%- endfor -%}

{%- for block in section.blocks -%}
  {%- case block.type -%}

    {%- when 'quantity_selector' -%}
      {%- if wrap_buy_blocks and quantity_wrapper_opened != true -%}
        <div class="buy-block-wrapper">
        {%- assign quantity_wrapper_opened = true -%}
      {%- endif -%}
      <!-- Your quantity selector code -->
      {{ block.settings.label }}

    {%- when 'buy_buttons' -%}
      <!-- Your add to cart button code -->
      {{ block.settings.button_label }}

      {%- if wrap_buy_blocks and quantity_wrapper_opened -%}
        </div>
      {%- assign quantity_wrapper_opened = false -%}
      {%- endif -%}

    {%- else -%}
      <!-- Other blocks render normally -->
      {{ block.settings | json }}

  {%- endcase -%}
{%- endfor -%}

Explanation:
. First loop: checks if quantity_selector or buy_buttons exist — sets a flag.

. Second loop: actually renders the blocks.

. When it hits quantity_selector, it opens the wrapper.

. When it hits buy_buttons, it closes the wrapper after rendering.

Styling
Now you can use CSS to display them in a row:

.buy-block-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Thank you 😊

[repsicha]

Did you really just copy and paste AI reply ? I've tried few times with this and can't understand what to copy and where to paste it. That's why I ask someone to explain it to me.

[goldi07]

ok so find anthor solutions  😑