Activate zoom for mobile devices

In Pipeline, modal zoom is deactivated due to screen size space. Customers can use standard pinch and zoom to see a larger version of the image. Some customers have requested to activate the standard modal zoom (pop-up window) on mobile devices. To do that, you can manually change the theme.js file and reactivate the feature for mobile. 

Difficulty: Intermediate. Requires you to modify the theme's Javascript file. Commenting out Javascript code in the correct position. Having a backup is required as this code change can break your theme easily with the slightest of errors. 

How to:

1

Make a duplicate of your theme

Do not skip this step, it's required.

2

Check for media.liquid

Open the Code Editor:

(NEW STEP)

Check if you have a newer version of Pipeline with Shopify's Product Media support (new product media format types):

Verify if you have media.liquid in the Snippets folder:

Verification (important for next step):

  • If you have this file: Your theme supports the new Shopify product file formats (use OPTION A in upcoming next step).
  • If your theme does not have this file, then you have an older version of Pipeline (use OPTION B in upcoming next step).
2

Change your Javascript file - theme.js

From the Assets folder, open theme.js:

OPTION A: - Newer versions of Pipeline with Shopify's new product media support (see above if unsure):

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

!Modernizr.touch &&

That will take you to this line:

We will be removing that same highlighted code from inside the brackets. 
Example after removing:

Verify that code block looks correct:

Save the file:

You can now test your product image zoom on a mobile device. 

Skip Option B portion, that is for older versions of Pipeline. 

OPTION B: Older versions of Pipeline (see above if unsure):

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

productImageZoom:

That will take you to this line:

We are going to comment out a section of code after that line.

This is the section of code we will comment out:

3 lines of code, starting with the if (Modernizer.touch) line and ending with the single closing curly bracket. 

Example after commenting out:

How to comment - Comments start with:

/*

and end with:

*/

Verify you have commented out the correct three lines of code.

Save the file:

You can now test your product image zoom on a mobile device.