Make image in Image with Text section (Feature row) Clickable Debut Theme

Highlighted
New Member
4 0 0

Hi,

I'm trying to make the image in the feature-row image with text clickable.  I have tried a few of the methods listed in another forums but they don't seem to work for me. As a shopify newbie, a step-by-step is appreciated.

Thank you!

 

0 Likes
Highlighted
Shopify Partner
9340 1183 3275

Hello, @Nivedita_Sreeni 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share this section code,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
4 0 0
{% capture image_layout %}

{% if section.settings.image != blank %}
{% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
{% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{%
endcapture %}
{%- assign img_url = section.settings.image | img_url: '1x1' |
replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: section.settings.image, height:
545, wrapper_id: wrapper_id, img_id: img_id %}

data-image-loading-animation>
class="feature-row__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512,
1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio
}}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">




{{ section.settings.image | img_url: '600x600', scale: 2 |
img_tag: section.settings.image.alt, 'feature-row__image' }}

{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

{% endcapture %}


{% if section.settings.layout == 'left' %}
{{ image_layout }}
{% endif %}


{% if section.settings.title != blank %}
{{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{
section.settings.text }}

{% endif %}
{% if section.settings.button_label != blank and
section.settings.button_link != blank %}
{%- capture ariaLabel -%}
{{- section.settings.button_label -}}
{%- if section.settings.button_link.type == 'frontpage_link' -%}
: {{ 'homepage.general.title' | t -}}
{%- elsif section.settings.button_link.type == 'catalog_link' -%}
: {{ 'collections.catalog.title' | t -}}
{%- elsif section.settings.button_link.object.title -%}
: {{ section.settings.button_link.object.title -}}
{%- endif -%}
{%- endcapture -%}

class="btn"
aria-label="{{ ariaLabel }}">
{{- section.settings.button_label | escape -}}

{% endif %}


{% if section.settings.layout == 'right' %}
{{ image_layout }}
{% endif %}




{% capture image_layout %}

{% if section.settings.image != blank %}
{% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
{% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{%
endcapture %}
{%- assign img_url = section.settings.image | img_url: '1x1' |
replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: section.settings.image, height:
545, wrapper_id: wrapper_id, img_id: img_id %}

data-image-loading-animation>
class="feature-row__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512,
1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio
}}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">




{{ section.settings.image | img_url: '600x600', scale: 2 |
img_tag: section.settings.image.alt, 'feature-row__image' }}

{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

{% endcapture %}


{% if section.settings.layout == 'left' %}
{{ image_layout }}
{% endif %}


{% if section.settings.title != blank %}
{{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{
section.settings.text }}

{% endif %}
{% if section.settings.button_label != blank and
section.settings.button_link != blank %}
{%- capture ariaLabel -%}
{{- section.settings.button_label -}}
{%- if section.settings.button_link.type == 'frontpage_link' -%}
: {{ 'homepage.general.title' | t -}}
{%- elsif section.settings.button_link.type == 'catalog_link' -%}
: {{ 'collections.catalog.title' | t -}}
{%- elsif section.settings.button_link.object.title -%}
: {{ section.settings.button_link.object.title -}}
{%- endif -%}
{%- endcapture -%}

class="btn"
aria-label="{{ ariaLabel }}">
{{- section.settings.button_label | escape -}}

{% endif %}


{% if section.settings.layout == 'right' %}
{{ image_layout }}
{% endif %}
0 Likes
Highlighted
Shopify Partner
9340 1183 3275

@Nivedita_Sreeni 

Thanks for code 

but sorry code are missing schema 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes