Solved

Attach Link to Custom content Image in homepage

abdulmir
Visitor
3 0 0

Hello, I've been trying to figure this out for a while but I would like to make this handprint image in my homepage redirect to SHOP page when clicked. I am using Debut theme and my website is mirstudio.co   no experience in coding, if someone could help me out how to do this it would be great, thank you. Pass: A4h32Mir

Screen Shot 2022-08-05 at 11.33.52 AM.png

Accepted Solution (1)

MarinaPetrovic
Shopify Partner
552 124 177

This is an accepted solution.

Go to edit code > sections > custom-content.liquid and replace this element:

<img id="{{ img_id }}"
                       class="custom__image lazyload js"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ block.settings.image.alt | escape }}">

with:

<a href={{section.settings.url}}><img id="{{ img_id }}"
                       class="custom__image lazyload js"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ block.settings.image.alt | escape }}"> </a>

 

And add this to schema (line 354):

{
          "type": "url",
          "id": "url",
          "label": "URL"
        },



 

 

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

Replies 5 (5)

MarinaPetrovic
Shopify Partner
552 124 177

Hi @abdulmir , I can't access your store since it requires password. If you could remove it or share so I can take a look that would be great. 🙂

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
abdulmir
Visitor
3 0 0
A4h32Mir is the password
MarinaPetrovic
Shopify Partner
552 124 177

Hi @abdulmir ,
You should put <a href="url that you want"></a> around your section. I see that you're using some custom component, index-section, so I don't know the exact structure of it, since it doesn't exist on default debut theme. 


M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
abdulmir
Visitor
3 0 0

I have 0 experience in coding, I know it's simple pasting <a href="url that you want"></a> but I tried it and it didn't work. Can you or do you know anyone who can help me out and do it for me from the shopify community?

MarinaPetrovic
Shopify Partner
552 124 177

This is an accepted solution.

Go to edit code > sections > custom-content.liquid and replace this element:

<img id="{{ img_id }}"
                       class="custom__image lazyload js"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ block.settings.image.alt | escape }}">

with:

<a href={{section.settings.url}}><img id="{{ img_id }}"
                       class="custom__image lazyload js"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ block.settings.image.alt | escape }}"> </a>

 

And add this to schema (line 354):

{
          "type": "url",
          "id": "url",
          "label": "URL"
        },



 

 

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution