BACK

how to embed code in shopify

SHOPIFY TUTORIAL | HOW TO ADD CUSTOM HTML 2022 welcome back graduates so today i'm,going to be showi

EcomGraduates

Updated on Mar 12,2023

SHOPIFY TUTORIAL | HOW TO ADD CUSTOM HTML 2022

The above is a brief introduction to how to embed code in shopify

Let's move on to the first section of how to embed code in 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 embed code in shopify catalogs

SHOPIFY TUTORIAL | HOW TO ADD CUSTOM HTML 2022

welcome back graduates so today i'm,going to be showing you how to add,custom html sections to your shopify,theme now we're using dawn theme it's a,great free theme but it's missing a lot,of core features that you know i think,you guys need you know in our previous,videos we taught you how to add parallax,image overlays taught you how to add an,faq section we even taught you how to,add this beautiful instagram section so,now we're going to be teaching you i say,we i'm going to be teaching you how to,do custom html sections as you can see,we got an embedded map here which is,pretty cool,now this this custom html,section allows you to do a lot of unique,things with your store you can embed,things you can write your own html so,anyways let's get right to it and show,you how to do this and as always show,you step by step by step now what we got,here is our sections so our custom html,folder and you just have one file now,let's go right into our theme,as always we start off with that home,click on the online store you'll end up,in themes and let's go and edit the,theme that we want to edit so you're,going to go and i'm going to open up the,customizer in another tab,as well as edit code now on here i will,show you that there is no custom html,section,we've got our parallax feature that we,that i showed you how to do,and what else do we got in here we've,got the instagram faq but there's no,custom html all right let's go and solve,that it's kind of cool though they got,custom liquid that's really cool,all right,now let's go back to the code editor now,we're going to go into the sections,folder i'm going to click on add new,section,and we'll do we'll call this eg hyphen,custom hyphen html,hit enter now you're going to want to,open up a text editor,like i always suggest use it use vs code,or sublime but for this case notepad is,fine for this tutorial,i only advise people to use code editors,when you know you're actually trying to,do development work,all right so drag it over,copy it all,go into here get rid of all that and,paste it,hit save,it's really that easy it really is we,make it painless for you because that's,what we strive to do so now what we're,going to do is we're going to refresh,reload,and wait for shopify to take its time,now what we want to do is go into add,section,and we want to click on custom html,so as you can see here we've got an html,section we also have a,an option where you can add you know,text you can align it you can adjust the,spacing the margins the padding the,background color text color,max width you can wrap it in a container,if you want but i'm going to show you a,really cool site called,power.io and what it allows you to do it,allows you to embed all these unique,things there's all kinds of different,apps that they got they have social,feeds you got media galleries count on,timers form builders,more form bill builders i don't know,what these things are it seems like,they're saying the same thing over and,over but for this case we're just going,to go into the countdown timer,maybe you're running a sale and you're,counting down the days until the sale,ends or drops or whatever,got it so now we'll publish,and we'll embed with code we're going to,copy this code we're just going to go,into the customizer we're going to paste,the html code right there,hit save,and look at that,how cool is that now because i'm logged,in it shows,that uh it shows it shows this little,button but isn't that pretty cool i,think it's pretty unique let's go and,add another uh html block,or section rather,what else do they got in here maybe we,can go to like maps.google,maps.google.com,and we'll uh,we'll type in,i'll just go to a previous line,embed share,map,copy html let's go and add a map to our,store,we're fancy like that hit save,and,now you'll notice that some things right,here won't always look great so if,you're trying to embed a map,we'll change this to a hundred percent,and voila we got ourselves a fancy fancy,map,i think that's pretty unique,so now you just learned how to add a,custom html section to,your,theme and then again this works on any,theme we're just using dawn,so if you really enjoyed this tutorial,make sure you smack that,subscribe button i really need to get,better at saying subscribe button and as,well as liking the video because it,helps us it motivates us it allows us to,create more content reach more people,and if you're feeling fancy go and join,our facebook group it's a community of,like-minded individuals who,help each other out teach you how to do,different things and there's some,content in there that you won't,necessarily be able to get on our,youtube channel,and anyways guys thank you so much for,watching and check the links in the,description below and we've got a lot of,a lot of upcoming things that we're,working on like apps custom themes,tools you know to help you find products,we're doing all kinds of cool things,that you know behind the scenes that we,want to release this year,it's a lot it's a lot let me tell you,that okay and um definitely look out,you're going to want to subscribe to,this channel because you will see,you want to get notified you want to,know about our upcoming products and,yeah anyways i'm rambling so,subscribe talk to you later bye

Congratulation! You bave finally finished reading how to embed code in shopify and believe you bave enougb understending how to embed code in shopify

Come on and read the rest of the article!

Browse More Content