Up next in 10
How To Edit Html Code In Shopify
1K views
May 19, 2024
Editing HTML code in Shopify allows you to customize your store beyond the default options. To start, log in to your Shopify admin panel and navigate to "Online Store" > "Themes." Click on "Actions" next to your current theme and select "Edit code." This opens the theme editor, where you can access and modify various files such as HTML, CSS, and Liquid templates. Locate the specific file you need to edit (e.g., theme.liquid, product.liquid) and make your changes. Always preview your edits to ensure they look and function as intended. Save your changes and refresh your site to see the updates. Editing HTML in Shopify gives you greater control over your store's appearance and functionality.
View Video Transcript
0:00
How to Edit HTML code in Shopify
0:04
Hey guys, welcome back to the YouTube channel. Today I will be going over how you can change the code of your Shopify Web Store
0:13
So let's get into it. Now, I have a couple of life hacks for you guys as well
0:19
such as where can you acquire code even if you don't know how to write it
0:23
Well, I will be discussing all that and so much more, so watch this video till the end
0:29
Now, to get started with editing your code, simply log on to your Shopify account and this will be your dashboard
0:36
In your dashboard, you want to click on online store. Once you click on online store, you will be able to see your Shopify, you know, theme
0:45
And what you want to do, the first thing, is click on these three dots, then click on duplicate
0:51
Now, what this enables you to do is that even if you mess up on the code, when you're writing HTML, you will still be able to be able to
0:58
to retrieve or reset your website to its original form if you have a duplicate
1:05
The duplicate will be of the specific time that you duplicated it on and it will have
1:11
all of the codes written as they are at that specific moment. So you don't have to worry
1:17
about any retrieval or messing anything up and you can freely customize everything
1:22
Now after that you just want to click on customize and this will open up the code of Shopify
1:28
so your Shopify website code is opened up now for some people this might seem really difficult to navigate from and you know we have all of these different blocks now this is like the simplified section this is like our
1:43
CSS section where you have blocks, where you have bars, you can edit those. But if you want to
1:49
access the actual code code then you want to click on the three dots once more and click on edit code Now this will actually open up all of the actual code and this is the HTML code of your website Now this can be really overwhelming it has so much stuff But the most important part
2:09
is only the theme.liquid. So the theme dot liquid is basically your basic homepage and in your basic
2:16
home page the first section is obviously the header section, then you have your titles
2:21
then you have your script, then this is like the body of your entire website, and then you also have your body and so on and so forth
2:30
So let's say I want to add some kind of button, and I don't know, you know, how to write code, but I want to add it in my home page
2:39
Well, you can just go into a platform like chat GPT, and you can add any kind of a code to your chat GPT platform, and it will write it for you
2:51
you guys can just copy this and you want to replace product variant with the variant ID
2:57
and we will just go into our script over here and wherever you want to place it you will be
3:02
able to understand the script vaguely even if you're not very familiar but you can just scroll ahead
3:09
and take a look at wherever you want to add it click on paste then you can click on save
3:15
and once you click on save the asset will be saved and the changes will be applied to your Shopify
3:22
so you can actually see on the top left we have our buy now button and obviously I did not edit the code or anything
3:28
that's why it's just you know there but you can in this way you can add anything to your store
3:34
obviously if you know how to code that is a plus point you will be able to do this a lot better
3:40
or even if you're copying and pasting for you know another website or page so if you
3:48
want to create a entirely new page you can go ahead click on edit code and then you
3:55
have you know all of your codes and let say you want to go into let say you have sections and you have the footer liquid and then you can add more things to your footer or you can go into assets and then
4:10
change the asset component as well so you have a lot that you can do with this specific HTML editing
4:17
and you have you know we have this product page and this is like our main product page and we can
4:22
edit this to alter the appearance of the page. So that is how you edit HTML code in Shopify
4:30
Now other than that, I do have a couple of more tips for you guys that I would love for you guys
4:36
to know before you get started with building your Shopify store. Now, the first tip is that
4:41
you need to remove the password of your website. I cannot imagine how many people have made this
4:47
simple mistake of not removing their password off of their site. All you have to have to have
4:52
do to remove the password is go into online store, click on preferences, or you can just go into
4:58
online store. It just says over here, remove password, and you can click on that and it will
5:03
remove password, or you can go into your preferences, scroll down, and you have password protection
5:09
So you can restrict access and you can disable this so people can access your website and you can
5:15
properly launch your e-commerce business. Now below that, you also have spam protection and you can
5:21
enable Google Recapture on login, create account and password recovery pages. Now I don't like to
5:27
enable Recapture on contact and comment forms. The reason for that is I don't want the people
5:33
especially when I have a new website. I don't want, you know, the very few customers that I'm
5:38
getting to have to go through the hassle of completing a capture. I definitely know that they're not
5:43
bots and I don't feel like, you know, putting my customers through this hassle. Obviously
5:48
obviously if you're a more established brand, you definitely should enable these, but if you
5:52
are not you can disable these and it really does no harm to your website The next is obviously to make sure that your product listings are correct and you have categorized your products If you go into your website and go into your catalog over here it displays all of your products
6:10
And if I go into collection, it has very randomized categories and they're not sorted properly
6:16
So whenever you're launching a store, you want to make sure that everything has been organized
6:21
A lot of times you put those categories on the product section. But if you don't double check with the page section, there might be some mess-ups and some of your products can, you know, not be in the right place
6:32
So you want to make sure you cross-check everything before you get started
6:37
Now, I have a couple of applications that I recommend for dropshippers, such as CJ drop-shipping or DZers
6:44
This is probably the best if you want to use AliExpress as your main supplier
6:48
And if you want to, you know, get more customers, you should offer bundle discounts
6:53
and to create discounts all you have to do is click on settings and you will be able to see over here
7:01
in your billing somewhere so yes so in your settings you can actually set gift cards and once you have
7:08
gift cards you can click on gift cards never expire and you can set up your you know own gift cards
7:15
you can also offer coupon discount so you can go ahead go into your discount section over here you can
7:22
click on create discount and offer a discount you have free shipping buy one get one free a
7:28
certain amount or a certain percentage of certain products now the best part about this is that
7:35
this is native to shopify you don't need any third party applications plus you can also just
7:40
enable this for a certain collection so maybe you're offering a discount on your summer collection
7:45
or only on your winter collection so you can only apply to that specific category as well i hope you
7:51
you guys found this video helpful make sure to leave a like and subscribe to our youtube channel
7:57
and i will catch you guys in the next video
#Business & Industrial
#Computers & Electronics