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 powerio 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 mapsgoogle, mapsgooglecom, 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 notike 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, tok to you later. bye.

Custom CSS Shopify 2021 ( Shopify Basic Expert Tutorial )

okay, this morning we're going to tok about how to actually edit the CSS styles inside Shopify now. typically we tok about how to mount it by liquid code and how to change things in the theme settings, but the other day I realized that it might be a good idea just to show you guys how to change basic CSS inside the dashboard. so if we hop over to the screen now- I'm not going to go over how to use the Google inspector and how to actually learn CSS- I'm gonna make the assumption that you know how to modify CSS and you're gonna need to know how to where to go inside Shopify in order to make the actual change, because the dashboard is constantly changing and they're making updates to it. things can move around and they may not be where you would expect them. so if we're on our dashboard and we go to online store and then we come up with the drop down below it, we'd have themes, and if we go to themes, we're gonna get all of our current themes that are installed on our store. now Shopify allows you to install multiple themes so that you can test out different versions of your website without modifying the live version. so what I usually recommend is you take your live versions. so say, for example, we have pipeline version 4.3.2 and we duplicate it. the reason we want to do this is, in case we make any errors inside, modify the CSS. we don't want it to affect our live users. now I'm working on a demo store, so it's not that big of a deal because I'm the only person who can see it. but once you launch your store, you want to be able to go and make changes to your online store and then, once all your changes are approved and they are set properly, you can go back in and you and publish them. so after I've copied out my theme, I usually like to go and rename it and I rename it to the name of the theme and I call it development. now the way I work is: if there is a development theme that exists on the store, that's where I'm making all the changes. once I'm finished with the development team, what I will do is I will publish the development theme, I will rename the active theme to the date that I published it, as you can see down here, and then I will rename development to active. so if it ever gets unpublished, I know exactly which team needs to get published back up again to restore changes. so, now that I've created development theme, I want to go to actions and I want to go to edit code, and what this is gonna do is it's gonna take us into the theme editor. now it's gonna take us not to the theme customizer- it's important not to get the two confused. so if we have a look at customize theme, we can see the theme customizer, which is where Shopify really directs you to try and go and make changes to your site, because it has all of the built in sections that are already available for shop, by which a drag and drop, which are easy to use. but for advanced users, you want to be able to get to your coat and that is done through that Actions menu. now, once you're into the theme editor, you have a bunch of folders on the left hand side which make up your feet, and what you want to be going to is you want to be going to the assets directory. now, the assets directory basically is anything that includes CSS, JavaScript or any images that you're gonna be pulled into your website that are, and if are the theme dependent. so if we're in the assets directory, we're gonna look for the theme dot s CSS dot liquid. this is where your theme styles are going to be posted. now I caution you: you shouldn't make any changes to the theme s CSS file. if you can help it, what I would recommend is you go to the bottom of the theme file and you add: either any of your custom CSS is below the line that's placed in there to add custom CSS code, or you could do what I like to do, which is create a separate asset called custom CSS, which allows you to put all of your CSS that you're gonna create independent of the theme CSS, and the reason you want to do that is because the theme file contains a framework and you don't want to be modifying frameworks, because if you modify frameworks, it can have a knock-on effects down the line. this is something that you're probably familiar with if you work with CSS before. so what we're gonna do is we're gonna actually include a file here so that we can go and make the changes. so let's go and write the code to include a CSS file. we're gonna write import, quotation marks, number, neo, custom dot CSS and then we're to compose it. now, once we've written that, we need to actually go and create the file, so let's create the new asset on the left hand side. we're gonna create a blank file. we're gonna choose the kind of file. we're gonna create a CSS file and we're gonna call custom dot CSS. now, for the advanced users, you can code, you can create s CSS file. so if you want to use variables, you can create a liquid CSS file so it will render the CSS file and pull in your liquid variables before it pumps it out. the sake of this demo, we're gonna stik to just a CSS file so that I can show you how to make changes. we're gonna add that into our assets and you can see it's now come up here and we're going to save our theme liquid. now we're going to add a custom CSS on to our custom CSS file just to show that it's working. this way, we can confirm that we couldn't go in at any time and make changes to our custom file and it will update on the website. so what I'm gonna do is I'm gonna do body and then I'm gonna do order: four pixels solid red, and what this is going to do is, if this is connected properly, when we refresh the page we should get a solid red border that goes around the whole thing. so if i refresh our theme, we don't see anything show up. and the reason we don't see anything and show up is because we actually have to preview the theme. so we have to hit the preview button on the top because we're working in a demo theme. we need to be able to see our site. that's not live. and now you can see there's a nice red border around the whole outside of our website, which means down. anything that we modify inside the custom CSS is going to make modifications to our website. so that's basically it. I hope this was a helpful little tutorial that I show you guys how to edit CSS inside Shopify. don't forget to Like subscribe to this video. I make a new video every Thursday. if you guys have any questions or something that you would like to have the answers posted on this channel for Shopify, please leave a comment down below. I always read those comments and get back to you with whatever I can to help. you can also check out my website where I have complete blog posts and screenshots that go through all of the videos that I've created on this channel. that's it for me. hope you guys are having a good one and we'll catch you in the next one. you:

More:Facebook Ad Campaign Budget Optimization Strategy For Retargeting

How to edit a Shopify Theme - Development Best Practice

hey, das ist jan vom letzten end days video ever made for small modifications to existing team der golf. das video ist die show. you can use the developer tools to find out exactly when its place changes- energiewende, ballast video of the week and find the correct team pfeil, die pending und change. you want to make the front and the fear hätten massives. bevor die vier euro. die familie musste shopsystem. we can stop the way. ok, so beck immer development store ohne page and to give the story of the world's gesamte letzte posten: helfe client, ente, client wants to remove des little sale text lag hier bei den city-fans one: fördern ein bett displays, tailings ist erfolg, sagt mit gc you save up to 15 prozent. over the wall ist der safe und das product eine fixe. überlasst video. you might think, okay, let's go tell it on the open update and later products, including der voerder section character and let there be just for fun action template ein bisserl, bring you tube template filewich konzert auf dem elend. liquid 104, just starting out, diesmal mit computing overwhelming. so, christian beeck, sexy die unicum exchanges. indessen, exercise 100 postämter, implement changes. union vigo hat manchesters problem. ok, superstores front and inspect element. automotive news. pace award gold to the losail text right click and inspect ein display bringt. bei chrome developer tools einige hätten ziehen. die ist wie vor. basically sie hier ist old age tml auf der website nsa hannover, die elements der elemente kate heiratet und websites und web site auf das windows tool des css sulz, der applied to any element in folge sampl, remove the context no longer be beugt wurde. auch eine focus on right now the search for us cs s klasse. select the one for sale. text vollpreis, item label. which way birgit prinz point to search for, in diesem fall ein oder holz notike ist der charakter: information center, container, div, class, quadrat, preis, so dass es demnächst reference point arbeitswoche in das team fall. zuletzt hauptbecken verletzt. okay, die very first thing. the search for that is des css glas verpackt an was für anders gehabt und es ist es die only match in dem very likely, das ist der place we wanted to about that i can always the test as safe, diesem fall effekte frontend. ein verliebtes test will appear at position sowie zwei piloten von der preisfront. perfekt. so instead of writing testen wie credit suisse cs s class tailings links und judith action zuletzt verdankt dort komplettpreis. next meines the park kreischef raed know that we wanted someone to display. result in präsent, denn die weide bei der kompressor produkt dort komplettpreis. next kloster, likud-blocks, editors and is [Musik] said and the front and we can say: you say the perfect, but we can do ist inspect. das elemente can relate to factors and i can't you. next ist: klickt es mit plus aktuelle news, es den autorinnen select of our new age tmn element, denn die linke wird sonst teil des erfolgs. ampel wie warnte kaller to get my baby wants to be wild, wird small, and we won't wait to be ok, actually i don't want to. the way to the bold - dies tue wird erstmals ein kapitel selector bss fall auf das team. the way to the bottom css, the wall of worry - be implemented first. you know, they saying, it just works and have any variance. update des change the whole story bietet. ferner hat das ist gut demonstration. ok, so lassen die saytec head business class aufpreis item label sowie katherine, falls das ist, wie das new sail ist, extended enterprise information is coming von disney park press. so let's go to the city and product dort preis researchcom label, preis item label hat. ist es die only imagine dokument in document sowie can be pretty sure that is it. play stay. don't want to remove das in teil, i just want to commit suicide und ist back. check the front and the text ist perfekt. aig ist ein letztes foto video zu dem hobby on something new, something ort der des made to basic, beide hände für just starting out. think des videos, super important questions of it. blicken livecom in section topix-index video zu. if i don't want to subscribe to the channel in die nächste video, weil

More:Why I Should Join Stance!

Create Custom HTML Section in Shopify Store | Debut Theme | Add Video on Home Page

hello everyone. in this video i am going to show you that how you can add custom html section into your shopify store. so this video is specific for the people who installed debut theme. for other themes i will also upload the video, but you have to subscribe the channel so that you get the notification for other videos too. so let me show you, first of all, the benefit of this custom html section. so i have another store which is uh, for the brooklyn theme. so they have already given some custom html section. so you can see, on the left hand side we have custom html. so down below actually, i was interested to add a video which should auto play, and now that should be added, according to me. so this is possible only if you have the option to add your own code. so on the right hand side you can see that actually, when you will click on custom html, this section on the right hand side, you will get an option of adding your code. so i have added the video tag and because of which, this video is appearing over here and this is repeating over and over again and this is too beautiful as well. so i will be showing you same thing on the debut theme. that how is it possible over there? so you can see that if you will click on add section, then you will no more able to see any section of custom html, because in this theme that section is not available. so let me tell you how we can make it happen. so first of all you should go to your dashboard of the shopify store, so currently you can see that we have debut theme. then after you should click on actions, click on edit code and then after you will be getting some folders and files, so you should click on sections, then you should click on add a new section. here you should add custom dash html, then click on create section, so this section is created. now you should scroll it down and down below you will be getting getting a file of reach dash text dot liquid. click over it, copy this whole bunch of code from here and then paste everything over here. but before that you should remove this code and then paste it here. now. the third step is that you should, uh, change the name of this. so here you can see that there are multiple languages. so if you are specific for any language, then you can modify accordingly. but i am also going for the english language. here we have rich text, so i am going to change it to custom html. so same thing i am going to copy from here and i will scroll it down and down below there will be another option of adding it. so here you can see that this is preset. so here also we have en english and instead of rich text i am going to add custom html. these are the two changes, and the third change is that you should change the type of this specific section. so here we have the type, which is rich text. keep in mind that this is rich text. so i'm going to add here text area, text area. all right, so spelling is t, e, x, t, a, r, e, a. then you are done. now you should save these changes and let's refresh this page again. so once you refresh this page then then that section should be appearing over here. click on add section. then you can see that we have other options, like show more, and here you can see that we have custom html. so click over it and here we go. we have the title. if you are interested to add any title, you can also add. otherwise you can remove and that would be disappearing from here. so, for example, i'm writing here: custom video, all right, and down below we have the option to add our code. so i'm going to remove this code and going to add the video which i was just toking about for the brooklyn theme. just, you can see that we have this video on the brooklyn theme. but now i am going to add the same thing for my w thing. so what you need to write here is video src equals to double quotes, and before that you can write here controls [Music], and then you can write here: muted. then you can write here: loop, then place inline. i already made a video on how to add the video on your shopify store, so i will add the link below in the description so you should watch that video. but for the for just completing this video, i'm going to add here: place inline, plays inline. then after we have: yeah, that's it. so in the source we are going to add that specific video link. so i already uploaded a video here. let me click on settings, so down below you will be finding files and here i already uploaded a video, which is this one. i'm going to click on copy link and then after you should add here the link. so now the video appeared here and you should write here: width equals to 100. so here we go. you can see that this is pretty fine. so let me see what is missing here. so you can see that: muted plays inline autoplay. right, this autoplay attribute should be over here. so let me write here: auto play. that's it, [Music]. so now you should save these changes and this should work. so let's see the preview of this. one click on view, then let's see. you can see that this video is auto playing. uh, let's see if it is auto playing or not. uh, seven seconds are completed and now again, auto play. so that means auto play is working, fine. one last thing i wanted to share with you is that i have already created one beautiful website for free, which is keywordscom k-e-i-w-o-r-d-s dot com, and i have couple of tools, uh, for seo people and youtubers specifically. if you are a youtuber, then you can also find the tools for youtube videos, if you have. you are interested to find keyword volume checker, then you can also see here, for example, i am checking the books keyword volume. so here you can see that there is a beautiful way to find all the things and also find the related keywords and stuff, and if you are a youtuber, then you can generate tags, description, extract tags from others videos, create the thumbnail, hashtags, title, general edit and all the things. so share this video, share this specific website to your friends and the people who are connected with you, because this is free of cost, so you can use it. i hope that you enjoyed the video. if you are thinking this video was useful for you, then please subscribe the channel and also like this video, and also tell me below in the comment section that what the other thing that you are missing and because of which i could create the video for your help. alright, so thank you so much once again. see you in the next video.

[Custom HTML in Shopify] How To Create Custom Section For Raw HTML

welcome to my youtube channel with another shopify tutorial where we will be learning how to add a new custom section with the ability to add raw html. so all of the free themes in shopify do not have a section where we can add raw html. today we will learn how we can copy a current, current, existing section and create a new section using the same code and changing the code to make it usable for raw html. so we'll be we'll be able to add raw html and shopify. okay, let's go to the backend. we'll navigate to the back end by going to slash admin. we'll go to online store. by the way, this is one of my clients website. we do maintain this for this and enhance the layout. okay, we will go to customize. debut is a free theme of shopify. in this theme, we do not have the ability to add raw html. so, for example, if we click on add section, we do not see any section where we can add raw html. so what we're gonna do, we will go to the code of this theme and we will create a new section by which we can add raw html. okay, let's go back to the admin. click on online store, edit code of the theme. here we can see all of the chords for the theme and these are all the sections which we were seeing on the customize section. now we will create a new section. let's call it raw html. here we have our new section ready. we'll copy the code from rich text section. here's the code for rich text section. so we will copy it, paste it on our newly created section, raw html- and rename it to call grow html. let's rename only english version for now. uh, rename it here. so we will be renaming it on two lines. one is line number 23.. and the other is line number 256. after renaming the section, we will go to line number 111- here's the line number- and replace the rich text with text area. hit save. and now let's go to our customize to see if it's working. okay, i'm open the customize section and now i'm gonna click on add section. that's the latest section which we created. click on that, click add, and there we go. as you can see, we can add. we can remove the heading if we don't need that, and we can replace this text with our own custom html. so, for example, if we need to add another div h1 paragraph element, try adding h3. as you can see now we can easily add raw html to our through our section. that's it for the tutorial. i hope you guys like this tutorial. please let me know in the comments below if you want me to create more shopify tutorial for you. and do not forget to click the subscribe and hit the bell icon so you'll be notified whenever i create new videos. have a great day.

How to view and edit the shopify store theme code - liquid files

this video explains how you can edit the theme code of your shopify store. so for that, uh, open the store, like log in with admin credentials and then you will see this themes button. just click on the themes button on the left hand side in the sales channel section and then click on actions, right in front of live theme. so this is the live theme and then click on actions, then click on edit code. so basically, when you click on edit code it will show all the files of your store and then you can edit that files if you are expert in that. otherwise i will not recommend for you to edit this. so, themesliquid- this is the main file or the page of your store. this is the home page we can call it, and they use the liquid templating engine. so you can see here there is an html. so liquid file is basically in html, uh embedded with uh. this stacks. so you can see here double curly bracket. so basically what we are telling here is: okay, this is the liquid variable, so whatever is the value of that variable will be displayed. so this curly bracket should be replaced with this: the value of this variable. then there is another syntax. here you can see curly bracket, then percentage sign. so this is used for the logic. like if you want to put if condition else condition, then if you want to do some loops, then you can use that partikular syntax. so basically in this example what it is doing is checking if settings start favicon is not equal to blank, then this line will be executed, added into the final html output. so basically your store is actually contains a layout. for example, themeliquid is one layout and in that layout, uh, there can be multiple templates, like 404 dot liquid. like if some customer is accessing the resource that is not available, then 404 will be displayed, that page will be displayed. then this is the template for the block, it's the template for the artikle. then, uh, there is, there are different templates, like if you want to set the passwords, then for the product there is a different templates, and there are lots of other tablets like that. and the sections, again they are liquid files. so different sections of your website you can see here, like if you want to edit the header, just go here in the header dot liquid, and then you can see how it is printing that header and you can update that if you want over there. and there is snippet that is reusable code. then there is a assets like your js files, javascript files, css files, etc. and there is a locales and configuration settings underscore datajson. so all these options are available if you are tik savvy, if you know the tiknology, like html, css, javascript and especially the liquid template templating engine of shopify, which is like not a standard templating engine. but they have customized that liquid engine, they have created that liquid engine on their own. so if you are aware about these concepts and you are expert in that, then only i will recommend that you edit that, otherwise your site may break. so basically, that's how you can view and edit the code for your theme in shopify store. if you want to hire me for your shopify store, then let me know the comments. thanks for watching this video.