going on everyone it's Jamie here from,Shopify master class and today we'll be,looking at how you can customize your,theme code for your Shopify store I'm,going to show you here how you can,access your theme code and how you can,make edits also how to create a,duplicate so if you make any errors you,can quickly revert it back to a working,version of your theme so make sure you,stay to the end of the video here before,I dive into it I just want to thank our,sponsor profit calc the one click profit,calculator app available on the Shopify,app store it's going to allow you to,skip your spreadsheets and get back to,Growing your store with real-time,calculations it comes with a 15 day free,trial and there's a link in the,description below to access that trial,there I'm also going to show a quick,video detailing their full feature set,are you a Shopify business owner who,spends hours doing your accounting have,messy spreadsheets kept you from growing,your business discover profit cap the,affordable and easy to set up Shopify,app that crunches your numbers in just,one click it automatically syncs with,all your accounts and expenses to,calculate your profit displaying,everything in an easy to read dashboard,so you understand your business in real,time start for free on the Shopify app,store today so now let's dive into how,you can customize your theme code I'm,going to start by finding out first how,to access that you and your Shopify,homepage here you want to head to the,left hand side click on online store,once that loads that's going to lead you,to the theme section currently this test,store is running the debate theme and so,that's we're going to make the edits,today and so before you dive into,editing any code I always recommend that,you create a duplicate of your current,Shopify theme this way if you make any,errors or you screw anything up along,the way you can quickly revert back to,this version so your customers aren't,seeing any store that is breaking you,want to make sure it's alive at all,times and working as you're probably,gonna be paying for traffic to come to,your site so you don't want that to be,wasted ad spend so how you do that is,under this section here current theme,next to the customize button there's,going to be three dots you want to click,those three dots and hit duplicate I'm,going to duplicate everything about that,theme it's going to create a copy of it,so it says copy of debate or debut and,you can click the three dots I'm going,to rename this I'm just going to call,the copy here you could insert the date,here so it's going to give you a,chronological order of the different,theme changes you made and so once,you've done that you can feel free to,edit the code and test how it's going to,work so how to edit the code you want to,click on those three dots there again,then go down to edit code that's going,to bring up the code editor for your,Shopify theme as it says here you can,edit your themes files they're all gonna,be dot liq
Let's move on to the first section of A.Page Code theme shopify
How to edit a Shopify Theme - Development Best Practice
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,notice 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,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
After seeing the first section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next second section about A.Page Code theme shopify
How To Make Custom Shopify Layout Templates, Sections, and Themes
How To Make Custom Shopify Layout Templates, Sections, and Themes
hi everyone Scott here with the five day,startup today I'm gonna do a quick video,on how to create custom themes in,Shopify so we're working with debut and,basically what this means is if you want,to make a page so we'll go in here I,gotta float the video alright so if you,wanna make a custom page so I'm just an,opening a new tab so normally you would,go create new page over here so I'll,just do this test so then you'd create,test page and then hi,and then theme is gonna be the default,which is what they bu gives you or,Shopify gives you and this trick will,work for all the themes or at least all,the custom or standard free Shopify,themes so I'll go ahead and save that so,then the problem with this is you all,havin a user interface you just have,this to control and edit the page and,then you can do code here but when you,go to view it it's very basic it's just,gonna be HTML and it's not very user,friendly so if we go in here that's the,test page so now we're going to do is,we're going to go into our themes,customize so this is gonna bring you,into it's kind of be your user interface,slide and basically for your homepage,you have all of these really easy click,and drop kind of user interface for,Shopify but none of the other pages had,that and what we're trying to do is get,the other pages to have a custom theme,like that where you can edit them very,easily by basically clicking dragging,and dropping photos in short bits of,HTML in different sections things like,that well that's loading we can view so,basically this is what I'm talking about,this is one I'm gonna use for example,but this section basically wouldn't be,here so you wouldn't have this or this,and so that's what we're trying to add,in is your different sections basically,that's called a page theme so you can go,here there we go so you can see that the,homepage has a whole bunch of options,here and that's by default on any of,those themes I didn't give you a whole,bunch of really cool features but that's,not anywhere else and that's just,basically because the coding is a little,bit complicated so if we go to our test,page I'll show you,so you can see there's nothing here and,the whole goal is to actually get,something into there so what we're gonna,do is you can couple ways get there I'm,gonna go here and then edit code so guys,this doesn't actually take a lot of,coding it's all copy and paste you just,need to know where to edit things it's,pretty simple there's I think one line,of code that I'm going to give you so,mine has a bunch of themes already so,what I'm gonna go ahead and do is I'm,gonna look at one that I already created,and you guys obviously don't have this,but I'll put the line of code in there,for you I in the description you'll see,this line but it's basically you're just,copying pasting this so look down for,that button so then this is your actual,theme so under templates we're just,doing new and then you wanna go down to,page because we're doing it pages you,could do it
After seeing the second section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next third section about A.Page Code theme shopify
Custom Shopify Pages without Apps — Archetype Themes
Custom Shopify Pages without Apps — Archetype Themes
creating custom page templates in the,latest version of our themes has never,been easier the question does come up,quite a bit how do i create unique,content for different pages,in this example i'm going to show you,how to create your own custom layouts,that can then be used to show unique,content on different pages,if we open up the theme editor,you'll see that,all of our themes ship with pre-made,templates to help get you started these,are all included with the expanse,impulse,motion and streamline themes the full,width template will give you a wider,full width page layout to start with,the faq template comes pre-configured,with sections and blocks to build out,your frequently asked questions page,the contact template makes it easy for,visitors to contact you through,pre-built product form,and the about us template is great for,letting visitors know more details about,you and your story,in today's example i have two different,pages that i want to show unique,sections and content on so this will,require us to create two unique page,templates,so the way we do that,is we come and select create template,and we'll call this first one,page one,and we're going to base this template on,the default page template,we can actually use any of the,pre-existing but we'll use default,and we'll say create template,and that really is all there is to it,we've just created the page and so now,what's left to do is just to add in the,sections and blocks and the content that,we want to build out as page,so,you'll notice here that i've got page,disabled,oops,so if i had,content on the page that i wanted to,display as well,i could do it there,for this,i actually want to hide it,and we're going to add in,about a hero section,let's go grab an image,we'll add in,an image with text section,so,and then lastly,this would be a great opportunity,to showcase some product,so we'll add a featured collection,section,say about there,perfect so now we're going to jump out,of the theme editor just a moment,and we're going to come to pages,and we're going to assign the page,template that we just created,to this new page,and so if we view this page,we've got our hero,section our image with text,then our feed collection,perfect,so now let's jump back in the theme,editor and we'll do this one more time,so we'll come back to pages,create template,and we'll call this,page two we're going to stick with the,default page as the,the basis,and again i'm going to create a page,where i hide the page content,we're going to do stick with just,sections from it,i'm going to add in another hero,we'll just use one block so i'm going to,remove this block,and we're going to adjust this heuristic,height,there we go so i can get everybody in,there,and then we'll add one more image with,text,let's change it up though let's flip it,around oops,we'll add in two on this one,and we'll save this,unlike the other one we'll add in a,featured collection section,so we can show some products,perfect so now let's jump
After seeing the third section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next fourth section about A.Page Code theme shopify
Add a page of collection Shopify Dawn Theme Tutorial in 5 Minutes 2021
Add a page of collection Shopify Dawn Theme Tutorial in 5 Minutes 2021
this is kevin king with pinehurst,websites and today i'm going to show you,very quickly how to set up a page of,collections uh using the dawn theme on,shopify,so let me just show you an example of,what it's going to be when you normally,have a collection it goes to all the,items in the collection like this,but there are times when you want to,make sub collections for instance so,some people want to shop by collection,for instance and it would look like this,so instead of going to,the items in a collection you're going,to multiple collections designer,bracelets designer earrings and designer,necklaces then you can click into that,and you can see all the items in the,collection so,this is very easy to do in the dawn,theme and i'm going to go through and,show you how to do it very quickly so,i'm going to show up,set up a navigation menu and then i'm,going to set up a page and,we're going to go through and show you,how to do it in the theme i'm using the,dawn theme right here,i haven't made it the published theme,but you can make it the published theme,and you can work on it by clicking,customize here if you make it the,publish theme so let's go ahead and go,into the page and do this very quickly,so we're going to create a new page and,we're going to call it,it can be anything that you want but,this one i'm just going to call shop by,collection,and that's all you have to do is give it,a name whatever you want it to be,it can be anything and you can have,content in here if you want but it's not,necessary,okay so we've gone ahead and created a,page now let's go to navigation menu,and i'm going to go off the main menu,navigation and this is your main menu,navigation right here,if you want to be in a sub collection,you can put it underneath one of these,menus i'm going to just create a new,a new navigation menu right here so this,is my,main menu navigation i just collapsed,designer jewelry and i'm going to add a,new menu and i'm just going to call it,shop by collection,and it can be anything you want it,doesn't have to be,matching what you're connecting it to,that's all you need to do then you just,simply link it to pages,and you choose the new page that you,created so i'm calling it shop by,collection,that's connecting to my page that i just,created a minute ago and then you click,the green button on the bottom right to,save menu,last thing we do,so from navigation i'm going to go over,to themes,and then i'm going to go to customize on,the dawn theme,and then i'm going to go to shop by,collection,now we see this is just a blank page,so you can add different sections here,the one you want to add is collection,list and you can actually jazz it up,with other things that you put on here,but you just put your collections in and,it's going to put three in by default,but you can add more you see on the left,side so,once you click onto the left hand side,you can select the collections that you,want to add,so we're just going to go ahead and put,three different
After seeing the fourth section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next fifth section about A.Page Code theme shopify
[2022 FREE] Create A Page Of Collections Shopify Tutorial
[2022 FREE] Create A Page Of Collections Shopify Tutorial
bonjour bonjour chaque famille comme,expert dans un discours going to teach,you are you can call john collection,collection père et fille du slash,collection tiède et aussi aux,collectionneurs,absolue collection action archos date,hugo de réseau et news corp aux dames et,yugo et ses six de nemov de films pitch,and putt de l est,donnez one you be there was the night de,tempo team 2min tim donaghy terting de,simples team and events in brief cover,neuf films x 2 go to pizza kitchen pays,collection collection massive d,hugo change de template de santé de,johnny cobayes même si gauck is not unix,- we were so sweet home 3d sur google,news a juste hâte d'y coller pire,so many of you go tout comme john hope,they say you cry collection de youtube,beach collection géographie je lisais,collection we have et quicksign nous,sommes des collections,best of three days and then i want you,and i know you want to be for example,the collection of this i am not a dit un,collègue un cv numérique mathieu battu,deux pays tous deux par louis stevenson,irigo willow tu dois à ma collection,liste d'amis oui qlikview bridge hindery,gonâve youtube collection collection est,aussi absent à la ville
After seeing the fifth section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next sixth section about A.Page Code theme shopify
Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages
Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages
all right what's up guys i did a poll,recently on my youtube channel where i,asked what my next video topic should be,and the most voted for topic was shopify,2.0 so today i want to talk about page,templates which is a new feature of,shopify 2.0 that many people aren't,using yet it's a really underrated,feature and it can really be quite,powerful one of the most common,questions that i get on my channel when,i talk about adding a specific feature,to a product page,is how can i add this to one product,but not to another product right how can,i add a feature to one product page,without affecting the rest of the,products on my store and a good example,of this is this tutorial where i showed,you how to add a gift message field to a,product so obviously this is for,products that have some kind of note,attached to them or maybe they have an,engraving or maybe there's something,written on the shirt whatever it's a,customizable product right and maybe not,all your products are like this maybe,not all your products are customizable,so you want to add this on one product,but not on another type of product and,that's really easy to do in shopify 2.0,you just have to use page templates so,i'm going to show you how to do that,today another good use of page templates,is to make a completely different design,for different product pages so you may,have some products which are like your,flagship products your main products,and you have a lot more to say about,them right you have you want to talk,about their features a lot more so the,example that i've got here is all birds,you know they've got their merino wool,or or tree actually tree fabric sneakers,and they have this product page right,the top of it is a typical shopify,product page but then they've got these,extra features that they want to talk,about below and we can do this now,thanks to shopify 2.0 and sections,everywhere you know how previously you,only had sections on the home page now,you have them on every page so you can,add sections,underneath your main product section on,your product page but maybe you don't,need that for all products so here,they've got their beanie and you know,they just don't have that much to say,about the beanie because the beanie is,like not their main thing their main,thing is sneakers so they have these two,different product page templates one for,the shoes and probably the other one is,just the default product template for,regular products and you know this,doesn't have to be limited to just,product pages either so here they have a,collection page which is like your,typical shopify collection page right,you have a product grid and you have,your filters on the left here but they,also have this other collection page,under new arrivals when you click on,warm weather,they have collection pages with this,nice image banner and look this is for,warm weather and it's really warm image,it really gives the mood and they have,this kind of image banner for every type,of collection that
After seeing the sixth section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next seventh section about A.Page Code theme shopify
Create Page of Collections Dawn Theme Shopify no coding step by step 2021
Create Page of Collections Dawn Theme Shopify no coding step by step 2021
hello this is kevin with pinehurst,websites and today i'm going to show you,how to create a page of collections,using the dawn theme in shopify,so a page of collections i've got an,example here here's a page where you,have a drop down and i've connected this,navigation menu,to the page,and instead of showing items in a,collection it shows the actual,collections and then you can click into,that collection to see all of the items,that are available in the collection so,that's the difference between connecting,a navigation menu to a collection like,designer bracelets or to connecting,designer necklaces and then you see all,the items in it or you can connect this,to this is connected to a page,and it's showing,a collection list so,it's very easy to do,using the dawn theme there's no coding,required like there may have been in the,past to do something like this so let's,go ahead and just take a quick look at,what we set up in the theme to,accomplish this so first you want to add,the dawn theme if you don't have it,it is a free theme from shopify so you,can go to free themes that will be in,the bottom of your themes there in the,shopify admin and you'll notice this,says os2 that's online store 2.0,those are the new faster designed for,mobile themes from shopify this one is,free there's other theme developers that,are developing 2.0 themes as well,so let's go ahead uh you can just click,on that and then you can add that theme,so,now you can see that we have several,themes here we're just going to use the,preview i don't actually have it as the,published theme on this store,but let's go ahead and take a look at,what else we need to do so first we need,to add a page,when you add a page,i'm just going to show you how you would,do it i've created a page called,designer jewelry and you're going to see,that i didn't put any content except,view,i misspelled this view the designer,designer jewelry,by collection so let's go ahead and just,save that,so it's just all i have is a title you,don't have to have any content in here,if you want an image or other things,like that you can add text or images to,your description but it's not necessary,and i'm using the default page template,so if you want to add a page,just,create,go to add a page and then give your page,a title so in whatever you want to call,it if it was,necklace collections or whatever it is,that you want to connect to and then,i'll show you where you would connect it,so we've already created a page so i'm,just going to leave this and cancel that,and you can see the page we created was,called designer jewelry,so let's go ahead and look at where we,connected this so we created a,navigation menu under home this is the,main,menu right here,and that's our navigation menu at the,top of the page uh,it starts right here and then any sub,menus that we have,you'll see how we did those as well,so i'm going to go ahead and just go,into this is our drop down menu for,designer jewelry that we created on the,top and i
After seeing the seventh section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next eighth section about A.Page Code theme shopify
Create A page of Collections Shopify Tutorial 2021
Create A page of Collections Shopify Tutorial 2021
this is kevin king with pinehearst,websites and what I'm going to do is,show you how to create a custom page of,collections and we're going to create a,custom template in order to do that so,you can put any collections on the page,that you want and let me just show you,an example of how it works so on the,home page here and this will be on every,page this menu right here it does have a,drop-down where you can go to individual,collections but normally what you might,have is you might have the jewelry,collection here and this would show all,the items in the jewelry collection so I,basically like when I click on the,necklace collection it shows all the,items in the necklace collection but,what I want to do is when I click on,jewelry I want to see the collections,that are in jewelry so when you click on,this what we're going to do is we're,going to see the collections necklace,collection the bracelet collection and,the pinecone collection so basically you,can customize the collections that show,up on your page so that way when you go,to the page then you can go into,necklaces for instance so that's how it,works and let's go ahead and show you,how to set it up so before you begin,it's always a good idea to make a backup,of your theme and to do that just click,on the action button and click on,duplicate and then you're gonna see that,it's creating a duplicate of the theme,so if I make some error or delete the,wrong thing I can always bring my theme,back to the way it was today,I also like to rename the theme so that,I remember when I was working on it,because you may have multiple backups so,if I click on rename it's gonna allow me,to go in and just change the name of,this so I'm just gonna call this backup,and I like to put whatever the date is,and click rename and you're done and now,you have a backup that you can go back,to if you make an error so what you want,to do is click the action button and you,want to go down to the Edit code so once,you get through the Edit code you want,to make sure that you don't have the,page template that we're gonna create,some premium themes we'll have the page,template that were going to create and,it's called page dot list dot,collections now we have a list stock,collections but we don't have a page dot,list dot collection so that's what the,name is that we're going to use and all,we need to do is go to the top and click,add a new template we're going to choose,the page template in the drop down so,now I'll just change this to list,- collections and then create click,create template you'll highlight what's,in the template and you're going to,replace it with this code I'm gonna put,this code in a link to this code in the,description of the video and it will,also be on my blog at pinehearst,websites comm and I'll put a link to,that as well so you're just going to,want to paste the code that I'm going to,give you and then save right here in the,upper right hand corner ok so now we've,created our template so the next th
After seeing the eighth section, I believe you have a general understanding of A.Page Code theme shopify
Continue the next ninth section about A.Page Code theme shopify
How to Create and Edit Shopify Pages on Your Shopify Store
How to Create and Edit Shopify Pages on Your Shopify Store
hello everyone,today we're going to be looking at,adding pages to your shopify store,and editing pages to suit your liking,so from your shopify admin head on over,to online store in the left-hand,navigation,and then from there click on the pages,tab,next simply click on the add page button,down at the bottom,or at the upper top right hand corner,the first thing you're going to do is,add a title for your page,so let's say we want to create a page,that's announcing an upcoming sale,so once you've written your title here,you can go ahead into the content box,and this is where you will be adding,things like text,links images and so on,so now that i've added this very little,bit of text i'll show you how to,update um and customize some of this,text so,just like you would a word document,let's say we wanted to,bold something just highlight it,and from there click on the bold you can,also do things like,you know italicize the text as well,which again just like a word document,you can use your command or control,i key,so you can also add links to the text so,for example if you wanted to link,social media you would highlight it and,then click on the,hyperlink icon here,and then add your link,so i'm just going to use google as an,example,open this link in so this drop-down,currently is set so that when they click,on a link it'll just open in the same,page,but in most cases if anyone's ever going,to leave your website,you want it to open up in a new window,so that it's easy enough for them just,to go back to the other tab,and still engage with your website,and then i'm just going to click on,insert link,so at the moment i can't actually,preview the page and i would like to do,that,so in order to preview hit save,and then shopify will give you the,option to preview it so now i just hit,save,and the page is live which is fine with,me but if you wanted to hide it,you could select the hidden option here,but i'm going to go ahead and leave it,as visible,so now if we want to view the page,simply click,obviously the view page button,and then this way we can kind of see,what it's starting to look like,obviously incredibly boring page we,would definitely want to add more to it,and another thing that you can do is,every theme has a different set of,page templates so this is a free theme,it's incredibly limited,and right now we only have a page and a,page contact so if i change the template,suffix to,page.contact and then i save,it's going to look like a contact page,and because this is just an announcement,page that we're going to highlight a few,sales,we really don't need the contact form,so i'm going to go back and change that,back to page now if you have a premium,template that you've paid for,likely you will have more options than,that you'll have things like a wide,layout and other,different options that you can play with,so i'm just going to leave it on,page and save it again so the next thing,that we're going to do is add an image,to the page,so click on the a
Congratulation! You bave finally finished reading A.Page Code theme shopify and believe you bave enougb understending A.Page Code theme shopify
No difficulty
