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

[libbyh]

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 -%}
<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 -%}

[TheUntechnickle]

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

[libbyh]

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.

<a href="/products/bundle2-book" class="button button--secondary">Ebooks</a>

<a href="/products/bundle-books-copy" class="button button--secondary">Paperbacks</a>