How to add Call to Action button to image with text

reblev · May 9, 2022, 5:03pm

Hi,

We are using the Atlantic theme, and I would like to add a call to action button (exactly like the one in their slideshow section option - screencap below) 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?

page I would like to add call to action buttons to

https://hopsongrace.com/pages/hg-bedding

image of call to action button from slideshow section.

KetanKumar · May 10, 2022, 4:18am

@reblev

yes, please send that section full code so i will check and update

LitCommerce · May 10, 2022, 9:34am

Hi @reblev ,

You want to add this?

Please send me the code of the ‘image-with-text’ file, I will check it

reblev · May 10, 2022, 8:56pm

Hi, the photo below is how I would want it to look. Code below.

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

reblev · May 10, 2022, 9:36pm

We want the button under the text, like this:

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

KetanKumar · May 11, 2022, 3:56am

@reblev

can you 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.

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

{% endschema %}

LitCommerce · May 11, 2022, 4:35am

Hi @reblev ,

I have checked and the code is edited at Customize, can you send me the HTML code in Text, I will guide you to edit it

reblev · May 11, 2022, 3:03pm

this

this just seemed to move the copy above the image, and still no call to action button.

reblev · May 11, 2022, 3:04pm

Thank you, below is the 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 %}

{% if heading != blank %} {{ heading }} {% endif %}

{% if content != blank %} {{ content }}

{% endif %}

{% else %} {% assign placeholder_style = 'collection-1' %} {% 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 %}

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

LitCommerce · May 13, 2022, 2:55am

Hi @reblev ,

Can you send me the Customize screenshot of the section? I will check it for you

KetanKumar · May 13, 2022, 6:48am

@reblev

can you check them setting

reblev · May 16, 2022, 6:23pm

what in the theme settings should I check?

reblev · May 16, 2022, 6:28pm

reblev · May 16, 2022, 6:30pm

all that appears in the theme settings section is the accent colour.

LitCommerce · May 17, 2022, 4:02am

Hi @reblev ,

Please copy the code in this field and send it to me, I will help you edit it

reblev · May 17, 2022, 3:42pm

Can you tell me where to do this? I know where to find it on the shopify page editor (there is no code in there at all). Since this is built in the theme editor, I’m not sure how to see the code.

reblev · May 25, 2022, 4:00pm

Can you tell me where to do this? I know where to find it on the shopify page editor (there is no code in there at all). Since this is built in the theme editor, I’m not sure how to see the code.

LitCommerce · May 26, 2022, 8:57am

Hi @reblev ,

You can create a staff account for me, I will guide you in detail.

You just need to copy it and paste it into the post, it will automatically render the HTML by Shopify.

Hope it is clear to you.

Topic		Replies	Views
How to add call to action button in image with text section - Atlantic theme Store Design	4	58	August 13, 2022
need help making image clickable Store Design shopify-themes	5	66	November 6, 2024
Add a second button to "Image with Text" in 'Be Yours' theme Store Design customizations , troubleshooting	2	76	April 22, 2023
Add A Second Button To Image With Text - Shopify Theme Dawn 5.0.0 Store Design css , shopify-themes	0	49	August 3, 2023
Can I make an image in text link to a product page? Technical Q&A	3	62	August 18, 2022

How to add Call to Action button to image with text

{% if heading != blank %} {{ heading }} {% endif %}

{{ 'onboarding.image_block_title' | t }}

Related topics