How to Make Your Horizon Theme Banner Fully Clickable

In this guide, we’ll walk you through the process of making the banner in your shop’s Horizon theme fully clickable, enhancing user experience by expanding the clickable area beyond the default "Shop Now" button.

Why Make the Banner Fully Clickable?

By default, the Horizon theme’s banner only allows the "Shop Now" button to be clickable, which limits the interactive space and can detract from the visual appeal due to its small size and central placement. Making the entire banner clickable improves usability and creates a more seamless and professional look for your online store.

Step-by-Step Instructions

1. Access Your Admin Panel

Start by logging into your shop’s admin panel. This is where you’ll make all the necessary changes to your theme’s code.

2. Navigate to Edit Code

• From the admin dashboard, go to Online Store > Themes.
• Locate your Horizon theme and click Actions > Edit Code.

3. Locate the _slide.liquid File

• In the code editor, use the search bar to find the _slide.liquid file.
• Open this file to begin editing.

4. Add the Required Code

You’ll need to paste three pieces of code into specific sections of the _slide.liquid file. These code snippets are available in the description of the accompanying video tutorial or on our website (link provided in the video description). Follow these steps:

• Paste the first code snippet in the designated section of _slide.liquid.

  {%- assign slide_link = block.settings.link -%}

  
  
• Paste the second code snippet in the next specified area.

   {%- if slide_link != blank -%}
    {%- endif -%}

  
  
• Paste the third code snippet in its respective location.

   {%- if slide_link != blank -%}
      
    {%- endif -%}

  
  

5. Update the Schema

• Navigate to the schema section within the code editor.
• Paste the provided schema code in the appropriate place.

    {
        "type": "url",
        "id": "link",
        "label": "Slide link"
      },

  
  

6. Save Your Changes

• After adding all the code snippets, click Save to apply the changes.
• Optionally, click the three dots in the code editor and select Customize to access the theme customizer.

7. Customize the Banner Links

• In the customizer, you can hide any unnecessary text elements if desired.
• Add links to your banners:
  • For the first banner, add a link to a collection (e.g., "All Collections").
  • For the second banner, add a link to a product page (e.g., "All Products").
• Save your changes after adding the links.

8. Preview and Test

• Preview your store to ensure the entire banner is now clickable.
• Test the banners on both desktop and mobile devices to confirm functionality. Clicking anywhere on the banner should now direct users to the linked collection or product page.

Benefits of a Fully Clickable Banner

• Improved User Experience: A larger clickable area makes it easier for users to navigate.
• Enhanced Visual Appeal: A fully clickable banner looks more polished and professional.
• Mobile-Friendly: The changes ensure the banner is fully functional on mobile devices, providing a consistent experience across platforms.