Side by Side Clickable Image

Side by Side Clickable Image

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify themes (Design might be vary)

Do you yearn to elevate your Shopify store's visual storytelling and user engagement? This article introduces a solution: creating clickable side-by-side image sections. We'll delve into what these sections are, why you might want to incorporate them, and provide a step-by-step guide on how to add them to your store using code (though the link to the code requires purchase).

What are Side-by-Side Clickable Images?

Imagine incorporating two captivating images side-by-side on your product pages, collection pages, or even your homepage. Each image can be linked to a specific product, collection, or even an external website. This functionality transforms these image sections into interactive elements that enhance the visual appeal and user experience of your store.

Why Use Side-by-Side Clickable Images?

Here are some compelling reasons to consider adding side-by-side clickable images to your Shopify store:

  • Boost Visual Storytelling: These sections allow you to showcase products or collections in a visually engaging way, grabbing customer attention and effectively communicating your brand message.
  • Enhance User Experience: Clickable images provide an interactive element, encouraging visitors to explore different parts of your store or discover new products.
  • Increase Click-Through Rates: By strategically linking the images, you can direct customers towards high-converting pages or special promotions, potentially leading to increased sales.

Additional Considerations:

  • The provided code offers customization options. You can adjust the code to modify the appearance of the image section, such as image size, spacing, and text color.
  • It's important to ensure the images you use are high-quality and visually appealing to maximize their impact.
  • Consider the overall layout of your store and strategically place the side-by-side image sections to optimize user experience.


What you are buying:

  • Clickable banner image side by side
  • Options to change the size of images added

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 


Steps on how to add Side by Side Clickable Image

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

Step #2. Create a new section file

In Section folder, create a new section, name it whatever you want, then replace the default code with the code below

Step #3. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Step #4. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add a section named "Image side by side". Make sure to SAVE once you are done customizing



By incorporating side-by-side clickable images into your Shopify store, you can create a more visually engaging and interactive shopping experience for your customers. Remember, high-quality visuals and strategic placement are key to maximizing the effectiveness of this design element.


Back to blog

Leave a comment