hey today we are going to,show you how to use the ella theme i,think it is,we'll double check here in a second but,go ahead and log into shopify,and you just go to your domain name once,it's connected,and it is slash admin,or got some other stuff i'm going to,show you how to actually just work on,the front end of the website right now,so let's go to uh faded revival,i'm sorry we're going to click on this,little link here it gives you the,preview,and it'll take you and let you look at,your website okay so,we'll first talk about changing this,banner so if you look at this you click,left,you click right you know you can make uh,these banners,um at like 1920 pixels wide by 1080 tall,um i'm gonna go i'm gonna i'm actually,gonna let that,keep showing so um and then you could,make them smaller or larger based on how,you want to do it so if you take a look,at,so i'm just going to bring it down to,1600 pixels,by 900 and so i basically resize this,thing to make it smaller,so let's see where it puts that 1600 by,900,and we'll call it a one,and we are going to just throw it in,there,so now what i'll go ahead and do is log,into the back end here,click on online store,customize,wait for this thing to load slideshow,and here's the first set of girls right,here so i could just change that,i'll go ahead and upload it,women's one so now it's my 1600 pixel,one,so let's see how that lays out on there,so it cuts their heads off still so if,you if you want to make it shorter,select it and if you scroll down here,image for mobile you can have a,different banner image for the mobile if,you wanted,right and there's different styles it's,just the layout of the actual slideshow,so it just moves the text around,okay and you want to keep it centered if,you want to move it off to the left say,you have a graphic heavy image with,dark stuff on the left and then you can,move it right as well if you wanted to,okay,so you can control where that text goes,and then that big text save up to 50,off you could just change change it to,whatever you want 20,off you know whatever right special,offer,the description if you start adding some,text in here,it puts it right below that right there,so you could you could mess around with,this for now if you want the shop now,button that's the actual name that's,right there,exclamation point you can change,whatever you want in there right i'm hit,cancel,and then lastly if you want to link the,button to something else you just click,on,this little arrow to kill it right and,say i wanted to link to men's i could,just type in men,so you can click on the slideshow here,and you could actually change the girls,you could change the text all this stuff,so you can play around with the stuff,that's in here,you know you could change the link so,you wanted the link to be different you,wanted to go to,uh women's t-shirts instead you can,click on that to get rid of the link and,then you just click in there,click collections and then you go ahead,and select whic
Let's move on to the first section of Gymuso theme shopify
Elevate Theme - Setting Up an Instagram Grid using Page Builder
Elevate Theme - Setting Up an Instagram Grid using Page Builder
hey guys damian here from above and,beyond web design,i'm just going to show you how to add in,and,a grid of instagram photos um,so instagram previously had a,an api where we could easily just sort,of generate a token,and then it would automatically feed in,your images from instagram so,they've updated uh their api and it's no,longer possible or,it is possible it's no longer easy,for us to create a script for the,general public to use in themes to do,that,so uh what we've done here is um,installed the page builder and i'm just,going to show you walking through the,steps on how to create,like a little uh six column layout where,you can insert,some photos and you know it might not,auto update out of instagram but you've,got,trade-offs with both this will be,actually faster for,uh your site to load because it's not,reaching out to instagram every time,your home page loads,and grabbing photos it already has them,on the page on that same big commerce,account server,so what we're going to do you know i'll,just go back one step,you're going to want to go into,storefront,my themes and you want to click,customize right,uh once that opens it'll open up in the,page builder section by default,you want to scroll down to the bottom,right you can put this anywhere you want,see these little blue,blue sections here where it says drag,and drop widgets you can place this,wherever but this is just for,our elevate theme you want to create a,layout,and drag the layout into this one so,i've got,two sections here ones are full width,and one's inside a container so,we'll just use the one inside the,confines of,the page and then we're going to say,it's six across but you can change that,to four or five or whatever,then what you want to do is click inside,the drop widgets here bit and you want,to,drag an image,right and then what you want to do is,upload a picture now we've created,images of 300 by 300,so so you want to get these already you,can probably grab them off your,instagram,feed already but i'll just show you what,they look like so we've created a couple,of instagram pics for the bottom of the,site right here they're 300 pixels by,300 pixels,so you grab one and you upload that,and it's simply a matter of uh,you know inserting these you've got you,can also add padding which i'd recommend,and just,click this button here to make,everything the same value so that's gray,and set that to five and then,if you want to link it to your instagram,each image you can do that,and you can be like,slash your username right so it might be,maybe pages.com or whatever your,username is,now you basically repeat the process,click in here,right grab the image,upload a picture,repeat the process all good,click that make sure it's got a padding,so padding just gives it a bit of,spacing around itself,and you can continue the process you,don't have to link it like this is all,linked up here to your instagram,page in this theme settings um but yeah,we're just doing this,for you just so it's
After seeing the first section, I believe you have a general understanding of Gymuso theme shopify
Continue the next second section about Gymuso theme shopify
What is BigCommerce Stencil
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 second section, I believe you have a general understanding of Gymuso theme shopify
Continue the next third section about Gymuso theme shopify
hey guys damian here from above and,beyond,we've got a new feature we're working on,at releasing in the next update so,some of you have mentioned you would,like the ability so when you click into,a parent category,to be able to show a grid of thumbnails,of the child or subcategories of that so,in this instance it would be you click,on women then you would have a sub,category showing,clothing tops bottoms you know across,the page here,the uh way that the current theme is set,up is we're using,category images right to set as a banner,so a problem for this is well,there's only one area in the back end of,big commerce right where you go,to set a banner image so say if we go,into this one here and we go clothing,dresses we've set you know a banner,image for this,so if we go into,clothing dresses and we look at that,category there is that image that we've,uploaded for the category image to set,as a top banner,right but the problem with that is,there's only one area in bigcommerce,where you can,upload a category image so what we've,done,as a solution is in the back end of the,editor we're going to add a setting in,the category,slot to sub category image display,as a top banner or as thumbnail so when,you,change this at the moment it's,displaying as,a top banner if we change it as,thumbnails,let that refresh what that is going to,do,is instead of showing uh,instead of showing it in the top banner,it's going to show,them as thumbnails right so then you'll,be able and whenever you upload a,sub category image right you'll be able,to set,them so basically there's a switch so,for here so so if we publish this,right and then we reload the page,so if we go into women it's not going to,show the top as a banner anymore,and it's going to show the sub category,image i'll just wait for that to reload,that's saved,okay so now the picture is not shown as,a banner,and the subcategories under it if you go,and upload a picture for these,you know clothing if we go into product,categories,and we go women then we go clothing and,we've uploaded a picture a sub category,instead of it being a banner,we what we've done is uploaded a more of,a square picture,now the dimensions for these are 190,pixels wide,by 250,pixels high now you can as long as it's,more of a rectangle shape it will work,just be consistent so it could be 190 by,190.,it's up to you um but you can as long as,they're about 190 wide,they will work and as long as they're,all consistent sizes,now now if we go into women,clothing right it's going to show,we were using that as a banner before,obviously now,we've chosen to show them as thumbnails,it's,going to you know swap that for a,thumbnail picture,now you would have to update this,depending on the way you want to run the,site,if you've chosen to run it as thumbnails,then you have to upload them as,thumbnail image sizes and that's,actually set as a banner,so you'd have to go and swap that,picture then now if we're using,thumbnails um,yeah you can still use the pag
After seeing the third section, I believe you have a general understanding of Gymuso theme shopify
Continue the next fourth section about Gymuso theme shopify
How To Use the ThemeBridge™ BigCommerce App
How To Use the ThemeBridge™ BigCommerce App
congratulations on purchasing into its,solutions theme bridge the only way for,you and your developers to preview,alternative themes against your,website's real store data in this how-to,video we're going to go through the,basics on how to get you started with,theme bridge including naming your sub,domain uploading and activating your,theme and scheduling your theme for live,deployment the first step in configuring,your theme bridge is to name your sub,domain the sub domain is the part of,your theme bridges web address that,contains the word or string of,characters that will appear before theme,bridge net let's try it in your stores,back-office navigate to apps and select,theme bridge in the app window click the,Settings tab in the settings window you,will see an input field labeled theme,bridge subdomain click into it type your,subdomain name and click the Save button,it's as easy as that,next let's upload an alternative theme,that we'd like to test on theme bridge,within the app window select the Home,tab once in the home window you will see,an upload box that prompts you to drag,and drop your theme bundle into it for,easy upload let's do it,Wow that was easy watch the status bar,in the upload box to monitor your themes,progress once completed you will see a,theme card below the upload box,featuring your theme you can send the,theme model to theme bridge activate the,theme on your store let's activate your,theme on theme bridge to test it using,your store's real data simply click the,button titled sent a theme bridge select,the variation of your theme you would,like to test in the pop-up window and,then click the sent a theme Bridge,button within that pop-up window to,begin the process an alert window will,pop up performing that your theme is,deploying to your instance of theme,bridge as you can see the status bar at,the top of the app window updates live,according to the stage of deployment,that your alternative theme bundle is,experiencing please be patient as this,process can take a few minutes I won't,make you watch this video while we wait,so let's cut to the end good now the,status bar says your instance of theme,bridge is live if we want to deploy our,theme to our live store all we have to,do is click the button on the theme,bundle card titled activate the theme on,your store,want to wait to deploy your new theme at,a time when traffic to your store is,lower click the button for schedule,theme launch to select the date and time,you'd like your alternative theme,activated on your store wow that was,easy what a time-saver no surprises on,the live store because we tested,everything on Intuit Solutions theme,bridge thanks for watching this video
After seeing the fourth section, I believe you have a general understanding of Gymuso theme shopify
Continue the next fifth section about Gymuso theme shopify
Elevate BigCommerce Theme Overview
Elevate BigCommerce Theme Overview
hey guys,damian here from above and beyond i'm,just going to show you,some of the key features of our new,elevate theme that we've released on the,bigcommerce marketplace,we've created elevate in three different,variations so there's a fashion version,there's also an auto and a darker,version,here and there's an outdoors version all,of these can be fully customized by,changing the colors,to suit your branding and needs for your,different industries that you have,um so the first thing that i wanted to,point out with our theme that makes it,unique from others,is the ability to show,the swatch available swatches that are,for a product,so say if you have this product here,that's in,you know four different colors you can,click the user can click,these options and see the corresponding,image change,also if there's a product that has,multiple pictures,you can cycle through without having to,leave the category,so that's a great feature to have it,allows your users to quickly skim,through,look at multiple products look at all,the photos see the available swatches,without having to jump into the product,details page so it allows them to make,decisions,quicker on purchasing now,at the category level so say if we go to,women dresses,you've got a couple of things that are,unique as well we have,a category banner that sits behind,the breadcrumbs and the category title,we also have an expandable category,description,now this is used it's great for seo so,you can write a nice descriptive seo,value there,but if you click read more it will,expand out,into more text so traditionally if you,write this much,text your whole all your products are,pushed down the page and the user cannot,see them,initially on the page load this this,brings everything up higher on the page,also i'll jump onto another category,over here,it's the same same sort of structure,across the three,so this is the dark version of the auto,parts,you have the expandable category,description you'll also have,uh the sidebar will remember which,category you're in and expand and,highlight that current category that,you're on,and the same goes for our outdoors,version,as you scroll down the page you'll see,these lazy load in we're using lazy load,for all of the category images that's,the latest version,that comes with bigcommerce and so lazy,loading helps,speed up your website so when you first,load,rode the site it will only load in the,images inside your viewport so,inside this window here and it doesn't,load the images that are further down,the page because you cannot see them,right,so as you scroll down the page it will,automatically load them in,as it needs them so say if we go to a,longer category,like uh women,and then if we quickly scroll down the,page real quick,it'll load them in on demand as we get,to that location on the page,now the next thing i wanted to show you,was the theme is fully compatible with,the latest version of the big commerce,page builder,so what does that mean i'll just grab,y
After seeing the fifth section, I believe you have a general understanding of Gymuso theme shopify
Continue the next sixth section about Gymuso theme shopify
#1 Reason to Upgrade to BigCommerce Stencil
#1 Reason to Upgrade to BigCommerce Stencil
number one thing that we talked about is,speed okay so they have a support,document here and if you scroll all the,way down they actually list out kind of,all the the checkpoints of what you get,I'm going to translate all these but the,performance is the biggest thing so,you're getting a 90 page rank out of 100,and they're the same that's,best-in-class,and a 74 I mobile compared to a 79 on,desktop and The Blueprint theme has,already been ranked because some of them,aren't mobile friendly at all so what,are these speed improvements come from I,mean it's good to say a 90 but what does,that mean exactly so I've actually got,some code here I want to show you this,is the header file that's shown in an,old blueprint theme and this is shown on,this is used on every single page so the,head of the file is used on every single,page and this is the problem so right,here starting on line 19 we have almost,20 CSS files that handle different,things there's a CSS file for the,slideshow one for social you get a whole,bunch of files that are doing a whole,bunch of impacting the the look of the,site these CSS files and every single,time you put a file in there actually,here's here's five more and a couple,more so these will require a network,request so in that request has to go and,fetch this file and it's going to be,fairly small the way that stencil does,it is it uses a bundler so I've got open,this base template and it actually it,doesn't have a separate file for the,heads just right here and you'll see,that we actually have one file linked in,on this site for some extra fonts that,we've added and one file for the theme,that's completely bundled up and then,we've added two extra files for our own,customization for this client and then,the client wanted,a separate file for him to be able to,make edit so we've reduced that from 25,files down to 4 and in most cases by,default it's typically only two similar,thing is done for the JavaScript so,let's keep going down here this is back,to our old classic next theme here that,we're looking at and we have scrolled,down to line 90 and we've got all of,these lines here about 20 lines of CSS,files I'm sorry JavaScript files,so all these JavaScript files again have,to make a network request so you can,pair that to stencil and right down here,we've got three script files that are,being loaded in actually this is not,even the file that's loaded it's just a,script so I've got two files that are,being loaded in for use there that's,huge I mean it bundles all of this,JavaScript it actually,so that people can't be like stealing,your JavaScript code if you have any,customizations that would be important,for you or any big features that were,developed but yeah I mean it's it's,really just compiling everything down,and bundling it into a single file,dramatically reduces the network,requests and get you a nice bump in the,speed there related to speed there's,dynamic image processing that happens,I'm going to talk about that in a,sepa
Congratulation! You bave finally finished reading Gymuso theme shopify and believe you bave enougb understending Gymuso theme shopify
No difficulty
