How to Make a Product Image Sticky on Shopify Product Pages with BemeApps

By Tony Ng.
February 11th, 2025

How to Make a Product Image Sticky on Shopify Product Pages with BemeApps

Introduction

In the fast-paced world of eCommerce, enhancing user experience on product pages can significantly boost conversion rates. One common request from Shopify users is to make a product image sticky on the product page. This feature ensures that the product image remains visible as customers scroll through the product details, providing a seamless shopping experience. In this guide, we'll explore how to achieve this using Shopify's customization options and address related issues such as image rendering and video autoplay.

Understanding the Problem

Why Make an Image Sticky?

A sticky image can enhance the shopping experience by keeping the product in view as users scroll through descriptions, reviews, and other details. This can lead to increased engagement and potentially higher conversion rates.

Common Issues with Product Images

Oversized Images: Images that are too large can disrupt the layout and user experience. Properly sizing images ensures they render well across different devices.
Video Autoplay: Videos that don't autoplay can result in a less engaging experience. Ensuring videos play automatically when intended can capture customer attention effectively.

Step-by-Step Guide to Making an Image Sticky

Step 1: Accessing Your Shopify Theme Code

Log in to Shopify Admin: Navigate to your Shopify admin dashboard.
Go to Online Store: Select 'Online Store' from the sidebar.
Edit Code: Click on 'Actions' next to your active theme and select 'Edit Code'.

Step 2: Modifying the Theme Code

Locate theme.liquid: In the 'Layout' section, find and open theme.liquid.

Add CSS for Sticky Image: Before the </head> tag, insert the following CSS code:

{% style %}
@media screen and (min-width: 1000px) {
    .product-gallery.product-gallery--desktop-carousel {
        position: sticky !important;
        top: 160px !important;
        max-width: 80% !important;
        margin: 0 auto !important;
    }
}
{% endstyle %}

This code ensures that the product image remains sticky on screens wider than 1000px.

Step 3: Save and Test

Save Changes: Click 'Save' to apply your changes.
Preview: Go to your store and check the product page to ensure the image is sticky as intended.

Optimizing Product Image Size

Resizing Images

Use Image Editing Tools: Tools like Photoshop or online editors can resize images to the recommended dimensions for your theme.
Optimize for Web: Ensure images are optimized for web use to improve loading times.

Enabling Video Autoplay

Steps to Enable Autoplay

Edit Product Media: In the Shopify admin, navigate to the product page and locate the video.
Modify Video Settings: Ensure the video settings include autoplay attributes. You may need to adjust the embed code if it's an external video.

Implementing Hover Play for Videos

To achieve hover play, similar to the example provided, you might need to use custom JavaScript to detect mouse events and trigger video play.

Troubleshooting Common Issues

Sticky Image Not Working

Check CSS Conflicts: Ensure no other CSS rules are overriding your sticky settings.
Browser Compatibility: Test across different browsers to ensure consistent behavior.

Video Not Autoplaying

Browser Restrictions: Some browsers restrict autoplay for videos with sound. Ensure your video is muted if autoplay is desired.

Conclusion

Making product images sticky and ensuring videos autoplay can greatly enhance the user experience on Shopify product pages. By following the steps outlined above, you can implement these features to create a more engaging and seamless shopping experience for your customers.