How to add call to action button in image with text section - Atlantic theme

Store Design
1

Hi,

We are using the Atlantic theme, and I would like to add a call to action button (exactly like the one in the second screencap) to our image with text option on the page linked below. Can I create a new section with liquid code that would be the same as image with text, but with a call to action button under the text?

Image below is how it currently looks - I had to hyperlink the entire text, which isn’t nearly as nice.

*IMPORTANT: this is not edited on the shopify homepage, but in theme editor, so there is no option to edit the code in the text field.

https://hopsongrace.com/

the section:

Screen Shot 2022-07-18 at 7.04.09 AM.png
Screen Shot 2022-07-18 at 7.04.09 AM.png2668×1394 368 KB

LAYOUT:

we would want the call to action button under the text like this:

Screen Shot 2022-07-18 at 7.07.21 AM.png
Screen Shot 2022-07-18 at 7.07.21 AM.png1440×672 108 KB

2

if it helps, here is the code for dynamic-image-with-text-liquid

{% assign fixed_height_mobile = true %}
{% assign fixed_height_desktop = true %}
{% if section.settings.mobile_height == 'natural' %}
  {% assign fixed_height_mobile = false %}
{% endif %}
{% if section.settings.desktop_height == 'natural' %}
  {% assign fixed_height_desktop = false %}
{% endif %}

{%- assign image = section.settings.image -%}
{%- assign heading = section.settings.title | escape -%}
{%- assign content = section.settings.content -%}
{%- assign alignment = section.settings.alignment -%}

{% if heading or image %}
  {%- capture image_tag -%}
    {%- if section.settings.image != blank -%}
      {%
        render 'rimg'
        img: image,
        alt: heading,
        size: '1024x1024',
        lazy: true
      %}
    {%- else -%}
      {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
  {%- endcapture -%}

  {% assign placeholder_style = 'collection-2' %}
  {% assign color = settings.accent-colour %}
  {% assign color_string = 'fill="' | append: color | append: '" xmlns' %}
  {% capture demo_image %}{%- render 'placeholder_svg_uri', placeholder: placeholder_style, color_string: color_string -%}{% endcapture %}

  
{% else %}
  
{% endif %}

{% schema %}
{
  "name": "Image with text",
  "class": "shopify-section--image-with-text",
  "settings": [
    {
      "type": "select",
      "id": "margin",
      "label": "Show spacing",
      "options": [
        {
          "value": "regular",
          "label": "Regular"
        },
        {
          "value": "none",
          "label": "None"
        }
      ],
      "default": "regular"
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Image position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "desktop_height",
      "label": "Desktop height",
      "options": [
        {
          "value": "natural",
          "label": "Natural"
        },
        {
          "value": "small",
          "label": "500px"
        },
        {
          "value": "medium",
          "label": "600px"
        },
        {
          "value": "large",
          "label": "700px"
        },
        {
          "value": "extra-large",
          "label": "800px"
        }
      ],
      "default": "natural"
    },
    {
      "type": "select",
      "id": "mobile_height",
      "label": "Mobile height",
      "options": [
        {
          "value": "natural",
          "label": "Natural"
        },
        {
          "value": "small",
          "label": "300px"
        },
        {
          "value": "medium",
          "label": "400px"
        },
        {
          "value": "large",
          "label": "500px"
        }
      ],
      "default": "natural"
    },
    {
      "type": "checkbox",
      "id": "parallax",
      "label": "Enable parallax",
      "default": false
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Image with text"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Text",
   
      "default": "

Say a bit about your brand, a specific product, or promotion.

"
    }
  ],
  "presets": [
    {
      "category": "Image",
      "name": "Image with text"
    }
  ]
}

{% endschema %}
3

Hi,

Try this code.

{% assign fixed_height_mobile = true %}
{% assign fixed_height_desktop = true %}
{% if section.settings.mobile_height == 'natural' %}
  {% assign fixed_height_mobile = false %}
{% endif %}
{% if section.settings.desktop_height == 'natural' %}
  {% assign fixed_height_desktop = false %}
{% endif %}

{%- assign image = section.settings.image -%}
{%- assign heading = section.settings.title | escape -%}
{%- assign content = section.settings.content -%}
{%- assign alignment = section.settings.alignment -%}

{% if heading or image %}
  {%- capture image_tag -%}
    {%- if section.settings.image != blank -%}
      {%
        render 'rimg'
        img: image,
        alt: heading,
        size: '1024x1024',
        lazy: true
      %}
    {%- else -%}
      {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
  {%- endcapture -%}

  {% assign placeholder_style = 'collection-2' %}
  {% assign color = settings.accent-colour %}
  {% assign color_string = 'fill="' | append: color | append: '" xmlns' %}
  {% capture demo_image %}{%- render 'placeholder_svg_uri', placeholder: placeholder_style, color_string: color_string -%}{% endcapture %}

  
{% else %}
  
{% endif %}

{% schema %}
{
  "name": "Image with text",
  "class": "shopify-section--image-with-text",
  "settings": [
    {
      "type": "select",
      "id": "margin",
      "label": "Show spacing",
      "options": [
        {
          "value": "regular",
          "label": "Regular"
        },
        {
          "value": "none",
          "label": "None"
        }
      ],
      "default": "regular"
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Image position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "desktop_height",
      "label": "Desktop height",
      "options": [
        {
          "value": "natural",
          "label": "Natural"
        },
        {
          "value": "small",
          "label": "500px"
        },
        {
          "value": "medium",
          "label": "600px"
        },
        {
          "value": "large",
          "label": "700px"
        },
        {
          "value": "extra-large",
          "label": "800px"
        }
      ],
      "default": "natural"
    },
    {
      "type": "select",
      "id": "mobile_height",
      "label": "Mobile height",
      "options": [
        {
          "value": "natural",
          "label": "Natural"
        },
        {
          "value": "small",
          "label": "300px"
        },
        {
          "value": "medium",
          "label": "400px"
        },
        {
          "value": "large",
          "label": "500px"
        }
      ],
      "default": "natural"
    },
    {
      "type": "checkbox",
      "id": "parallax",
      "label": "Enable parallax",
      "default": false
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Image with text"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Text",
   
      "default": "

Say a bit about your brand, a specific product, or promotion.

"
    },
    {
      "type": "text",
      "id": "btn_title",
      "label": "Button Title",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ],
  "presets": [
    {
      "category": "Image",
      "name": "Image with text"
    }
  ]
}

{% endschema %}

Thanks

Hit Like and Accept as Solution.

4

Hi, this is almost perfect! It looks amazing, but the link didn’t work whenever I clicked the button.

5

Do you happen to have a fix for why the button link doesn’t go to anything? Thanks so much. I really appreciate your help.