Linking custom content image in Debut theme

[freewheeling]

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! 

[GemPages · Accepted solution]

Hi @freewheeling, 

1. Go to Online Store in your Shopify admin

2. Click Action > Edit Code

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

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]

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?

[freewheeling]

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

[freewheeling]

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

[GemPages]

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

If I am correct, you can:

1. From Shopify admin > select Online Store

2. Click on Customize

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

Please try it and let me know how it goes.

[freewheeling]

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 · Accepted solution]

Hi @freewheeling, 

1. Go to Online Store in your Shopify admin

2. Click Action > Edit Code

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

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

[freewheeling · 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]

@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]

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