Wrap Quantity and Add to cart button in a div

Store Design

Topic summary

A Shopify developer is attempting to wrap two Liquid template blocks—quantity_selector and buy_buttons (Add to Cart)—inside a single <div> to align them horizontally on desktop, while keeping a separate sticky mobile version.

Challenge:
The developer is unfamiliar with how to conditionally wrap multiple {% when %} cases within a {% for block in section.blocks %} loop in Liquid.

Proposed Solution:
One response suggested a two-pass loop approach:

  • First loop detects if both blocks exist
  • Second loop opens a wrapper <div> at quantity_selector, then closes it after buy_buttons
  • Includes CSS using display: flex for row alignment

Code snippets and a linked external file were provided.

Current Status:
The original poster expressed frustration, suggesting the response may have been AI-generated and unclear for implementation. The discussion remains unresolved with no further detailed guidance provided.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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.

1 Like
2

Hello @repsicha

You’re on the right track wanting to wrap two {% when %} blocks — specifically ‘quantity_selector’ and ‘buy_buttons’ — inside a

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

…
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 -%}
        
        {%- assign quantity_wrapper_opened = true -%}
      {%- endif -%}
      
      {{ block.settings.label }}

    {%- when 'buy_buttons' -%}
      
      {{ block.settings.button_label }}

      {%- if wrap_buy_blocks and quantity_wrapper_opened -%}
        

      {%- assign quantity_wrapper_opened = false -%}
      {%- endif -%}

    {%- else -%}
      
      {{ 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 :blush:

3

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.

4

ok so find anthor solutions :expressionless_face: