Stencil theme shopify

Find out your best Shopify theme and theme on shopify in less than two minutes

Find Shopify Theme — it's free

No difficulty

No complicated process

Track competitor's stores

BACK

Home Shopify Theme Stencil theme shopify

Stencil Local Development for BigCommerce

all right stencil local on big commerce,you've probably been hearing about it if,you are,looking at this video,maybe you're thinking about developing,on bigcommerce maybe you are trying to,get it to work and it's just not working,for you and you want to see what is what,does it actually look like is it working,i'm going to run you guys through,how it works in this video and,a little bit about the install but,you'll be able to see it in action kind,of get your head wrapped around what,stencil,local development,what the heck is this thing right so uh,first of all my name is cal i'm a,developer i'm a store owner and i run,the ecommerce growth community for store,owners just like you and me and if you,find this one helpful,you know i post more ecommerce videos,every week so subscribe and hit the bell,you can see more stuff like this,all right let me share my screen and,we're gonna dig into it,okay,so,first thing that we do,first thing we have to do is we have to,create an api account and to get there,in your bigcommerce store first of all,you have to be logged in as the store,owner,and uh only the store owner can create,an api account so if you're logged in as,the store owner uh great if you're not,you know if if your client is a store,owner then have them log in and do this,for you,you need to go to advanced settings and,then api accounts and then create api,account create stencil cli token,so when we do that i'm going to call,this cal,and you want to click publish if you,want to be able to push from local to,live,if you don't do this you can still,you know make your changes live but,you're going to have to bundle it save,it as a file and then manually upload it,to the theme,or to the store so usually people are,just going to want to get publish rights,right here,and click save,now it's going to give us a couple,things first of all it gives me a text,file here,and it also gives me this terminal quick,start thing right here so i'm going to,actually copy this but you can do the,exact same stuff here off of the,text file maybe i'll show you both of,those ways what we're going to do next,is we're going to go to storefront,and then themes,and you need to download a copy of the,theme now if,if the theme that's here is,the,like the base uh the base version of the,theme that you're going to work on,right you can't edit that so you're,going to want to start out by making a,copy and i would usually call it,something that makes sense,so i'm going to just rename this to,um,you know i'm just going to rename it to,the date of this video hopefully i'm not,dating myself if you guys are watching,this in like five years and it's still,relevant that's amazing so i'm going to,rename it,and then what i'm going to do is i'm,going to download the current theme,so i want a copy of this on my computer,that's going to take a minute so while,it's doing that,i have opened up a,uh terminal here on my mac if you're on,a pc obviously it's you know,opening up your folder or whatev

The above is a brief introduction to Stencil theme shopify

Let's move on to the first section of Stencil theme shopify

What is BigCommerce Stencil

hey you guys are you wondering what the,heck is this big commerce stencil thing,that everybody keeps talking about they,keep saying you need stencil you need,stencil blah blah but what is it right,in this video we're going to talk about,what it is and before we get started my,name is cal i'm a developer store owner,and i run the ecommerce growth community,for store owners just like you and me,free community i'll have a link below,you can join if you like,every week i post more videos on,ecommerce so if you find this one,helpful hit the subscribe,and,hit the bell and you can see you can see,and hear more of me if you like,all right so let's talk about stencil,cli what is it well,stencil,when they refer to stencil it's actually,a couple things that they're kind of,conglomerating into,this,simplified term stencil it's technically,a combination of stencil cli which is a,command line tool,this lets developers like me,run a,version of your theme on our individual,computer that connects to your data in,the cloud to let us see what it looks,like the thing that we're working on,combined with your real data so we can,develop it test it and then push it live,when it's tested and ready to go,that's a really nice tool and i remember,before we had this it was not it was not,as pretty doing development because you,would have to do things in a way that,just tried not to make a mess on a live,site while you were doing it so stencil,cli is a huge huge benefit to developers,and to you as store owners because it,means we're not going to make as big of,a mess when we work on your site,which is great,so,it's not just stencil cli though it's,also,handlebars js,and so this is a type of code a type of,javascript that is inherent in your,theme now is a templating engine and it,lets us put these little curly brackets,whenever we want to access database,fields,so,let me show you in the code what that,looks like,this is a category page for example,and we have a field right here where it,says bracket bracket name bracket,bracket and that's basically going to,output the name of this category onto,the page this is going to output the url,and so we can access all these database,fields just like that and there's tons,of them that we can access so here's the,here's the thumbnail for this category,for example,and we could do something similar to,that when you know before stencil came,out when blueprint the prior framework,was out we had simplistic database tags,that we could do but what we couldn't do,is something like this an if statement,and what this says is,if this category has products,then do this,otherwise do this so in this situation,what this means right here is if the,category has products then call this,component in order to show all the,products and if it doesn't have products,then show this message that says there's,no products in this category,um now this is a pretty simple thing but,there's so much stuff that we can do if,statements we can say you know if a,custom fi

After seeing the first section, I believe you have a general understanding of Stencil theme shopify

Continue the next second section about Stencil theme shopify

Stencil Themes & the Theme Editor | BigCommerce Tutorials

BigCommerce offers beautiful and responsive themes to help storefronts captivate their shoppers.,Our themes will enable you to create a dynamic and engaging online store.,Our theme framework is the only hosted solution to offer flexible local theme development,that allows your developer to use your storefront assets, without disrupting your live store.,To start browsing the Theme Marketplace, go to Storefront, then Theme Marketplace.,Here, you’ll have access to Stencil themes that incorporate the latest best practices,in technology, design standards, conversion, and SEO.,Within the marketplace you can browse both free and paid themes and filter by Industry,to find a theme targeted to your business.,Premium themes will have the price of each theme listed below it.,To learn more about a theme click its thumbnail.,Each theme comes with different variations that can be applied in the Theme Editor.,Scroll down and you’ll see a list of features and links to support for this theme.,You can see a demo by clicking on View Demo.,If you want to see how your store will look with the new theme prior to purchasing, click,this button.,The Theme Editor will open with a preview of the theme applied your store.,You can make adjustments on the preview to change the look and feel of the theme.,If you like how it looks and want to purchase it, click the Buy button.,Once you purchase a theme, you can choose to apply it now or later.,Every theme gives you access to the Theme Editor so you can adjust it to fit your store’s,unique brand.,When you are ready, Buy or Apply a Theme.,To see which theme you’re currently using click on My Themes.,You can see this store is using “Cornerstone Light”.,If you’re interested in adjusting your theme, like changing colors or fonts, click the Customize button.,The Theme details button will go to the Theme’s detail page in the marketplace.,The Advanced tab will allow you to download and copy your theme’s files for a developer,to make edits.,To learn more about editing stencil theme files, go to the Help Center.,Let’s take a look at the Theme Editor.,Here you can customize and manage storefront attributes such as colors, fonts, and number,of items displayed, with no coding required.,To the left you’ll see the Style Customization Panel.,Depending on your theme, this may have different panels than what are shown here.,To the right, is the Preview Panel.,This will allow for you to spot check your store’s design so you can review the changes,you have made in real time.,Most marketplace themes have multiple variations to choose from under Styles in the Customization Panel.,If you click on the Bold style of the Cornerstone theme you’ll see the Preview Panel to the,right has changed.,You’ll always know which variation you are currently on by looking for this small checkmark in the thumbnail.,Let's make a few edits.,Below Styles you’ll see more panels.,For example, you can choose to adjust Button colors.,Enter the hex code or use the color picker

After seeing the second section, I believe you have a general understanding of Stencil theme shopify

Continue the next third section about Stencil theme shopify

Installing BigCommerce Stencil CLI

Stencil is the latest theme framework engine,in BigCommerce.,Stencil themes are responsive, ,mobile friendly and can contain,up to four variations per theme.,And by using Stencil CLI,,developers can develop ,and customize on any Stencil theme,without affecting the live storefront,during the development process. ,Here are some of the feature differences,between Stencil,and the legacy Blueprint themes.,Before using the Stencil Command Line Interface,,it is important to determine first,if it is needed.,If you are going to translate the store,to additional languages,,edit configuration files,,create custom page layout for certain products,or test new features without affecting,the live storefront,,then YES, it will be important,to use Stencil CLI.,But if you are just adding,to existing Stencil object properties,or partials in a template file,,you can simply access the theme files,thru the THEME EDITOR instead.,Now, let’s dive into installing Stencil CLI,to our local machine.,For this video, we will be showing installation,on Windows operating systems only.,For Mac and Linux users,,please follow the instructions found,in the BigCommerce site,by following the link shown on the screen,,or in the video description.,https://developer.bigcommerce.com/stencil-docs/ZG9jOjIyMDcwMA-installing-stencil-cli,In this demonstration,,we will be using Chocolatey,to install the dependencies,needed for the Stencil CLI.,To do this, run Windows Powershell,as an administrator,and put in the commands shown above:,You can also install Git,if you don’t have it yet.,Next, install the Node Version Manager for Windows,and the Stencil-compatible Node.js.,Just type the command,choco install nvm; nvm install 14.20.0; nvm use 14.20.0,In case you receive errors ,in the installation,,you may have to implement,the installation commands separately.,Then set your machine to use the version 14.20.0.,Use the command,npm install -g windows-build-tools --vs2015,to install Windows C++ build tools.,This will also install Python 2,which is the version needed by Stencil CLI.,Once installation is complete,,you have to tell npm,to use Python 2.,Now that all dependencies have been installed,,it’s time to install,Stencil CLI to your machine.,If you are a more advanced user,or if you want to install,the required dependencies individually,on your own,,you may also do so.,Just make sure that you download,the correct version as noted,in the BigCommerce documentation.,Links to download these,can be found in the video description.,Now that we have Stencil CLI,installed on our machine,,let’s try doing some changes,to a BigCommerce theme locally,and preview how the storefront,would look like via the localhost.,We start off by cloning,the BigCommerce cornerstone theme.,Open a git terminal in the folder,where you will be doing,theme developments locally.,Then type the command you see above.,Then go inside the cloned theme folder,for this is where you will initialize,and start the Stencil CLI.,Alternatively, y

After seeing the third section, I believe you have a general understanding of Stencil theme shopify

Continue the next fourth section about Stencil theme shopify

Installing Stencil CLI for Windows

in this video we'll walk through a basic,stencil CLI installation on Windows,downloading the base theme cornerstone,and initializing and launching the CLI,full documentation on these installation,instructions can be found on our stencil,developer portal before you can install,the stencil CLI there are some,dependencies you must have first you do,need to have admin permission on your,computer next you must have a git client,for this installation my git client came,from git - SCM comm the install comes,with git bash which is in a requirement,but does give some command-line,enhancements after that you'll need to,have no GAF please refer to the,documentation for the current,recommended version in addition you'll,need to install Python 2.7 dot X you,will also need to install Visual Studio,2013 the Community Edition is flying,here you may use a newer version like,2015 but that will require a custom,installation to get the C++ compiler,this is why we recommend 2013 instead,once you've got all the dependencies,covered installing the CLI is simple I'm,going to pull up bash and use the,following command during the,installation you may see warnings about,deprecation of the good reporter,interface you can safely ignore this and,other warnings after the CLI finishes,installing you'll want to clone the base,cornerstone theme to your local,environment in bash navigate to,whichever directory you want to install,the base theme in then use the following,command to clone the theme to your,chosen directory next NPM must be used,to install the stencil utils module in,the field you'll want to navigate into,the theme directory that are in the,following command keep in mind if you,clone a new version of cornerstone at a,later date you must rerun this command,in the new theme directory before,stencil can be initialized in,API account needs to be created on the,big commerce store that you will be,developing for to do this log into the,stores control panel and navigate to,advanced settings API accounts currently,only store owners have access to this,area of the control panel click the,option in the upper left create API,account add a user name I just use,stencil on this then set your scenes,scope read-only lets you connect to the,store with browser sync so you can see,how changes will look on the live,storefront using the modify scope will,allow you to apply themes to the store,using the command-line interface,I'll set modify as my scope as we'll be,using this in a later video then I'll,hit save once it's saved you'll get a,pop-up window with your client ID and,access token you'll need these to,initialize stencil also a text file will,be downloaded so you have a copy of,these credentials once you click done,you won't be able to view the token,information again so keep the text file,in a safe location,now that the API account has been,created stencil can be initialized in,bash,you should still be within the theme,directory from there use the command,stencil in it it should

After seeing the fourth section, I believe you have a general understanding of Stencil theme shopify

Continue the next fifth section about Stencil theme shopify

How to use If Statements in BigCommerce Stencil

hey you guys are you guys trying to,figure out how to use if statements or,what the heck if statements are uh in,bigcommerce,you're in luck in this video i'm gonna,show you guys and before we get started,my name is cal i'm a developer store,owner and i run the ecommerce growth,community for short runners just like,you i'll have a link at the end and you,know each week i post more videos about,e-commerce so if you find this one,helpful subscribe and hit the bell and,you can see more,okay i'm going to share my screen and,we're going to talk about if,statements on bigcommerce so first of,all,in this storefront i have a theme,to customize a theme you do have to,customize a copy so if you're working on,an original theme click make a copy make,that active and then click edit theme,files to get into the stencil editor,now if statements are the basis of,programming so,you know,you can be very basic you can be very,advanced depending on what you want you,can have necessary if statements i'm,just going to show you guys the basics,about how it works and how the syntax is,on bigcommerce so to do this demo we're,going to go into my theme we're going to,go to templates components common,and then header just to give us a,place to,show off some if statement,goodies,now,what an if statement is is it says if,this is true,then do this thing,and you can also say or else do this,other thing,and the way that this works in stencil,code is you say,curly bracket curly bracket pound,if,this is true,and then we're going to close that off,and then we're going to put a slash if,at the end of it so the pound if opens,the statement the slash if closes it and,so anything,anything that's in the middle is only,going to happen if,this one condition is true,and,we can let's let's just do that first so,let's,uh we're going to say,we're going to say here on this store,that if the,if the,title of the category,is apparel,then,execute the code right,and so let's just say here,um,category name category name okay,so,if category name,go back to my code,if the category name,equals,oops,apparel,then we're going to say,this is the apparel,category we're just going to put that,onto the page,right below the header,in a paragraph tag,give it a second to update,for a couple seconds,we're going to refresh the front end,and you can see that it does it did,output our sentence here that this is,the apparel category and if we click,over to a different page like campsite,because the title of this page isn't,campsite,then it doesn't show that so it only,shows that,if we have,uh,correctly identified the apparel,category,now going back to our if statement,there's one other thing that you can do,is you can put an else in here so we can,say oops,fat fingered it,so curly bracket curly bracket else,curly bracket curly bracket,else this is not,the apparel category,right so if it is apparel then it's,gonna say this and if it's not,then we're gonna say this,all right,go back to the front end so it still,says thi

After seeing the fifth section, I believe you have a general understanding of Stencil theme shopify

Continue the next sixth section about Stencil theme shopify

BigCommerce Themes: How to download, upload and preview

BigCommerce Themes have been optimized, ,are visually appealing, ,user-friendly for customizations,and jampacked with features out of the box.,BigCommerce themes are also fully responsive.,And by utilizing the Stencil theme platform,,users are able to create dynamic and powerful storefronts. ,These themes also utilize the best practices,in technology, design and SEO.,You can view the themes,currently being used in your store,by going to your Storefront in the Control Panel, ,then selecting Themes. ,And here, you can see the current theme,installed in your store.,Scrolling down,,you can also view all the other themes,that you may have previously bought,or added to your store.,BigCommerce has made it simple,to add new themes to your store.,There are lots of free and paid themes,available in the Theme Marketplace.,Just click on the Theme Marketplace,in the Control Panel,to see the different themes ,that you may add in your storefront.,BigCommerce has also made it easy ,to find a theme that you would like ,by allowing you to toggle ,between Free and Paid themes; ,or filter by a particular industry.,There are lots of themes in the Marketplace,that are currently free ,and customizable using the Page Builder ,to fit your brand's styling. ,A word of warning, though.,BigCommerce is unable to offer support,for any theme that has been modified,using Edit Theme Files ,or local development via Stencil CLI.,Most themes also have different substyles,to fit your store’s branding and design.,You can easily switch between styles,,making it easier to change your ,storefront's color schemes and visual appeal.,Before adding a theme to your store,,BigCommerce provides a way for you to view ,how the theme looks and functions,when opened in a browser.,Just select the theme and click on the View Demo Button.,You can also try playing around with the theme ,and see how it would appear,when applied to your store.,Click on the Preview button ,which will open up the Page Builder ,with the theme applied to your store.,Once you are ready,to add the theme to your store,,you may click the Buy button,or Add Theme button.,Take note that only store owners ,have the ability to purchase paid themes.,After the theme has been successfully added,,you can view it,in the Themes section of your Store.,Here, you can choose to Customize,,Apply or Make a Copy of your theme.,Learning how to download theme files ,is very useful for any BigCommerce user.,A downloaded theme file,will allow you to implement major changes,and features to the store’s theme;,and with a downloaded copy of your theme, ,you can have access to JavaScript files ,that are not usually available,when using the Theme Editor.,A downloaded file would also allow you ,to make changes to your theme on your local machine,without impacting,the live version of your store.,Lastly, a downloaded copy of your theme,acts as a backup file.,To download your current theme,,click on the Advanced drop-down menu ,and select Download Current Them

After seeing the sixth section, I believe you have a general understanding of Stencil theme shopify

Continue the next seventh section about Stencil theme shopify

How to add CUSTOM FONTS to Shopify | Upload Shopify Custom fonts

welcome to ecom ranks in this video i,will guide you on how you are able to,add custom phones to your shopify store,okay right now this is my website and i,am using sensory fonts,and for now i will add a completely,custom,fonts to my shopify theme code okay,so please don't forget to subscribe to,my channel,and watch my full video this is a quick,tutorial,on how to add custom phones okay for,this you have to click on themes and,then you have to click on edit codes,we will have to change some or add some,of the css to our,cs files css file okay so,at the search tab you have to write css,and then you have to,open the theme dot css file or theme dot,s css file both of these files are,called the css files basically css,is a coding where we will add some,colors,phones styles to our website okay,at bottom of the website you have to,copy this code i will share this file in,the description below,you can just open it and copy it from,here,and then paste it to the css file of,your theme,okay and hit the save button,okay so now go back to the,any fonts uh for this i have using a,commercial fonts of great,web wives regular simply hit the,download icon aft,okay so it's get downloading click on,shown,folder and then extract this file,okay after extracting it you can see,this is the fonts,okay so firstly check its format,or its extension right now its extension,is dot dff,dot ttf so the only compatible,extension that will work with the uh,shopify stores is w,o f f so we have to convert,our theme or convert our forms,to uh woff to extensions,so for this you have to navigate to,any converter and simply and you can,google it convert,font file okay,so after clicking on it there are many,links you can open any,i am using this one okay so we need,uh it's asking which fonts we need we we,we want wo double f2 forms,extension after clicking on the choose,file you have to simply,upload the the the,form,simply hit the done button and then,click on the save your fonts and hit the,download attachment okay so,after downloading it you have to unzip,the file,and there will be a new fonts,with your required extension okay now,i'm closing that,after this you have to move to your,theme code again,okay so now you have to click on add new,asset,and then choose your file and this,is my file you have to select it it must,be,within the online font converter or,whatever the file is and you can get it,from online website okay,select your file and then open it you,can use any other,converter online and it's quite easy to,convert your files uh,to this extension wo ff2,okay so now we have to,click on it and then we have to,copy it,we have to copy the font names only,okay so go back here and,then we have to add the name of the font,here and then we have to add the,font name here similarly for,all the places where it's pre-written,that you have to add the name of the,font simply play paste your font,without a dot okay so,let me remove this dot and keep this one,dot here,okay and hit the save

After seeing the seventh section, I believe you have a general understanding of Stencil theme shopify

Continue the next eighth section about Stencil theme shopify

Installing Stencil CLI for Mac

in this video we'll walk through a basic,stencil command-line interface,installation on Mac OS downloading the,base theme cornerstone and initializing,and launching the CLI full documentation,on these instructions can be found on,our stencil developer portal before you,can install the stencil CLI there are,some dependencies you must have on Mac,you must install the latest stable,version of Xcode development tools this,is available in the App Store after that,you'll need to have no das please refer,to the documentation for the current,recommended version once you've got the,dependencies covered installing the CLI,is simple just use the following command,in terminal during the installation you,may see warnings about deprecation of,the good reporter interface or other,components you can safely ignore these,warnings after the CLI finishes,installing you'll want to clone a base,corner storing theme to your local,environment in terminal navigate to,whichever directory you want to install,the base theme in then use the following,command to clone the paym to your chosen,directory next NPM must be used to,install the stencil utils module in the,theme you want to navigate into the,theme directory then run the following,command keep in mind if you clone a new,version of cornerstone at a later date,you must rerun this command in the new,theme directory before stencil can be,initialized an API account needs to be,created on the bigcommerce Store that,you will be developing for to do this,log into the stores control panel and,navigate to advanced settings API,accounts currently only the store owner,has access to this area of the control,panel,put the option in the upper left corner,create API account add a user name I,just use stencil for this then set your,themes scope read-only lets you connect,to the store with browser sinks you can,see how changes will look on the,storefront using the modify scope will,allow you to apply themes to a store,using the command-line interface,I'll set modify as my scope as we'll use,this in a later video then I'll say it,once you save you'll get a pop-up window,with your client ID and access token,you'll want to save these for,initializing stencil a text file will,also be downloaded so you have a copy of,the credentials once you click done you,won't be able to view the token,information again so keep the text file,in a safe location,now that the API accounts has been,created stencil can be initialized in,terminal you should still be within the,theme directory from here use the,command stencil in it it should now,prompt you that a home page URL so the,story you're going to be developing,against locally go ahead and enter that,now next it'll ask you for the port,you'd like to run the store on it,defaults to 3,000 which is what we,recommend next it's going to ask for,your API credentials first you'll need,the client ID then the access token,once the credentials are entered you,should get a confirmation that stencil,is initialized

After seeing the eighth section, I believe you have a general understanding of Stencil theme shopify

Continue the next ninth section about Stencil theme shopify

Migrating from Blueprint to Stencil on BigCommerce

hey there are you still in the blueprint,framework on bigcommerce and thinking,about moving over to stencil or they,keep telling you to move to stencil or,you're just thinking what is this,stencil everybody keeps telling me about,in this video we're going to talk about,migrating from blueprint to stencil,before we get started my name is cal i'm,a developer store owner and i run the,ecommerce growth,private group for stores just like you,and me it's completely free to join i'll,leave a link under the video and check,it out every week i post more ecommerce,videos so if you find this one useful,subscribe and hit the bell and you can,hear me talk more,all right,bigcommerce blueprint so when,bigcommerce started,before blueprint there was a different,framework that we all just kind of,called three column blue because that's,the theme that everyone started with and,it was,it was hideous and it was three columns,and it was terrible then it came out,with blueprint and it was so much better,and then in 2016 they said we are moving,away from blueprint and we're gonna we,have this new thing called stencil and,everybody was like what is this stencil,thing right,um stencil,to clue you in is a combination of,handlebars js and stencil cli,uh people in the big commerce community,just refer to it as stencil as a,conglomerate but that's what it is it's,a combination of stencil cli and,handlebars.js now stencil cli is a huge,tool for developers like me,because it lets us develop locally,meaning on our computers and then push,it up when it's ready to go so we can,test we can develop and test things,and,make it live once it's ready before that,we kind of were doing a lot of things on,the fly and tried not to make a mess so,stencil cli was a was a big leap forward,and that's great much better development,process handlebars.js,is a javascript,library that lets us have these little,curly bracket template tags that call,things in your database like they call,you know a title on a product page and,we had kind of a similar thing on,blueprint but it was different uh with,handlebars.js though we could do some,more advanced things like we can loop,through,like all of your custom fields for,example,on your product page or you know all of,your product cards on a category page we,can also do things like if statements so,we can say if a product has this custom,field then do this thing,and that makes it way more powerful,and that's why everybody wants you to,update because you know the newest stuff,is just so much more powerful,than the blueprint framework was and,so,there's a lot of reasons to upgrade,but you're probably watching this video,because you're wondering what does it,take to actually update,upgrade right from from blueprint to,stencil,so,the big difference is how your template,is written,the,database tags that were in blueprint are,not compatible with stencil nor is that,so compatible with blueprint,so there are two completely incompatible,templating systems so long sto

Congratulation! You bave finally finished reading Stencil theme shopify and believe you bave enougb understending Stencil theme shopify

Come on and read the rest of the article!