How to add a button to the image with text section

Store Design
, ,

Topic summary

A user needs to add a button to their Shopify theme’s image-with-text section, which currently lacks this functionality. They provided the existing section code for reference.

Solution provided:

  • Add button HTML code that conditionally displays when both button text and link are configured
  • The button code checks if section.settings.button_text and section.settings.button_link are not blank
  • Include two new schema settings:
    • button_text: Text input field (default: “Button Text”)
    • button_link: URL input field (default: “/”)

Implementation:
The code snippets show both the Liquid template markup for rendering the button and the schema configuration needed in the theme settings. This allows store owners to customize the button text and destination URL through the theme editor without touching code directly.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

The theme I’m using does not have a button in the image to text section. Is there a way I can add a button to this section?

This is the section code:

{{ ‘product-image-with-text.css’ | asset_url | stylesheet_tag }}

{%- if section.settings.sub_title != blank -%}
{{ section.settings.sub_title | escape }}
{% endif %}

{%- if section.settings.text != blank -%}

{{ section.settings.text | escape }}
{% endif %}
{%- if section.settings.image_author != blank -%} {{ section.settings.image_author.alt | escape }} {%- endif -%}

{%- if section.settings.name_author != blank or section.settings.position_author != blank -%}

{%- if section.settings.name_author != blank -%} {{ section.settings.name_author | escape }} {% endif %}

{%- if section.settings.position_author != blank -%}
{{ section.settings.position_author | escape }}
{% endif %}

{% endif %}
{%- for block in section.blocks -%}
{%- if block.settings.image != blank -%} {%- assign image_size = block.settings.image_width | append: 'x' -%} {{ block.settings.image.alt | escape }} {%- endif -%}
{%- endfor -%}

{% schema %}
{
“name”: “t:sections.product-image-with-text.name”,
“tag”: “section”,
“class”: “product-image-with-text-section spaced-section”,
“max_blocks”: 4,
“settings”: [
{
“type”: “text”,
“id”: “sub_title”,
“default”: “For instance collection name”,
“label”: “t:sections.product-image-with-text.settings.sub_title.label”
},
{
“type”: “textarea”,
“id”: “text”,
“default”: “Talk about your brand, collection or product”,
“label”: “t:sections.product-image-with-text.settings.text.label”
},
{
“type”: “header”,
“content”: “t:sections.product-image-with-text.settings.header.content”
},
{
“type”: “image_picker”,
“id”: “image_author”,
“label”: “t:sections.product-image-with-text.settings.image_author.label”
},
{
“type”: “text”,
“id”: “name_author”,
“default”: “For instance author name,”,
“label”: “t:sections.product-image-with-text.settings.name_author.label”
},
{
“type”: “text”,
“id”: “position_author”,
“default”: “For instance author position”,
“label”: “t:sections.product-image-with-text.settings.position_author.label”
}
],
“blocks”: [
{
“type”: “product_image_with_text”,
“name”: “t:sections.product-image-with-text.blocks.product_image_with_text.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.product-image-with-text.blocks.product_image_with_text.settings.image.label”
},
{
“type”: “range”,
“id”: “image_width”,
“min”: 50,
“max”: 300,
“step”: 10,
“default”: 300,
“unit”: “t:sections.product-image-with-text.blocks.product_image_with_text.settings.image_width.unit”,
“label”: “t:sections.product-image-with-text.blocks.product_image_with_text.settings.image_width.label”
}
]
}
]
}
{% endschema %}

2

add this code

{% if section.settings.button_text != blank and section.settings.button_link != blank %}
  {{ section.settings.button_text }}
{% endif %}

{
  "type": "text",
  "id": "button_text",
  "default": "Button Text",
  "label": "Button Text"
},
{
  "type": "url",
  "id": "button_link",
  "default": "/",
  "label": "Button Link"
}