How do you make image clickable in refresh theme

skilrexxx
New Member
9 0 0

hello i need help with attaching a link to an image with text. 
I would like the image to be clickable so it redirects the customer to the page of the product. is it possible?
i have found only old posts on this topic and they didnt really work for me.
if anyone can help ill be really happy. thank you all in advance.
my store: https://resolvekicks.cz/
password: kundaaa

Replies 6 (6)

layoutbase
Pathfinder
111 13 25

Hi @skilrexxx

 

Unfortunately, we weren't able to access your store with the provided password. However, let us suggest some edits for you: 

  1. Go to Online Store->Theme->Edit code
  2. Find sections/image-with-text.liquid
  3. Find the img tag, then replace it with the code below

 

{% if block.settings.button_link != blank %} <a href="{{ block.settings.button_link }}">{% endif %} 
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >
          {% if block.settings.button_link != blank %} </a>{% endif %} 

 

Example below: 

layoutbase_0-1670565732416.png

 

 

Hope this works out for you. 

 

Cheers, 

Layoutbase - Drag & drop pagebuilder

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!

BSS-Commerce
Shopify Expert
3477 461 519

Hi @skilrexxx 

Please follow these steps:

- Go to Online store => Theme => Edit code, find the file image-with-text.liquid. Add the following code to schema -> settings, as shown below:

{
   "type": "url",
   "id": "image_link",
   "label": "Image link"
}

view - 2022-12-09T141912.952.png

- Find the code:

<div class="image-with-text__media image-with-text__media--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2){%- endcapture -%}
          {{ section.settings.image | image_url: width: 1500 | image_tag:
            loading: 'lazy',
            sizes: sizes,
            widths: '165, 360, 535, 750, 1070, 1500'
          }}
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
</div>

Replace it by:

<a href="{{ section.settings.image_link }}">
      <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2){%- endcapture -%}
          {{ section.settings.image | image_url: width: 1500 | image_tag:
            loading: 'lazy',
            sizes: sizes,
            widths: '165, 360, 535, 750, 1070, 1500'
          }}
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
</a>

- Save it and then go to Online Store -> Theme -> Customize. Click on the image to see the input box to enter the path

view - 2022-12-09T142026.461.png

The above guide only applies to the Image with text section. You can do the same with the slideshow by editing the slideshow.liquid file.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

skilrexxx
New Member
9 0 0

hello i applied the code. the link works but the image turned out massive, take a look
https://resolvekicks.cz/
is there a way to set it as before?

layoutbase
Pathfinder
111 13 25

Hi @skilrexxx

 

Sorry to hear that happened. May I suggest these steps:

 

1. remove the line:

{% if block.settings.button_link != blank %} <a href="{{ block.settings.button_link }}">{% endif %}

- add the following close tag: 

<img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >

 

2. Remove the line: 

{% if block.settings.button_link != blank %} </a>{% endif %} 

Replace with:

{% if block.settings.button_link != blank %} <a href="{{ block.settings.button_link }}" style="z-index: 1;">&nbsp;</a>{% endif %} 
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >

 

 

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!

omersharon
Tourist
4 0 0

i was on the same issue in my refresh theme. I tried what's advised here , it didnt work for me as is, but i finally made it work, with much simpler implementation.  

1. go to image-with-text.liquid (all happens here)

2. add this part to the schema part of the code under "settings (this will add a link imput field in the UI 😞

{
"type": "url",
"id": "image_link",
"label": "Image link"
},

 

once pasted, should look like this:

omersharon_4-1691232565574.png

 

3. now just add this one row: " <a href=" {{ section.settings.image_link }} " target="_blank"></a> " for the link to work, it will open the link in a new tab, if you want it in the same tab remove the " target="_blank".

 

where to put it: look for the {%- else -%}
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} and put it just above it.

once pasted, should look like this

omersharon_3-1691232537951.png

 

that's my contribution to this great community,  i hope it works for you.

 

corynnsmith
Tourist
7 0 0

hi can you help me with this? which code is it?