Re: Linking custom content image in Debut theme

Solved

Linking custom content image in Debut theme

freewheeling
Excursionist
18 1 1

I am trying to figure how to link the images in my Custom Content sections on the homepage since its not an option in the theme configuration.  Thanks! 

Accepted Solutions (2)
GemPages
Shopify Partner
5624 1261 1230

This is an accepted solution.

Hi @freewheeling

 

1. Go to Online Store in your Shopify admin

2. Click Action > Edit Code

GemPages_Agents_1-1665712142234.png

3. Search theme.liquid and add the code like the screenshots below:

GemPages_Agents_0-1665712111213.png

 

please try to add this code

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
    $("#shopify-section-16645614398f5053ef .custom__item-inner--image").click(function(){
      window.location='https://google.com';
    });
    });
  </script>

 

before </head> tag in your theme.liquid

* Change: https://google.com by your custom URL

 

Please try it and let us know how does this works

 

P/s: Based on each section id you want, you can try to find the section id with these steps below:

1. From Chrome browser > Right click the section of your store 

2. Select Inspect

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

freewheeling
Excursionist
18 1 1

This is an accepted solution.

@GemPages Hello, I tried this solution but it not work. It messed the page up so I removed the code. Below is what I put at the bottom of the page. Let me know if I should try something else.  Thanks!

 

<script src="https://freewheelingcafe.com/collections/accessories-1"></script>
<script>
$(document).ready(function(){
$("#shopify-section-16646288780a2b477d .custom__item-inner--image").click(function(){
window.location='https://freewheelingcafe.com';
});
});
</script>

View solution in original post

Replies 9 (9)

GemPages
Shopify Partner
5624 1261 1230

Hi @freewheeling, if we do not have any option in the theme configuration, we can add a small custom code in your theme file. Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
freewheeling
Excursionist
18 1 1

Yes here you go! https://freewheelingcafe.com/

freewheeling
Excursionist
18 1 1

Yes here you go! https://freewheelingcafe.com/

GemPages
Shopify Partner
5624 1261 1230

Thanks for getting back to me. May I know if you want to change image of this section?

GemPages_Agents_0-1665634134621.png

If I am correct, you can:

1. From Shopify admin > select Online Store

2. Click on Customize

GemPages_Agents_1-1665634294098.png

3. Scroll to the section you want to change image, then you can change / update the image here. For example:

GemPages_Agents_2-1665634356707.png

 

Please try it and let me know how it goes.

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
freewheeling
Excursionist
18 1 1

Hello,

Yes that is one of the images that is not linked but there is not an option for adding a url for custom content images. What you have in your example is the image with text overlay.  I assume I have to add it manually to the code somehow as a workaround. Let me know if you need any other information.

Thanks!

 

GemPages
Shopify Partner
5624 1261 1230

This is an accepted solution.

Hi @freewheeling

 

1. Go to Online Store in your Shopify admin

2. Click Action > Edit Code

GemPages_Agents_1-1665712142234.png

3. Search theme.liquid and add the code like the screenshots below:

GemPages_Agents_0-1665712111213.png

 

please try to add this code

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
    $("#shopify-section-16645614398f5053ef .custom__item-inner--image").click(function(){
      window.location='https://google.com';
    });
    });
  </script>

 

before </head> tag in your theme.liquid

* Change: https://google.com by your custom URL

 

Please try it and let us know how does this works

 

P/s: Based on each section id you want, you can try to find the section id with these steps below:

1. From Chrome browser > Right click the section of your store 

2. Select Inspect

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
freewheeling
Excursionist
18 1 1

This is an accepted solution.

@GemPages Hello, I tried this solution but it not work. It messed the page up so I removed the code. Below is what I put at the bottom of the page. Let me know if I should try something else.  Thanks!

 

<script src="https://freewheelingcafe.com/collections/accessories-1"></script>
<script>
$(document).ready(function(){
$("#shopify-section-16646288780a2b477d .custom__item-inner--image").click(function(){
window.location='https://freewheelingcafe.com';
});
});
</script>

freewheeling
Excursionist
18 1 1

@GemPages Additionally I tried this script at the bottom of the page but it did not work and it changed the layout.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#shopify-section-16646288780a2b477d .custom__item-inner--image").click(function(){
window.location='https://freewheelingcafe.com/collections/accessories-1';
});
});
</script>

GemPages
Shopify Partner
5624 1261 1230

Hi @freewheeling , I tried to add this code on my end, and it is working normally. I may need to assist you via collaborator access to help you better. Please check your inbox. Thanks

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center