Adding multiple buttons to the Image with Text section in the Dawn theme

Store Design

Topic summary

A user successfully modified the Dawn theme’s Image with Text section to allow 3 buttons instead of 1 by changing the limit parameter in sections/image-with-text.liquid. However, the buttons are stacking vertically rather than displaying side-by-side.

Proposed Solution:
A responder suggested wrapping buttons in a container div using forloop.first and forloop.last conditions, then applying flexbox CSS to arrange them horizontally on desktop while stacking on mobile.

Current Status:
The solution didn’t work as expected. When inspecting the rendered HTML, the buttons appear without the intended button-container wrapper div, suggesting the Liquid code modification may not have been applied correctly or the forloop logic isn’t functioning as anticipated in this context.

The issue remains unresolved, with the buttons still rendering as individual anchor elements without the container structure needed for horizontal layout.

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

I want to have 3 buttons instead of just 1 in the Image with Text section of the Dawn theme, and was able to change the maximum from 1 to 3 by editing this code in sections/image-with-text.liquid:

"type": "button",
"name": "t:sections.image-with-text.blocks.button.name",
"limit": 3,

However, I can’t figure out how to make the buttons sit side by side instead of one on top of the other. I found a possible solution from 2023, but it looks like the code in image-with-text.liquid has changed since then. I’m guessing it should go in here somewhere?

{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}

{{ block.settings.button_label | escape }}

{%- endif -%}
2

Hi @libbyh ,

Thank you for reaching out about adding multiple buttons that display horizontally in the Dawn theme’s Image with Text section. I’m happy to provide a solution for this!

You’ve already correctly modified the button limit to 3 by changing:

"type": "button",
"name": "t:sections.image-with-text.blocks.button.name",
"limit": 3,

To make these buttons display side by side instead of stacked, you’ll need to make the following changes:

Step 1: Modify your button block code in the image-with-text.liquid file. Find this section:

{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
<a
{% if block.settings.button_link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link }}"
{% endif %}
class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
{{ block.shopify_attributes }}
>
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}

Replace it with this code:

{%- when 'button' -%}
{% if forloop.first %}
<div class="button-container">
{% endif %}
{%- if block.settings.button_label != blank -%}
<a
  {% if block.settings.button_link == blank %}
    role="link" aria-disabled="true"
  {% else %}
    href="{{ block.settings.button_link }}"
  {% endif %}
  class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
  {{ block.shopify_attributes }}
>
  {{ block.settings.button_label | escape }}
</a>
{%- endif -%}
{% if forloop.last %}
</div>
{% endif %}

Step 2: Add CSS for the button container. Go to your Theme Editor (Customize → Theme Settings → Custom CSS) and add this CSS:

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.button-container .button {
  margin-top: 0;
}

@media screen and (max-width: 749px) {
  .button-container {
    flex-direction: column;
  }
  
  .button-container .button {
    width: auto;
    margin-top: 1rem;
  }
  
  .button-container .button:first-child {
    margin-top: 0;
  }
}

This will create a container that:

  • Displays buttons in a row on desktop
  • Adds proper spacing between buttons
  • Stacks buttons vertically on mobile for better user experience

After making these changes, your multiple buttons should display side-by-side on desktop and stack neatly on mobile devices.

If you’ve any questions, directly reach out to us via email.

Best regards,

Shubham | Untechnickle

3

Thank you for responding! Unfortunately that didn’t work—I did a “view code” on the page, and this is what the button code looks like. I don’t think they’re in a “button-container” div.

Ebooks

Paperbacks