How to make banners clickable in foodie theme

[kashifjohn]

 

https://nops57cn2i49p7r0-59964620842.shopifypreview.com

password: 1234567

[niraj_patel]

Hello @kashifjohn 

To make banners clickable in the Foodie theme on your Shopify store, you'll need to modify the banner section's code slightly. Here's how you can do it:

Steps to Make Banners Clickable in the Foodie Theme:

1. Identify the Banner Section:

   • Go to Online Store > Themes > Edit code.
   • In the Sections folder, find the file that corresponds to the banner you want to make clickable. It might be named something like banner.liquid, hero.liquid, or similar.

Edit the Banner Section Code:

• Open the relevant section file.
• Look for the part of the code that handles the image rendering, typically using the img or background-image CSS property.
• Wrap the image or banner code in an anchor (<a>) tag to make it clickable.

Here's an example:

liquid

{% assign banner_link = section.settings.banner_link %} <a href="{{ banner_link }}"> <div class="banner-image" style="background-image: url({{ section.settings.banner_image | img_url: 'master' }});"> <!-- Banner content here --> </div> </a>

• Ensure you replace banner_image and banner_link with the appropriate variables used in your theme.

1. Add a Setting for the Link (Optional):

   • If your theme doesn’t already have a setting to add a link to the banner, you can add it manually.
   • In the same section file, find the schema area at the bottom of the file, and add a setting like this:
   json

   { "type": "url", "id": "banner_link", "label": "Banner Link", "default": "#" }
   • This will add an option in the theme editor where you can specify the URL for the banner link.

2. Save and Preview:

   • Save the changes and go to the theme editor (Customize under Themes).
   • Add the link to the banner through the new option (if you added one) or check the functionality of your newly clickable banner.

3. Test the Banner:

   • Preview your store and click on the banner to ensure it redirects to the correct URL.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[kashifjohn]

im unable to do this. can you do this if i give you collab access ?

[kashifjohn]

https://theartisanshall.com/

Password - 1234567