Inserting a link on an image means making an image clickable by adding a hyperlink to it, so that when a user clicks on it, they redirect to a specified URL. It allows customers to navigate to product pages or other relevant sections of the store with a single click. This feature is commonly used in banners, product and promotional images, to improve the overall shopping experience, potentially increase conversion rate and engagement.
Shopify allows merchants to make the images clickable through different methods, including using the built-in rich text editor, custom coding, and modifying liquid files for more advanced customization. This article helps you to choose the right approach for different parts of Shopify store, helping you maintain both a visually appealing and functional design.
Why Add Link on Image in Shopify?
Clickable images offer a seamless way for users to navigate your Shopify store without relying on text links. This makes the interface more interactive and intuitive, especially on mobile devices where tapping an image is easier than clicking on a text link.
Improve User Experience: Interactive images streamline the shopping experience by allowing customers to quickly access the product page or collection with a single click.
Easy Navigation: By linking images directly to relevant pages, such as product details or collections, customers easily navigate to the product. This reduces the number of clicks needed to reach desired content, making the shopping process smoother.
Boost Conversion: Clickable images simplify the buying process by providing a direct path to purchase. This can lead to higher conversion rates as customers easily find the product when navigation is straightforward.
How to Add Link on Image in Shopify Store?
Shopify provides different methods to link images depending on where they are used, such as product pages, collections, blog posts, and custom sections within themes.
- Shopify Rich Text Editor
- Shopify Theme Customization
- Shopify Theme Code
1. Shopify Built-in Rich Text Editor
Shopify rich text editor allows you to link images on blog posts, product or collection descriptions, and page content without coding.
- Access to Shopify store with your login credentials.
-
Go to Online Store > Pages (for pages) or Online Store > Blog Posts (for blog posts). Click on the page or product where you want to add the linked image.
- In the content editor, click on the Insert Image button or image icon to insert the image.
- Click on the image inside the text editor. Click the "Insert Link" icon in the editor tool.
-
Enter the URL you want the image to link to.
- Click on save to apply all the changes.
2. Shopify Theme Customization
Shopify lets you add links to images on the homepage banner, featured images, slideshow in themes through customization.
-
Navigate to Online Store > Themes, click on Customize in the current theme section.
- Select the desired page or section where your image is located .
- Click on the image and find the “Link” field on the right side of the editor and enter the desired link.
- Click Save to confirm and publish the changes.
3. Shopify Theme Code
If you need full customization or custom banners, images in custom sections which the theme doesn’t provide, then you can manually add a link to an image directly from Shopify theme liquid files.
- In the Shopify admin dashboard. go to Online Store > Themes.
-
Click on three dots, before the Customize button in the current theme section. Select the Edit code from the drop down menu.
Determine the sections or Snippets folder, depending on where you need the change. Open the relevant Liquid file like hero.liquid or slideshow.liquid for slideshows or image banners.
Within the chosen .liquid file, you’ll need to wrap the existing <img> tag with an <a> tag. Here’s a simplified example:
<a href=”desired-link">
<img src="image-source" alt="image-alternative-text">
</a>
Best Practices To Add Link on Image?
Device responsiveness: Image responsiveness is crucial to improve the load speed of a website. Use CSS to make the image to adjust for all screens and test it on different devices to check it properly displays.
Adding the link correctly: Make sure that you added a link correctly. Use proper HTML structure with secure (https://) URLs and meaningful alt text for accessibility. For example: <a href="https://example.com">
<img src="image.jpg" alt="Descriptive Alt Text"></a>.
Debugging broken links: It is important to debug broken links as they can ruin user experience and credibility of your website. Click the image to check if the link works or you can use tools like Google Search Console to find broken links.
Ensure proper navigation and user experience: Ensure the linked image is easy to click by keeping enough space around it. Use a hover like effect on the image to indicate clickability. Always link the image to relevant pages for better navigation and user experience.
SEO Optimization: Compress images to improve page load speed, which positively impacts SEO. Use descriptive filenames and alt text to help search engines understand the content of the image content and its relevance.
