Enhancing the Zoom Feature on Product Images in the Pipeline Theme

Store Design
, ,
1

Hello Shopify Community,

I’m using Pipeline theme on my store and have a question regarding the zoom function on the product page. Currently, there’s a small icon at the bottom-left corner of the product image that allows users to zoom in. I’m wondering, is there a way to expand this functionality so users can simply click anywhere on the image to zoom in, instead of just the small icon?

Any insights or guidance would be greatly appreciated. Thank you in advance for your time and help!

2

@Chloe_M
Hello, Please Check

To modify the zoom functionality in the Pipeline theme on your Shopify store so that users can click anywhere on the product image to zoom in, you will likely need to make some code customizations. Here’s a general guide on how you might achieve this:

Important: Before making any code changes, it’s a good practice to create a backup of your theme or work on a duplicate theme to avoid any potential issues.

  1. Access Theme Files:

    • From your Shopify admin, go to “Online Store” > “Themes.”
    • Find the “Pipeline” theme and click the “Actions” button, then select “Edit code.”

  2. Locate the JavaScript File:

    • In the theme code editor, look for the JavaScript file responsible for the product image zoom functionality. It’s often named something like product.js or product-image.js. The exact name may vary depending on the theme’s structure.

  3. Modify the Javascript:

    • Open the JavaScript file and search for the code that handles the zoom functionality.
    • You’ll likely find a section of code that binds the zoom functionality to the small icon’s click event. You’ll need to modify this code to bind it to the entire product image instead.

  4. Change the Event Binding:

    • Find the line of code that adds a click event listener to the small icon. It might look something like this:
      javascript

$(‘.zoom-icon’).on(‘click’, function() { // Zoom logic here });

 
  • Modify it to bind the click event to the product image itself. You can use the $(‘.product-image’) selector if that’s the class associated with your product images:

javascript

 

  1. $(‘.product-image’).on(‘click’, function() { // Zoom logic here });

    • Ensure that you also update the zoom logic to work when the product image is clicked.

  2. Save Changes:

    • After making the necessary modifications, save the changes to the JavaScript file.

  3. Test:

    • Preview your store and test the product image zoom functionality. Click anywhere on the product image to see if it now zooms in.

  4. Debugging:

    • If you encounter any issues or the zoom doesn’t work as expected, check the browser console for any JavaScript errors. Review your code to ensure there are no syntax errors or logic issues.

  5. Publish Changes:

    • Once you’re satisfied with the changes and they work as expected, click the “Save” button in the theme code editor to save your changes. If everything looks good, you can publish your theme to make the changes live.

Please note that the exact steps and code modifications may vary depending on the specific structure and implementation of the Pipeline theme. If you’re not comfortable making these code changes yourself, it’s a good idea to reach out to a Shopify developer or the theme’s support team for assistance, as they can provide more tailored guidance based on your theme version. Additionally, always make sure to back up your theme and test changes in a development environment before applying them to your live store.

3

Hello @Chloe_M , we use the latest pipeline theme yet I wasn’t able to follow @oscprofessional 's instructions – maybe that’s from an older theme? Anyway, below is what worked for us to get the full image clickable to zoom which is much better UX in our opinion.

  1. In theme.liquid, replace the two areas that references theme.js with theme.dev.js per the pipeline instructions on theme.dev.js file. This references the non-minified version of the JavaScript code so you can edit it.

  2. Then in theme.dev.js around line 9415, replace the setting of zoomButton from ‘[data-zoom-button]’ to ‘[data-media-slide]’ like the below (I also added [data-type="image"] property to only target images and not the videos that we have)

const selectors$l = {
  slideshow: '[data-product-slideshow]',
  singeImage: '[data-product-image]',
  zoomButton: '[data-media-slide][data-type="image"]', // changed from '[data-zoom-button]',
  zoomWrapper: '[data-zoom-wrapper]',
  mediaId: 'data-media-id',
};
  1. Lastly, so the cursor shows the magnifying glass correctly when hovering over the images, append this to either theme.css or better, use the “Custom CSS” field of the “Product template” component in the theme’s customize editor which how we did it:
/* add zoom icon to full product image to match change in theme.dev.js */
[data-media-slide][data-type="image"] {
  cursor: zoom-in !important;
}

And that’s it – looks and behaves well.

4

Hi, You can refer use app here https://apps.shopify.com/magepow-productzoom

This app supports Sense and all themes on Shopify store here https://themes.shopify.com/