Adding a 2nd button to the Image with Text section in Dawn theme

[snacky]

I need to add a second button to the Image with Text section in the Dawn theme and have them align next to each. I see that changing the limit to "2" allows me to add the additional button but it puts it below the first button rather than next to it. 

    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "limit": 2,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        }
      ]
    }

[Ignelis · Accepted solution]

Hey, @snacky !

1. In the Shopify admin, go to Online Store > Themes > Actions > Edit Code.

2. In the left-hand side menu, click on Sections and open the file image-with-text.liquid.

3. Find the code for the button section you shared in your question. It should be something like this:

{% for block in section.blocks %}
{% if block.type == 'button' %}
<div class="button-wrapper">
<a href="{{ block.settings.button_link.url }}" class="button">{{ block.settings.button_label }}</a>
</div>
{% endif %}
{% endfor %}

4. Replace it to this: 

{% assign buttons = section.blocks | where: 'type', 'button' %}
{% if buttons.size > 0 %}
  <div class="button-wrapper">
    {% for block in buttons %}
      <a href="{{ block.settings.button_link.url }}" class="button">{{ block.settings.button_label }}</a>
    {% endfor %}
  </div>
{% endif %}

5. Save changes

This new code will loop through all the button blocks in the Image with Text section and display them side by side in a button-wrapper container.

Note: You may need to adjust the CSS styling of the buttons and the button wrapper to make sure they align and look the way you want.

Let me know if this works!

[PageFly-Richard]

Hi @snacky ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-image-with-text.css->paste below code at the bottom of the file:

.image-with-text__text-item .image-with-text__content {
	 flex-direction: unset !important;
	 flex-wrap: wrap !important;
	 gap: 10px !important;
}
 .image-with-text__text-item .image-with-text__content .image-with-text__text {
	 margin-bottom: 20px !important;
}
 .image-with-text__text-item .image-with-text__content > *:not(.button) {
	 width: 100% !important;
}
 .image-with-text__text-item .image-with-text__content .button {
	 margin: 0 !important;
}
 

I hope it would help you
Best regards,

Richard | PageFly

[val---i]

Could you please post your code with this update?

I have this in my "image-with-text.liquid":

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