Motion theme product page mobile layout product zoom trubleshooting

Store Design
, , , , , , , , ,
1

I’m using the Motion theme and want to replicate a feature from the old theme. Previously, they had implemented an image zoom option triggered by clicking on the entire image, as well as customizable slider dots. Could you please help me achieve this in the updated theme? Specifically, I need help finding the relevant code. Can you guide me on where to locate it?

Here’s a demo link showing how I want to replicate the feature: Click Here

The old theme with the existing code is here: Click Here

We need to implement this feature in the new updated theme here: Click Here

Thank you in advance

2

To replicate the image zoom on click and customizable slider dots, you’ll need to find the JavaScript and CSS handling these features in your old theme.

  1. Check the product.liquid or main-product.liquid file for the zoom function.

  2. Look for JavaScript in theme.js or a similar file controlling image interactions.

  3. locate CSS related to slider dots in theme.scss.liquid or base.css

Once you locate the code, you can add it to the updated theme with adjustments.

Let me know if you need help integrating it!

Thanks.

3

@yanthtechnology Can you please ellaborate it by detail, because I’m not that much familiar in coding, I’ll attach the old theme file where all the features are there, can you please help me to find the coding part which will be achieved

( https://drive.google.com/file/d/1zmC4R8eJi5ydQRMZr-kBttJ-Xm3SJF9V/view?usp=sharing - This drive contains the old theme file )
New theme link: https://www.taramajeans.com/

Old theme link: https://cfv5ic3gqxbpieq6-67925410094.shopifypreview.com