Theme Development: New Tools, Better Liquid (Shopify Unite 2017)
well good afternoon everyone my name is,nathan ferguson i'm the front-end of,the themes team and Shopify I'm joined,today by Dave,a-kor new senior developer lead of the,online store channel,all right today everyone's have a theme,development more specifically we're,going to be talking about some new tools,we've launched for the editor and some,that are upcoming and we're gonna be,talking about some improvements of it,made in liquid that'll make customizing,themes easier as well take a moment to,remind everyone you can start asking,your questions now through the app using,the QA Code YYZ to be able to submit,those throughout the talk and at the end,we'll take a I pad and answer questions,you've submitted so last year you,Nightwind,announced a new way of building,storefronts using section and by October,of that year we launched a new editor as,well as a new starter theme called debut,that came with a wide range of section,types and in just four months February,of this year every theme in the theme,store was using sections and today there,are 45 unique themes powered by section,in terms of merchants adoption as Satish,mentioned this morning the vast majority,of customizations being done in the,editor today are being done on section,theme and partners have been using,sections to give their clients more,control over the site's content and its,layout this is a clean theme this is,expressed expression theme by clean,themes and here they have a static,sidebar where they let their merchants,choose customize their own sidebar from,a variety of block types and as well of,course reorder the sections the blocks,as they see fit,another example so the JavaScript API,makes customizing themes for partners,and merchants a better experience this,is a trademark screen by maestro who is,in the audience today I see so they have,their own custom script so it's able to,hook into editor events which make sure,that the appropriate content is always,brought into focus so the new editor in,sections have made customizing themes a,much better experience for partners and,merchants but this just isn't for themes,in the theme store shelf I plus,merchants and and shop buy no shelf I,plus partners and Java partners have,been using sections and creative ways,for the client since its release and I'd,like to give an example today from CTMS,a Shopify Plus partner,so this merger is called kalo it's based,here in California and they have a page,as promoting a product called stackable,let you design your own silicone ring,CTMS is using a static section to give,their merchants the control of what,feature combination is shown on that,template and they're using another,static section to let their merchants,control what related collections and,related products get shown alongside it,so sections and the JavaScript API,represent vast improvements and,customizing themes we've continued to,ship some improvements they'll make,building themes for this new editor a,much better experience to start w
Let's move on to the first section of TCB 2017 theme shopify
Out of the Sandbox - Turbo 2.0 Home Page Setup with Shopify Sections
Out of the Sandbox - Turbo 2.0 Home Page Setup with Shopify Sections
hello and welcome to the out of the,sandbox video guide to the turbo 2.0,Shopify theme home page setup now using,the Shopify sections interface today,we're going to take a look at how you,can go from a fresh install of the turbo,2.0 theme and use the customized theme,settings now on this Shopify sections,interface to create a home page that,looks just like this sole demo so we're,going to be using this sequence of,sections here is our model to create a,home page that looks just like this one,for you won't stop there we will also,take a look at the few sections that are,not included in this demo but that you,have access to when it comes to,customizing your own home page but,Before we jump into the settings let's,go over to my Shopify admin panel here,and see what we're already working with,on the Shopify admin panel so if I go,here into products you will see I,already have a listing of products these,products have product images some of,them have variants descriptions tags all,of the various attributes that you would,expect to see with a product,additionally these products have been,categorized into a few collections a,couple of these collections we'll be,using to display products on the home,page,besides the products and collections if,we go here to online store you'll see,that we also have some blog posts so,these blog posts have titles and they,have content may have excerpts as well,and I'll show you why it's important for,your blog post to have an excerpt when,it comes to creating your homepage also,a featured image over here for these,blog posts,besides blog posts there's also a few,pages so these pages are created on the,Shopify platform as well and besides,that we have our navigation so,everything I just showed you here,products collections blog posts pages,and navigation those are all parts of,the Shopify platform so if you needed,any assistance in configuring these,elements then check out the Shopify,for all the help that you'll need in,that area but today this video is going,to show you how will now use these,things to configure the theme to create,your home page so we will jump back in,to these various areas here to see how,they apply to the home page but now,let's jump over here to this themes,panel,these are the themes that are on my,Shopify admin panel right now but I'm,going to show you how you can install,the theme from a fresh version here to,install the theme you'll just head up,here to upload theme choose a file and,you can choose the zip file that you,received in the email download link from,when you purchase the team throughout of,the sandbox we'll go ahead and upload,that and here it is uploading to my,themes panel in an unpublished State but,we're going to go ahead and publish it,right away so that all of my changes,occur live and I can take a look and,preview these changes so I'm going to,take a look here view my online store,using this link and this is the default,appearance of the turbo 2.0 theme so,there's a few unconfig
After seeing the first section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next second section about TCB 2017 theme shopify
Customize your Shopify Email Notifications
Customize your Shopify Email Notifications
hi I'm Alma kin from curious themes web,development studio in Nashville,Tennessee and in this video tutorial I'm,going to show you how to customize your,order notifications in the Shopify,back-end,so I'm here under the notifications area,which you can get to by just going to,settings in this lower left-hand corner,and then choosing from there,notifications so as you can see here,there's a lot of different notifications,that you have both under order as well,as for shipping as well as of course the,customer in terms of inviting them,letting them create their password so,there's a lot of different options here,so they all have the default template as,well as the the design and the wording,that all of the Shopify notifications,have however if you want to have a,little bit more customized branding this,is my favorite way to do it so it's,actually using an app called klaviyo,and I think I'm saying that right but if,you go to their website it is que la vie,I y ou comm which you can see here and,I'll also put in a link in the,description below but you can sign up,for a free trial so they do have paid,email marketing options which would,actually have them be your email,marketing provider however and they you,know really connect in with your Shopify,store and do a lot of data stuff however,I don't really say that you have to do,that you can definitely use the free,trial here and customize your,notifications first and pull that into,Shopify without having to use one of,their paid plans so what you'll do first,is go into their website and sign up for,the free trial here and once you do that,once you log in I'm gonna go into my,dashboard area of klaviyo now or however,you say their name but you're going to,go to this left-hand menu called email,templates now I have a few already in,here as you can tell I really do like,using this software but what you're,going to do is you're going to click in,the top right hand corner to create,template now,the great thing about this is that it,connects directly with Shopify so you,can see here they have their basic,templates to let you stylize things but,they already have Shopify templates set,up so they have ones already set up for,order confirmation shipping confirmation,shipping update and order cancel so we,are going to just click on the order,confirmation and I'm just going to name,this test you can of course name it,whatever you want to and I'm gonna hit,create template so now it gives us this,overall design that you can see here of,you know setting up to put in an image,it's Auto populating the fields that are,coming in so anything that you see with,this dotted box around it like how you,see here the shipping name the date the,shipping address billing address all of,that is being Auto populated by Shopify,again this is for an order confirmation,so it'll pull in all of their order,information as well as you can see all,of the order details here and all of it,down here as well so you don't have to,really worry about a
After seeing the second section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next third section about TCB 2017 theme shopify
Shopify CLI for Theme Development (How to use)
Shopify CLI for Theme Development (How to use)
hey everyone in this video we're going,to talk about shopify cli for themes,shopify cli stands for shopify command,line interface and is the latest,alternative to shopify theme kit,previously shopify cli was a tool that,helped users create and deploy shopify,apps but since the online store 2.0,announcements in june 2021 shopify have,extended the shopify cli to provide new,functions for theme development,including the ability to serve themes,locally,so in this video let's talk about how,the shopify cli works and how to include,it into your theme development workflow,before we get started talking about how,to use the shopify cli for theme,development i want to provide some,context here and talk about where this,tool fits in compared to the other,previous tools for developing shopify,themes,when i first started shopify theme,development back in 2019 there were two,tools available slate and theme kit,i believe it was theme kit that came,first but at shopify unite 2017 shopify,announced something called slate a new,build tool for shopify themes intended,to provide a more developer friendly,scaffold for building themes,slate did have some good points such as,the ability to split up scss into,multiple modular files and update css,changes locally but over time shopify,decided not to maintain the project and,eventually announced that they were,officially ending support for slate in,january 2020. therefore slate is not a,tool i recommend to anyone anymore in my,opinion the only reason to use slate is,if you have to i.e you have an existing,slate project that you're unable to or,unwilling to migrate that left us with,themekit a simple tool for uploading and,downloading theme files from your,shopify store making it possible to work,on themes locally,and now the latest option which is to,use the shopify cli for theme,development,chances are if you're watching this,video close to the release date you,might be using shopify themekit as,mentioned shopify themekit is a simple,tool for uploading and downloading theme,code from themes already hosted on your,shopify store we can do a one-time,download from themekit or a one-time,upload from themekit or we can run the,command theme watch and allow themekit,to detect and upload changes to the,theme as it exists on the shopify store,as soon as they happen for a full,tutorial on shopify themekit check out,the lesson in my skillshare class,shopify theme development how to build,and customize your own online store the,shopify cli by comparison is a bit,different with shopify cli you first,connect the tool to your online store by,running shopify login and from that,point you can begin to serve the theme,code you have on your computer locally,running shopify theme serve the cli will,take your theme code and generate a,development theme this development theme,will come with a theme id and a theme,editor but it won't exist in your,shopify store's theme library and it,will disappear after you run shopify,logout,running these s
After seeing the third section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next fourth section about TCB 2017 theme shopify
How to Pick the Right Theme for your Shopify Store
How to Pick the Right Theme for your Shopify Store
hi my name is Elle McCann from curious,themes web development studio in,Nashville Tennessee and in this video,tutorial I'm gonna walk you through how,to find the best theme for your Shopify,store so right now I am in the backend,of Shopify so this is what you'll see,whenever you first log in and I'm gonna,click online store in the left hand menu,and then you can see now we're under the,themes area so Debut is a free theme,with Shopify that's included whenever,you set up your Shopify store and,actually in the next video that I'm,recording I'll go through how to,customize that however this one we're,gonna go through setting up a free theme,so you can preview what it looks like,now by hitting this view your store so,we haven't customized anything yet but,you can see the kind of general overall,look and feel of it there's different,areas for products and you can add even,more areas like Instagram and a blog,things like that however if you want it,to be a little bit more stylized the,free theme that is included with Shopify,is a little bit more minimalistic so if,you wanted to do a more designed theme,you can go in to the Shopify theme store,so to do that I'm just gonna go to,Shopify calm which I have set up already,here and if you go under resources you,can go to the theme storm so the theme,store are pre-designed themes that are a,little bit more stylized that you can,still customize with your own branding,and colors and you can sort through,there's so many different options of,them so we'll go up here and you can see,under collections there's different,collections of themes that you can do,also they're done by industry but to see,the free themes that are there you can,go under all themes and under this price,field you'll be able to select free now,a lot of the themes in here that are,really nice and stylized,are paid and they really range in the,the pricing of it but you can now see,all of the different free themes that,are available and you can further limit,how many,things you're searching for in terms of,looking for a free theme that also has,the capability it looks really good with,just a single product so now you've got,that set up so let's say you want to add,one of these themes to your store you,will just select the theme you want,that's the debut one we go back we,already have that one so I'll do this,narrative and you can see different,stylized versions of it here and then,you can just say start with this theme,you would log into your store,okay and then now it has it set up to,where you can either publish it,automatically or install it as an,unpublished theme so if you already have,a store that's live you want to make,sure that you pub install it as an,unpublished theme this way you can go in,and customize it before you actually,make it live so there's no kind of,downtime for your current site well if,you however if you haven't launched yet,you can just hit publish as my store's,theme so I'm gonna say install as an,unpublished theme and t
After seeing the fourth section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next fifth section about TCB 2017 theme shopify
How To Customize your Shopify Store Design
How To Customize your Shopify Store Design
hi my name is Elle McCann from curious,themes web development studio in,Nashville Tennessee and in this video,tutorial I'm gonna walk you through how,to customize your theme with Shopify so,right now I'm in the Shopify back-end,area and whenever I hit the homepage,area I hit online store and then that,comes up with themes so I'm in the,themes area now and you can see right,now I have the free Shopify theme which,is debut in the previous video I went,through how to add in other themes,either free or paid and I'll put a link,below this video back to that video so,that you can kind of make sure that you,first found a theme that you want and I,also have in that video a free checklist,that'll let you go through and make sure,before you start adding themes to your,store that you found one that's going to,work really well for you and that way we,can move forward from there with,customizing it so you don't have to,repeat this process many times so in,this video we're going to go through,customizing the theme in the backend of,Shopify and I'm just gonna customize,this debut theme so the same kind of,settings are going to be different or,gonna be the same with no matter what,Shopify theme that you have some of the,functionality is going to be different,or stylizing however the process of,going about it it's going to be the same,so to edit this theme I'm just going to,hit customize and then this is the theme,customized area so you'll see over here,this will be the same for every theme,you'll have a sections area which lets,you control the different areas of the,site and then you have a general,settings area and this is more of your,general site wide edit like colors,typography actually putting in your,social media links so you can click into,each of these individual ones so let's,click in the social media so for example,you would put in your social media links,of where you want that to be published,and that'll show up a social media icon,once you put that in there so this will,most likely I think show up at the,bottom,site so now that we put that in you can,see this Instagram icon so if we put in,Pinterest now you can see it live update,on the right hand side so now the,Pinterest icons showing up so as you go,in and start filling out this area it'll,anything under the general settings will,edit a site-wide so let's go back here,under general settings so again like any,typography that you choose or colors,will be site wide edits so that way you,don't have to make it for each,individual page so let's go back to the,main sections area and we'll start out,with the header area which is up here so,we'll click header and this will be site,wide as well so for the logo we're going,to upload our image of the logo so I'm,just gonna select it here and hit open,and this theme actually lets you choose,if you want it to be left or centered so,again as soon as you're making these,edits it's nice because you can see it,actually happening on the right hand,side so now that I
After seeing the fifth section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next sixth section about TCB 2017 theme shopify
Out of the Sandbox Shopify Themes - Duplicating Templates
Out of the Sandbox Shopify Themes - Duplicating Templates
hello and welcome to the out of the,sandbox video guide to duplicating,templates today we're going to take a,look at the steps involved in,duplicating one of the built-in,templates now that you're using the,Shopify sections platform so I'm talking,about some of the special templates that,are included in your out of the sandbox,theme let's say you've already,configured a page or a product using,this special template but now you would,like to configure another page or,another product using that template you,actually need to make a copy of the,template that copy needs to call on an,alternate version of the section code,associated with the template then you,need to set the template as the page,template or the product template you,need to create a way of navigating to,that particular page or product then,head into the customize theme settings,window to configure that unique product,or page using that particular template,so to go through those steps and make,sure that you got it we're gonna give,you three examples of duplicating these,templates and how to wheel and deal with,that starting here on my administer,themes and I'm gonna head over here to,actions edit HTML CSS which is where all,of our duplicating is gonna happen so to,start with an example here we've got the,page gallery template let's say we've,configured a gallery page already using,this robust template but now we would,like to configure another gallery page,we're going to go add a new template,it's going to be of the page type and,we're gonna name it something that makes,sense here like gallery to create the,template so that's pre-populated with,the regular page dot liquid code what we,want to do is replace that with the,original page gallery dot liquid code,which looks like this technically we,only need that one section line but,we'll just grab it all and overwrite the,code that pre-populated that gallery -,to template before we save it we want to,give our section a unique title the,section that it's going to call on here,so let's just add a dash to page,- gallery - template - - let's make a,copy of that to our clipboard before we,head out,save it here then scroll down here to,these sections folder and add a new,section and paste in that title that we,just copied that creates a section for,us with a bit of pre-populated code but,we want to overwrite that code with the,original page - gallery - template code,so we can select all of it and copy it,head back to our - - version of the,section code and overwrite the code,that's there by selecting it all and,pasting in the code we just copied then,we can go ahead and save that so those,are the code steps involved in creating,one of these copies you create a copy of,the template you have that template call,on an alternate section you create that,alternate section and then you make a,copy of the code from the original,section now that that's all set we can,head into pages,when we go to add a page you will see,that gallery - - is now one of our,o
After seeing the sixth section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next seventh section about TCB 2017 theme shopify
My Top 10 Favorite Shopify Apps
My Top 10 Favorite Shopify Apps
hi I'm Elle McCann from curious themes,web development studio in Nashville,Tennessee and I've been a Shopify expert,for over 4 years now there are a few,apps that I just absolutely love so I,wanted to put together this quick video,to go over my top 10 favorite Shopify,apps now I do just want to say before we,jump into my screen that these are,definitely just based on my opinion,these are ones that I like to use for my,own client sites as well as my own sites,with Shopify so these are not hard and,fast rules of you have to use these apps,but these are definitely ones that I,recommend checking out okay so the first,one on my list is lucky orange which is,something that I recommend for all,Shopify owners and this actually will,help you focus on conversions so what,lucky orange is is it's a tracking,software and I'll actually do heat maps,for you and see exactly where people are,shopping on your site so it actually is,recording the potential customer,interacting with your site,so you'll see heat maps which you can,see here I'm going to click on a few of,these screenshots and you'll actually,see you know where people are looking,where their eyes are where they're,clicking as well as there's a chat,functionality and the visitor recording,so I really like doing the visitor,recordings because you can actually see,exactly how your sites loading and what,people are doing and how they're,interacting with your site so it's,almost like you're looking over their,shoulder so it's really cool and it's,really not expensive and that helps you,you know if people are all kind of,scrolling past this one area then it,gives you the insight to know that you,may need to move items around or,highlight things better so that's the,first one that I recommend the next one,is consistent cart which this has a lot,of cool functionality especially for if,you're getting a lot of abandoned carts,so the first one really is helping focus,on getting better conversions of your,site and this one is as well so,abandoned carts actually happened a lot,more frequently than you'd think,and this actually lets you do a few,different things and it will let you,send emails so,someone does a band in their cart you,can actually send them an email like you,can see in this first one here that says,you know you left some items in your,cart and you can customize it to match,your branding and you'll actually be,able to keep track of you know how many,people as you can see in their,screenshot here you know abandon the,cart then were sent to your email series,so you can send a few different emails,you know maybe in the the third one you,actually have a discount code or,something like that and you can see in,the app back-end how many people you,know actually transitioned over to a,completed order they also have an Add to,Cart pop-up and I don't necessarily,recommend that but there's some another,app that connects really well with that,that we'll go over next and I also,really like how they have this,funct
After seeing the seventh section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next eighth section about TCB 2017 theme shopify
How to Add SHOPIFY Products To PINTEREST - Case Study Day 2
How to Add SHOPIFY Products To PINTEREST - Case Study Day 2
hello hello hello,Dejan Paris appear coming to you with,another video today is day 1 in our,14-day case study for Shopify trying to,spend an S least amount of money as,possible and still make some moolah,today we're starting off on the profit,with Paris Facebook group definitely go,ahead and search that on Facebook,request to get in a group be sharing a,lot of different apps and different,websites that go hand in hand with,Shopify,with your Shopify store and other little,tips and tricks that I find and you know,just to keep you guys as you know has,benefited as possible being within the,group so with that being said come on,over add me on Facebook requests to get,added to the group and subscribe to the,YouTube channel of course so you can,stay up to date and get notified when,you get my has coming out and also when,live training goes so you can be the,first one to see it alright today we're,gonna get up to ten items in our Shopify,store because if you remember from the,first video if you haven't seen the,first video to be linked somewhere on,this page after the recording and you,can go ahead and watch that first and,then come back over here in the first,video we set up our Shopify store and we,add it one product today we're going to,add nine more products so we can have,you know ten products good solid,baseline before we move forward with I'm,starting to connect different apps to,our website we will also be adding our,products to Pinterest summer go over,creating the Pinterest page for your,brand and also going over adding the,pins to Pinterest and so on and so forth,alright let's hop right in so if you,know if you don't know we're going to,click the link in the description box to,go ahead and start your store if it's,your first video go ahead and start your,14-day free trial right there in the,link below take it to your Shopify store,for everyone else let's go ahead and,open our Shopify store going to the home,page would look something like this,alright so everybody's here so just,simply go already to products and we see,that we still have our Pokemon Pikachu,with Charizard hat as you remember we're,doing a Pokemon the niche here with this,store everything strictly Pokemon to,test it out and see how far we can get,with this store like I said we gotta get,nine more items up so bear with me now,we're gonna go like I said it's gonna be,a case study so you're gonna see,everything I do so there's no if ands or,buts about it once we start raking in,the money with this store so let's hop,right into it,first things first,I'm going to watch count calm that way,we can see what's you know what's going,on in the world of buyers what's going,on in that Pokemon niche where what are,people searching for one of people,really buying right now today as you can,see the Pokemon with the Pikachu with,the chars R hat still number two in the,rankings and I guess we should gonna,keep scrolling down I want to put this,up I think I know what this is but let's,let's click
After seeing the eighth section, I believe you have a general understanding of TCB 2017 theme shopify
Continue the next ninth section about TCB 2017 theme shopify
welcome to the landing page workshop,today we're going to be choosing a,well-designed landing page or utility,page and we'll recreate it using the,thrive content builder plugin it's a,fantastic visual editor for WordPress,that lets you drag and drop elements,onto the page to create pretty much,anything you like in today's workshop,we're going to be recreating the,resources page in the very talented Amy,Porterfield and you can check out her,website and podcast at Amy Porterfield,comm what you see in the thrive content,builder editor is exactly what your,visitors see on the publish page there's,no more switching back and forth trying,to guess how your changes will affect,the finish landing page if you like you,can head over to david link o /tc b for,more information so the first thing,we're going to do is to have a look at,the page that we intend to recreate I we,think about this in terms of sections or,it becomes a lot easier to kind of,visualize we clearly have a navigation,section at the top which will be the,global navigation that Amy Porterfield,uses we're going to recreate that and,only to show you what can be done with a,thrive content builder however of course,when you create a landing page for your,own website you will of course have your,own navigation up at the top the next,section is this big tools of the trade,section here with the two images the,header the yellow line and then a bit of,intro which is center-aligned going down,we have three taps at stage 1 stage 2,stage 3 and these allow us to toggle,between the the various tools that amy,is a is promoting for whereabouts you,are in your business and we can see just,clicking on these as we scroll down we,have another heading another little,intro and then we have the tools,themselves which are set out into a,fairly fairly rigid structure we have,the the logo to the left sub sub heading,to the top then we have the main heading,in this case leadpages a bit of blurb,and a button over to,right on the side and as we scroll down,we come to another section here and,these tabs here are actually exactly the,same as ones above so we can skip those,this section down here which is download,this list and find the right marketing,tool for whatever stage you're at again,this is a left aligned image a bit of,blurb a button and a heading and then,finally we have the footer which again,would be a site-wide element across the,website but we're going to recreate that,as well just to show you what can be,done we're going to create a new page,just as you would do with any other page,and we're going to name this something,useful and then down here we don't have,to put anything in the main in the main,editor box at all but we are going to,exclude it from search engines that I,use a plugin for from search results,sorry the internal search results and we,are going to also set this to no index,and nofollow just so it doesn't turn up,in the search results okay and then we,are going to set it to private and hits,up
Congratulation! You bave finally finished reading TCB 2017 theme shopify and believe you bave enougb understending TCB 2017 theme shopify
No difficulty
