How To Add Custom HTML Section In Shopify (2024) Tutorial

What is up everybody, welcome to this new video of Techspress

I'm going to be showing you how to add a custom HTML file

into your actual Shopify store. So, the process is actually really, really simple. There are a few ways that we can do this

Some things are simple, some things are a little bit more complicated than that

So you want to do both things. I'm going to do, first of all, the most simple and easiest way

And for that, what I want to do is to demonstrate it by using a new widget

So, what I want to do here is to go into elfsite.com

This is an application that can be helping me to build almost any kind of themes

And check it out how it's going to be looking here. And let's say that I wanted to create something like this into my actual store

And as you can see, we have this HTML file. So, whether you have an HTML file to add like a new section, to add like a new banner, to add whatever

So, the most easiest way is to go into your Shopify. And here you want to go into customize

Here into customize, what I want to do is to hit into the header section

And here as you can see, I have this custom liquid. So I'm going to remove this section and I'm going to do this once again for you

I'm going to hit into add section. And here you want to go for custom liquid

So if you click into custom liquid, it's going to be asking you to paste the snippet or the liquid code to create advanced customizations

So I click this option, I paste it, and then I hit now into save

And voila, my HTML file, my code, my theme, my widget actually was being saved into my actual store

So I hit into view and just make sure that it's actually working. So, the other way that we can do this is to go into the actual edit of the code

So here I wanted to go, instead of going into customize, let's go for the three dots and go for edit the code

So here to edit the code, what I want to look out, if I wanted to do something inside my theme, look out for theme liquid

So here, what I want to do is to paste the code that I'm actually most interested in

So here into chat TBD, let's say that create an HTML file

This is just an example of a new HTML so I can paste it directly into the edition code

And here I'm going to go back into my store. I'm going to hit into the theme liquid as we just were here before

And here what I wanted to look out is to actually look out for the liquid or the actual style

So before here, you can paste the code in here, depending on what is the stuff that you're actually looking for

In my case, I wanted to look out for the actual body. And here, enter and paste my code

So I'm going to hit now into save. So as you can see, it was really easy. It's not that hard to add HTML codes into your actual store

And it's actually working. So with that being said, guys, we have now reached the end of the video

So don't forget to like and subscribe to the channel if you want to see more amazing tutorials on how you can do this

And if you have any questions, you can always ask, what is your HTML code about

And you can ask the Shopify or even you can ask chat TBD to tell you where you can paste this direct code inside your section of Shopify into this edition code

So thank you once again for watching the video, guys. And I'll see you next time. I'm