BACK

how to edit the zoom effect on shopify

How To Disable Zoom On Dawn Theme Shopify 2.0 | Tutorial 2022 welcome back graduates today I'm goi

EcomGraduates

Updated on Feb 24,2023

How To Disable Zoom On Dawn Theme Shopify 2.0 | Tutorial 2022

The above is a brief introduction to how to edit the zoom effect on shopify

Let's move on to the first section of how to edit the zoom effect on shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to edit the zoom effect on shopify catalogs

How To Disable Zoom On Dawn Theme Shopify 2.0 | Tutorial 2022

welcome back graduates today I'm going,to be teaching you how to add an option,to disable this annoying media Zoom now,it's a great option it definitely it,would help if it was executed properly,but what we're going to do is we're,going to add you and add an option so,you can just turn this thing off I know,a lot of you have been requesting this,we've had numerous emails asking for,this option so here we are I'm going to,show you how to do this and the reason,one of the reasons why I don't like it,is and also this example here is where's,the product I just zoomed where is it,where's the product so now how is the,user going to know that they have to,scroll down you gotta you gotta make,things super simple for your your uh,your visitors anyways you know as you,can see you know you're scrolling down,you're scrolling down but now it's just,this massive image so let's get right to,it I'm going to close out of this,example three two one here we go,as always you're going to want to go,into your Shopify uh admin dashboard,click online store,online store come on okay what the hell,is going on here there we go all right,Shopify decided to actually uh listen to,me so anyways We're not gonna we're,gonna work on the theme that we want and,as always click on preview so we can,actually see the changes go back and,we're gonna go and I'm gonna show you,the customizer right here,and we're going to go into a product and,this yes this is our heavily modified,Donna theme on steroids,and you see we do have a zoom option now,when you click on product info there's,no option to disable that they don't,give you the ability to do that for some,reason they don't give it to you so,let's go and edit the code so you can,get that get there by clicking on edit,code right here,I like to kind of organize my tabs,and what we're gonna do is you're gonna,have a folder with the options so once,you actually go to our website and uh,get this code you'll have a zip file,with the the files in there teaching you,how to do it,typically we have a little index.html,file that you can follow along you will,have that when this is released we just,haven't prepared that yet but what,there's two areas we're going to edit,we're going to edit a file in section so,I'm going to add a file in Snippets and,we also have a schema that we're going,to add to the the section Json the,section schema so let's go and get the,snippet and what you want to do and also,I noticed some people are asking about,how we got you know got this to uh this,theme editor change there's actually a,Chrome extension we've we found uh it's,amazing it allows you to search for,items inside the file if you guys want a,video on that I most likely make a video,on that just uh leave a comment below,and let us know it's really cool like,you can search for all kinds of things,like if I type in IMG you'll find,everything that has an image tag if I,type in I don't know like product,you'll find classes that have products,so if I go here and go to say collage,and I do control F find product you can,find that here's a class,settings.product or whatever it may be,you can find certain things inside the,file it makes life so much easier I,personally use vs code but if you guys,like editing code here highly suggest,this Chrome extension it's awesome,so let's get rid of the search it's,enough me rambling on about how awesome,things are so we're going to create a,snippet,because I you know we marked a folder,snippet called EG media Zoom,so let's go let's close out of these we,don't need these right now we need our,sections yet let's go add new snippet,we're going to call EG hyphen media,hyphen Zoom,Zoom dot liquid,done,and you're just going to paste the,contents of this file so you can open,this with a text app uh like you can,open this file with a text app whatever,it is you want to open with open with,and text me,and then we're just going to copy and,paste this code in here we just copied,it from our text editor right here and,you just paste it in here right hit save,pull saved close out of it awesome stuff,so we got that code and then what we're,going to do is what's the next step all,right so we did that so we created our,file now we're going to go into our,section and there's a little text,document in here explaining what to do,um so what you're going to do is you're,going to paste the following code here,render EG media Zoom so now what we're,going to do is we're going to search for,Main,product,and we found it here and then what you,want to do is you want to paste this,render EG media Zoom look for line 28,underneath end style right here,let's just format a little bit better,we're going to hit save,now what we need to do is we actually,have to add the section Json so let's,close out of this,let's go into the next option so it's a,schema,and now I have a text document here,explaining to you what you need to do so,you're going to go and you're going to,find this option here,you're going to find this this string of,text here,and let's go into here and just do,control F when you're in the window Ctrl,F and at the bottom you'll see and now,shopify's editor does have this now but,this Chrome extension like I said it's,awesome so find next we know it's right,here and the text document tells you to,paste it after the last curly brace with,the comma which is this right here this,is ending that now what we're going to,do is we're going to copy this right,here and it will format weird just,adjust the formatting it's not going to,break anything I just like to have,things formatted properly,and that's it that's that's literally,all you do and you just hit save,Now by default it's it's turned off so,it's not enabled so we can actually,change this to true if we want and then,what we can do is we can go into the,theme customizer,and we're going to go to a product I,don't know what that was Shopify has,been glitzy as hell this this week,um so let's go to a product right let's,go here,and now that the zoom is enabled right,product information,Amazon enabled shouldn't be enabled but,let's just try it,enabled,you know what because I already tested,this oh could not find asset I'm an,idiot I told you I told you I I named it,wrong I named it wrong I knew I did,yes let's go all the way back up let's,fix this,EG media Zoom,it's fine,snippet EG media Zoom ah,I'm an idiot I have to rename this,I included that liquid,that is my fault,I'm a dummy,all right let's refresh,see I'm a professional and even I make,mistakes okay you're human it's okay to,make mistakes alright so now this is,enabled I hit save,there you go it doesn't no longer do you,have uh media Zoom so let's just click,on a product,see,no more zooming no more annoying Zoom,you have these massive images that you,can clearly see most most of the time if,if you're worried about people being on,a mobile device most of the time they,pinch and zoom they don't need to have a,button that clicks on it that actually,causes more UI issues than anything,um but anyways guys that's the end of,the video so yes,um you know this is a page snippet you,know it's paid but,it's very modestly priced it's going to,get allow you to have the options here,if you're uh you know if you're upset,about that I do apologize I have seen,some comments of people saying oh why,are you you know selling this you know,this and that you know I ask you the,same question why are you selling,products with a high markup you know,when you put in the work to produce,these Snippets for you to make your life,easier to give you more functionality on,your store and it also helps us you know,stay in business and keep producing,these videos,um you know and keep coming up with,ideas you know we listen to all of your,ideas we respond to all of your emails,if you have any issues with our Snippets,we're always there to help fix any bugs,that you have you know we're very very,responsive with our support we take,pride in our support we want to provide,you guys with the best Snippets and,we're also constantly updating our,Snippets for the latest versions of,these themes you know we got started I,believe when it was like Dawn two I,think yeah and now we're up currently,updating all of our Snippets to version,seven because there's Dawn seven now,this has been tested on don7 you know so,it and I Know It Works flawlessly on,don7 we're going to be testing it on all,previous versions of Dawn and also other,free themes so a lot of our Snippets are,meant for Dawn but they actually do work,with other free themes believe it or not,so,it's pretty cool all right and I say,free themes with the Shopify free themes,not some random website you want to,but anyways guys thank you so much for,watching and uh please leave a comment,if you have any questions subscribe to,our channel so you get updated on the,latest Snippets we're gonna be coming,out with more advanced Snippets very,soon and um also smash that like button,baby it helps the YouTube algorithm,until next time guys

Congratulation! You bave finally finished reading how to edit the zoom effect on shopify and believe you bave enougb understending how to edit the zoom effect on shopify

Come on and read the rest of the article!

Browse More Content