How can I make an image clickable in a custom section?

Store Design
,
1

Hi,

I want to make image in my custom section (name: custom_section_2) clickable and I tried all solution in some previous post in the community. Though, none of them work.

I once made all images clickable, but link directed same page.

My page link is: https://arterahome.com/pages/black-friday-sale

Could someone help me with this issue?

Very grateful for your help!

Thank you in advance.

P/s: I was able to add image link (see attachment) but the image still not clickable

Screenshot 2023-11-23 at 10.42.10.png
Screenshot 2023-11-23 at 10.42.10.png2766×888 408 KB

2

Hi @arterahome ,

You can add below codes to make the image clickable.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

Note: you can replace "https://arterahome.com/collections/festive-season-2023" with the required URL.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Hello @arterahome ,

If you want to add link on image with text section image then

You can follow these steps:

  1. Go to Online store

  2. Edit Code

  3. Find image-with-text.liquid

  4. Go to schema section and add schema

{
      "type": "url",
      "id": "image_link",
      "label": "Image Link"
    },
  1. Add this code

As you can see the tag I added


          

            {%- if section.settings.image != blank -%}
              {%- if section.settings.image_behavior == 'ambient' or section.settings.image_behavior == 'zoom-in' -%}
                {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}
                {%- capture sizes -%}
              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px,
              (min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667)
            {%- endcapture -%}
              {%- else -%}
                {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
                {%- 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 -%}
              {%- endif -%}
              {{
                section.settings.image
                | image_url: width: 1500
                | image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority
              }}
            {%- else -%}
              {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}

  1. Save it

  2. Now, Go to customization

  3. Add link in the url section which you want to link on image

  4. Save it and refresh the page.

I attach one video for how you add this code.

If you need more help with your store, just ask! If you found this info useful, a Like would be awesome. And if it solves your issue, please mark it as the Solution! Your feedback matters a lot!

Best regards,

Team_OSC
4

Hi Makka,

Thank you so much for the help. I input and the code works perfectly.

Though, I think this is just a temporary solution. Do you know how to make the link I mentioned in the attached image work?

5

Hi @arterahome ,

For it to work with the theme, we will have to make changes to the base theme. This will require coding as per your theme.

6

I understand. Thank you for clarifying!

7

IMO this should be the accepted solution.

Thank you!