Tutorial: How to add mobile zoom
Disclaimer: This is an intermediate to advanced tutorial which requires you to modify Javascript code and Liquid code. If you're unfamiliar with these type of modifications, we strongly advise that you hire a small task agency or Shopify Expert to make the modification. Invisible themes does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme and for making backups. Be sure to have a good working backup available in the event any errors are made or your theme stops functioning.
Result:
This tutorial will allow you to zoom on a product image on mobile devices. Tapping on a product image will open that image in a modal window. Note, there is no magnification effect.
Prerequisites:
1. You must have a current backup of your theme before starting.
2. Experience with editing Javascript and Liquid code.
Tutorial How to:
- 1
-
Make a duplicate of your theme
Important: Don't skip this step.
From your list of themes, use the Actions link and choose Duplicate:
We strongly recommend that you make the tutorial code changes with your draft version of the theme (copied version) and not the live theme that's running your store.
- 2
-
Edit theme.js from the assets folder
After you've made a duplicate of your theme, use the Edit code option from the duplicated version:
In the Code Editor, from the Snippets folder, open product.liquid:
From the assets folder, open theme.js
One the right-code side, use the Find feature: Command-F (Mac) or Control-F (Windows) and search for:
initZoom: function
Example:
Next, highlight this entire code block, we will be replacing with new code:
Replace that entire block of code with this new code:
Example after:
Verify your change and then save the work.
Save the file:
- 3
-
Modify product media code
Depending your your version of Broadcast, you will need to add some code to your product media Liquid file. Broadcast version that support Shopify's new product media file formats will edit the file media.liquid in the snippets folder. Older versions of Broadcast will need to edit product.liquid from the snippets folder.
Check to see if you media.liquid - Newer versions of Broadcast:
- If your theme has this file, follow Step 4
- If your theme does not have this file, follow Step 4B
- 4
-
Edit media.liquid from the snippets folder
From the Snippets folder, open media.liquid. Use the Find feature and search for:
data-type="image"
Example:
Add a blank line below that line:
Add the following single line of code in that new blank line:
Example:
Save the file:
End of tutorial code steps. The next step (4B) is for older versions of Broadcast only
- 4B
-
Edit product.liquid from the Snippets folder
This step is for older versions of Broadcast. Skip if you have finished Step 4.
Use the Find feature and search for:
data-src="{{ img_api }}"
There will be 2 instances. We will be adding new code below each of these lines:
Make a blank line below the first instance:
Add the following single line of code in the new blank line:
Example:
Next, add a blank line below the second instance and then add the following line of code to that blank line:
Example of both lines added:
Note: Be sure to add the correct line of code to each instance - The code is different for both lines.
Verify your work, make sure both lines of code are different and in the correct position. Use the above image for reference.
Save the file:
Notes:
Test your theme in mobile mode, you should now see a modal window pop-up when you tap on a product image from a product page.