How can I disable product zoom on the Xtra theme?

Store Design
1

Gentlemen,

I would like to disable the product zoom function (click) on the product page of the xtra theme. I have tried to follow some of the guides that are available for other themes, but they didn’t work for this theme. Cheers

2

  1. To disable the product zoom function on the Xtra theme, you will need to modify the theme’s source code. Here’s how you can do it:

    1. Access the theme files: In your Shopify store’s admin panel, go to “Online Store” > “Themes”. Find the Xtra theme and click “Actions” > “Edit code”.

    2. Locate the product.liquid file: On the left-side menu, look for the “Templates” folder, then click on “product.liquid”.

    3. Search for the code responsible for the zoom function: In the product.liquid file, look for the code that initializes the zoom function. It should look something like this:

$('.product-single__photo').zoom({
  url: $('.product-single__photo img').attr('src')
});
  • Comment out the code: To disable the zoom function, you will need to comment out the code responsible for it. You can do this by adding <!-- and --> around the code, like this:
  1. Save the changes: Once you’ve made the necessary changes, click the “Save” button to save the changes.

This should disable the product zoom function on the Xtra theme. If you run into any issues, feel free to ask for further assistance.

3

Thanks you sir, I had a look there but I got stuck:

Search for the code responsible for the zoom function: In the product.liquid file, look for the code that initializes the zoom function. It should look something like this:

Could you possibly elaborate? I’m not sure exactly what to look for. I understand the need to comment something out, but I don’t know exactly where. Thanks for your patience

4

Sure! Here’s a more detailed explanation of how to locate the code responsible for the zoom function in the Xtra theme:

  1. Look for a JavaScript file: The code that initializes the zoom function is likely to be located in a JavaScript file, rather than in the product.liquid file. Look for a file with a name like “theme.js” or “product-zoom.js”.

  2. Search for the zoom function: Once you’ve located the JavaScript file, look for the code that initializes the zoom function. It may be referred to as “zoom”, “image zoom”, or something similar. Here’s an example of what the code might look like:

$('.product-single__photo').zoom({
  url: $('.product-single__photo img').attr('src')
});

  • Note that the exact code might be slightly different in your theme, but the basic structure should be similar.

    1. Comment out the code: Once you’ve located the code responsible for the zoom function, you can disable it by commenting it out using the <!-- and --> tags, as described in the previous answer.

    I hope this helps you locate the code responsible for the zoom function in the Xtra theme! Let me know if you have any further questions.

5

There is no product.liquid file there. There is only one called product.json

6

If there is no product.liquid file in your Xtra theme, then the code responsible for the zoom function may be located in a different file. Here’s what you can do:

  1. Look for a JavaScript file: The code that initializes the zoom function is likely to be located in a JavaScript file, such as “theme.js” or “product-zoom.js”. Look for a file with a similar name in the “Assets” folder.

  2. Search for the zoom function: Once you’ve located the JavaScript file, look for the code that initializes the zoom function. It may be referred to as “zoom”, “image zoom”, or something similar. Here’s an example of what the code might look like:

$('.product-single__photo').zoom({
  url: $('.product-single__photo img').attr('src')
});

  • Note that the exact code might be slightly different in your theme, but the basic structure should be similar.

    1. Comment out the code: Once you’ve located the code responsible for the zoom function, you can disable it by commenting it out using the <!-- and --> tags, as described in my previous answer.

    I hope this helps you locate the code responsible for the zoom function in your Xtra theme. If you’re still unable to find it, or if you run into any other issues, don’t hesitate to ask for further assistance.

7

I can’t find it in there sir. Furthermore, if I search for “zoom” nothing shows up either

8

If you are unable to locate the code responsible for the zoom function in your Xtra theme, it may be that the zoom functionality is not built into the theme and needs to be added.

Here are a few things you could try:

Check the theme documentation: Some themes include a documentation file that explains how to customize the theme, including adding and disabling certain features. Check to see if the Xtra theme has any documentation that might be helpful.

Use a third-party app: If the zoom function is not built into the Xtra theme and you would like to add it, consider using a third-party app from the Shopify App Store. There are many apps available that offer product zoom and lightbox functionality, and they can be easily installed and configured.

I hope this helps! Let me know if you have any other questions or if there’s anything else I can do to assist you.

9

I’m just trying to disable the zoom functionality from the product page. I’m not trying to add it. It doesn’t seem to be covered in the theme documentation either how to do it. I guess it’s a simple thing, but I couldn’t see how. Any ideas, please suggest. Cheers, p

10

If you’re unable to find the code responsible for the zoom function in the Xtra theme, it’s possible that it’s added through a third-party app.

Here are a few steps you can try to disable the zoom functionality:

  1. Check the installed apps: Go to the Shopify admin, and navigate to the “Apps” section. Look for any apps that relate to product images, zoom, or lightbox functionality. If you find an app that adds the zoom functionality, you can try disabling or uninstalling it.

  2. Check the theme settings: The Xtra theme may have a settings page where you can enable or disable certain features, including the product zoom. Look for a section in the theme settings that relates to product images or zoom functionality.

  3. Contact the theme support: If you’re still unable to locate the code responsible for the zoom function, consider reaching out to the theme support for assistance. They should be able to tell you if the zoom function is built into the theme and how to disable it.

I hope these steps help you disable the zoom functionality on your product page. Let me know if there’s anything else I can do to assist you.

11

Ok, thank you for your time sir. I looked through all the settings already, and it’s a brand new install so I don’t know about any 3rd party apps there. I thought it would be a simple thing, but it sounds like I will need to ask the maker. Thanks so much for looking at this. Cheers, p

12

Hi @Yeady123

Where i can locate the zoom-in feature on the product page I couldn’t locate it, how to hide the “Exclusive of VAT” label from the price? for the currency built it feature does it support the customer can see prices in their local currency because it’s only showing US dollars for all countries, I’m using Stripe, not shopify payment ,Since I’m using Stripe, does it allow customers to see prices in their local currency?

I’d really appreciate your help as I’m aiming to launch soon!
Thank you so much,