Shoppable Image
The Shoppable Image section is a powerful feature that allows you to create an interactive shopping experience directly from an image. This feature is ideal for showcasing products in a contextual setting, such as a model wearing various clothing items or accessories. Users can hover over the products in the image to see details and a quick-buy option.
Adding the Section
- In your Shopify admin, go to the theme editor.
- Click on Add Section.
- Select Shoppable Image from the list of available sections.
Uploading Your Image
- Click on Select Image to upload your main image.
- It's recommended to use a square image for the best display.
- Optionally, upload a mobile-optimized image under Image (mobile).
- For optimal results, ensure your images are high-resolution and clearly showcase the products.
- Use the mobile-optimized image option to enhance the shopping experience on smaller devices.
Adding Product Dots
- In the section sidebar, click on Add Product, then Select product.
- A product selection list will appear. Choose the product you want to feature.
- Adjust the horizontal and vertical position of the product dot until it aligns with the product on the image.
Customizing the Appearance
In the section settings, you have the option to change the color of the product dots.
- This can help with visibility depending on your image's background.
- Experiment with different dot colors to see what stands out best against your image.
- Remember, the goal is to make it easy for customers to identify and interact with the products in the image.
Conclusion
The Shoppable Image section is a versatile tool to enhance your e-commerce store's visual appeal and user interaction. By following these steps, you can effectively showcase your products in a compelling and interactive manner. Always ensure that your settings align with your store's theme and branding for a seamless shopping experience.