Shopify theme development - product swatches, variant Images, and more! Product page dev In-depth.
what's up youtube welcome back to,another edition of coding with robbie my,name is robbie and in this video we're,going to be covering the shopify,products page more in depth so in a,previous video we kind of went through,all the different shopify templates i,kind of showed you how to get started,with them but we really didn't dive too,deep into any of them so in this video,we're going to go deep into the product,page and we're basically going to turn,our boring product page here into a,cooler one with uh we're gonna do like a,thumbnail product image selector we're,gonna do swatches we're gonna make it so,the compare app price shows and the,prices will update with the variant,we're going to make it so the url,changes so it will,persist across loads you can share the,specific variant we're going to do a,better quantity selector like this and,we'll do a buy it now button,so here's what i'm starting out with,this is basically what we created in the,previous video i just added some styles,to it here's the um liquid right here,so we just got some extra divs and stuff,now but here's the product images it's,just looping through them and rendering,an image tag look at the product title,right here the product price,product description and then we got our,product form which is that default,select right here,we got um a quantity selector right here,which is just a input and then we got,our add to cart button so we're going to,get right into this right now make sure,to like and subscribe and uh let's get,right into it all right so i think the,best place to start would be taking our,default select here and turning it into,swatches so here's the default shopify,dawn theme and if we take a look at how,they're doing it let's just inspect,their swatches you can see they're just,input type radios and then if we go up a,little bit we find the product form,right here and within the product form,they have a hidden um input with name id,and the value is equal to the variant id,and whenever someone clicks one of these,radios it finds the matching variant and,just updates the value on that hidden um,id input,so we're going to handle ours the same,way so let's go back to our page,and let's go to our code and let's just,start by turning our select into a,hidden input,so i'll go up here i'll go input type is,equal to hidden,uh name is equal to id,and then for value,we gotta go product,dot,i gotta look it up but there's a special,property to get the selected variant,it's selected or first available variant,so product dot,selected or,first,available variant,dot id which is the variant id,just like that and now we can delete our,default select,let's do that go back and check it,i'll refresh the page,and uh it's gone if we go in dev tools,we can see our hidden input right here,and it's got the values so it appears to,be working good,so next we can build out the html for,our swatches,so let's go back here and we'll add a,new section right below that input so,div class is equal
After seeing the first section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next second section about Clickbuy theme shopify
How to add a BUY NOW secondary button with direct checkout on Shopify
How to add a BUY NOW secondary button with direct checkout on Shopify
hey everyone and welcome this is corinne,from speedycom,and i'm bringing you today a new,tutorial in which we are going to see,how you can add a secondary direct,checkout,buy now button on your shopify store it,will be added in addition to your add to,cart button,and your visitors will be able to go,directly to the checkout page,if they click on it in the description,of the video,you will find the link that will bring,you to the written tutorial page,where you will have access to the code,that we will be using,if you really enjoy our tutorials please,don't forget to leave a like,and also subscribe to the channel so,that you don't miss out on any of the,upcoming,weekly or bi-weekly tutorials all right,so the first thing we are going to do is,copying,this section of the code it's a bit long,so you will have to scroll,down and select it all and once you've,done that you copy and you go to the,themes page of your shopify admin then,you will have to click on,actions and edit code but before you do,that,always remember to duplicate your theme,files,that way you can come back to a copy,just in case you make any big mistakes,while editing the code you can see that,i have already made,a few copies of my debut theme but you,can also maybe notice,the speedfly theme that i have in my,theme library,it's a theme that we have created within,our agency,and i would advise you to take a look at,it because it's really one of the best,of,the market so now we will go on actions,and edit code page,and once you're here you will have to,find the snippets,folder open it create a new snippet,that you will name direct checkout like,this,once you've created it you will just,paste,the code that you have copied and click,on save,for the next step now we will have to go,back to the tutorial,and find the second code here copy the,code,go back to the shopify editor once again,and now you will have to open the,sections folder,and find the product template file here,you can see,product template that liquid so once,you're on this page,we will have to find the line of code,that says,end form so you can either scroll,manually and find the line or you can,actually use,the search bar with ctrl f,actually you have to click in the field,here then,control f you can see this search bar,that opens here,and you will type and form there you go,you can see,it has brought us directly to the line,of code,that has end form in it so the code that,you just copied,you will have to place it right before,the end form,but be careful because for example here,you can see that,i have already added other codes from,other tutorials,so typically you will have something,like this actually,so let me delete the different codes,so this is what will it will look like,for you if you have never,touched this part of your theme files so,right now i'm going to go back this is,the codes that i have,so my goal is to place the code,before this code because these are codes,that will have to be placed,after the button so i
After seeing the second section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next third section about Clickbuy theme shopify
How To Design A Shopify Store In 10 Minutes (Step-By-Step)
How To Design A Shopify Store In 10 Minutes (Step-By-Step)
having a bad website will kill your,chances of success on shopify even if,you have the best products and ads it's,so much harder to see results with a low,quality store so in this video i'll be,sharing the exact store template that,i'm using right now to generate over a,hundred thousand dollars a month and,i'll be showing you step by step exactly,how to easily build one for yourself if,you're new here my name is jordan and,i'm currently documenting the entire,process of growing my ecommerce brand,with as much transparency as possible so,if you're interested in starting your,own online business make sure to,subscribe for new videos every single,friday also just want to say thank you,guys so much for 50 000 subscribers so,to give back to you guys i'm gonna do,something that i usually don't do i'm,gonna give away a free one-on-one,coaching call to one of you to enter the,giveaway just drop a comment down below,follow me on instagram and dm me when,you're done i'll be announcing the,winner for this next friday anyways,let's get started with the video,first things first here are some live,results that i'm getting with this exact,template so as you can see halfway,through the day i've already done over,2500 in sales and if we look at,yesterday's stats you can see that this,store is averaging around five thousand,dollars a day everybody is always asking,about profit so let's take a look,yesterday i did around fifteen hundred,dollars in profit and today so far,halfway through the day i'm at around,in profit which is close to 30 daily,margin i'm not showing this to brag but,just to prove that this layout is,working today i figured the best way to,explain this would be to make a sample,store that follows this exact template,so that's what i did let's have a look,at that sample store so this is a store,that i created in the home and garden,niche the type of stores that i like to,build to test products look just like,this basically we're building a nice,clean branded store with good logo good,images,multiple collections inside of that,niche high quality products and images,and overall a trustworthy and legitimate,feel i get dms every single day of,people asking me why am i struggling to,see results and then i look at their,store and it looks like this,if you take the time to make a nice,clean branded website seeing success,with ecommerce is going to be so much,easier this kind of store is perfect for,testing products because it is branded,it has a trustworthy feel but it's also,broad enough that you can test a variety,of products without being too,constrained i like to call this kind of,store a hybrid store it basically,bridges the gap between a general and,niche store building a store like this,is really not that difficult so i'm,gonna break down how to do it right now,the first thing that you're gonna need,to come up with is a clean name and logo,to come up with names i highly recommend,you guys check out this tool called lean,domain search basically you c
After seeing the third section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next fourth section about Clickbuy theme shopify
How to remove cart and Icon from Shopify 2.0 store | Dawn Theme | Straight to Checkout
How to remove cart and Icon from Shopify 2.0 store | Dawn Theme | Straight to Checkout
uh hello guys and welcome to this very,quick and easy tutorial for removing the,add to cart option from your Shopify 2.0,Dawn theme store this will work with any,Shopify 2.0 themes basically what we're,going to be doing in this video is,removing this add to cart option this is,perfect for stores that don't really,need this so like a one product store or,whatever it might be so instead what,we're going to do is just have this Buy,It Now option so they can still choose,what they want okay they can still,change the variance whatever it might be,and you can still have the stock options,etc etc,but instead of having the outer car,it'll just be this perfect little Buy It,Now button which isn't which is already,an option on Dawn and if it's not an,option on your Shopify 2.0 theme or your,Shopify theme then definitely have a,look at switching over to Dawn because I,think it's the best option so let's just,quickly exit out of here so we can start,from the beginning this is the page that,we want them to be taken to as soon as,they say I want this product they just,click buy it now and they're instantly,on this page instead of having the cart,so I have the latest version of dawn,7.01 so this is the most up-to-date,video you'll find on YouTube press edit,code like this type in main product dot,liquid like that okay I'm not going to,give you specific line numbers I'm going,to show you how to find what you need so,do a control F search and type in cart,as you can see it says add to cart form,here and all I'm going to be doing is,removing this button like that,so that was about,um,seven lines of code,and then I'm going to hit save,make sure that you're removing the,closing tag as well and then if we go,back here and we click refresh it didn't,even have to click refresh you can see,now that there is just a Buy It Now,button and there is no cards so another,thing here is that there is a cart here,I believe this is a front end Shopify,change so if I go on something,like I'll just find it quickly,okay it seems to actually be a back end,change so what you're gonna have to do,is type in header on the code editor on,Dawn so let me just exit let me start,this again,so click edit code here type in header,here click on header.liquid press Ctrl F,and look for cart and then you're gonna,have to press enter a lot of times okay,and what you're looking for is when it,says,a h ref so it should be around here,let's have a look,keep going keep going,oh I went all the way through,okay there it is there so ah ref where,it says ahref just highlight that you,can uh copy it just in case you make a,mistake delete it and then press save I,can't press save because I already made,this change and now when I press refresh,you can see that the cart is basically,gone from our store and now people can,just instantly click on buy it now,instead of going through the cart,process thanks for watching guys plenty,more Dawn tutorials on my channel,subscribe for more and peace out
After seeing the fourth section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next fifth section about Clickbuy theme shopify
New Wolf of Shopify Theme
New Wolf of Shopify Theme
what's up everybody welcome to a new,video i know i haven't made a video in a,while guys i know i know it's been a,while i've been promising that i would,come back uh but i figured i'd make this,video the reason why i'm making this,video is wolf of shopify 3.0 has been,finally,been released it's the new update uh or,theme release i guess you could say to,the 2.0 now if you guys remember when i,used to talk about different shopify,themes i always used to talk about the,pricing,you know what you could do with certain,themes and in 2022 especially like right,before 2022 came we saw a lot of,different companies charge more for,their themes,wolf of shopify was the only company,that i know that did not increase their,price now,guys you're looking at the price right,now on the screen i don't know how long,these prices are gonna stay how long,they're gonna exist so i'm just gonna,stick to talking about the theme for,today and not talk about the pricing but,we got the wolf of shopify 3.0 theme,this is not the alpha theme okay the,alpha theme is on a totally different,ball game you get totally different,stuff but the wolf of shopify theme 3.0,you get a lot here okay so this is the,new theme i've been taking a look at the,demo and in the next video that you guys,should be seeing you guys are actually,going to see me purchase the theme and,use it and we're going to create some,tutorials around it all right so,with shopify 3.0,we all know and i don't know about you,guys but i've been using it for,i like as a company,over four years i mean it's been a long,time um that i've been using these guys,now i've been through their beta their,you know their 1.0 2.0 and here finally,is their 3.0 so to me i'm interested to,see what what it is now i saw the video,the video looks pretty cool to me it,looks like a new version a more refined,version of the other 2.0 theme with a,little bit of added feature so first,thing we're going to do is we can take a,look at the page obviously we know it,boosts our conversion rate and i've made,countless videos on why that is uh in,this video i'll kind of talk about it a,little bit but you could see here they,have a whole bunch of different,uh i guess you could say like images,like uh like a gallery i guess you could,say about what it offers um but without,further ado i'm not going to look at the,page too much because obviously you guys,can do that i'm going to look at the,demo so let's go over here and click,take a look at the demo let's open this,a new tab,and let's go ahead and close this link,out here and let's take a look so this,is the new demo guys of the theme now,i've already saw it before okay so it's,not like this is something i haven't,seen i've seen this before but i figured,we'd show it here so the first thing,that you're gonna notice is this really,really nice big hero banner okay,and um,hero banners are great i'm not gonna be,talking about why they're great or,anything like that for this video we're,just gonna be just ta
After seeing the fifth section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next sixth section about Clickbuy theme shopify
Start dropshipping in less than 10 minutes
Start dropshipping in less than 10 minutes
hey there yasir here from light funnels,and welcome to this video today we're,gonna see how easy it is to get started,selling products on light funnels,so we're gonna take a brand new light,funnels account and we're gonna go from,the idea of having a product to actually,having a funnel that's well designed and,that's ready to accept traffic from your,facebook ads or from your influencers,and so on,so what we're going to cover in this,video is adding a product,so we're going to be using an aliexpress,product you can use this for drop,shipping for example,we will also add product reviews we'll,add an upsell product and then we're,going to set up a funnel and then we're,going to start selling right so let's go,ahead and get started,let's go to aliexpress and see the,products that we are going to be using,so we have this um smartwatch that we're,going to be selling as a front end of,our funnel meaning it's the first,product that the customer will see when,they land on our funnel so we're going,to add this to light funnels you can see,that it has many variants,and it also has several reviews that,we're going to import as well that's our,first product the second product is,going to be the,post purchase upsell which is going to,be this wristband for the actual watch,so once a customer buys our first,product after the checkout they get,presented with this wristband and they,get to choose whether to accept adding,it to their order or not if they accept,you'll be charged with a what we call a,one-click upsell where they just click a,button and they will be charged and this,will result in a higher,average order value for your,for your customers all right,so,let's go ahead and get started so what,we're going to do here is jump in our,brand new light funnels account and,we're going to go to products so we'll,click new product and then in here what,we can do is uh fill in the the form,with our product information all we can,do as well is just click import product,all right so we can import products from,aliexpress and shopify right now and,we're going to add more integrations,later,for,this we just copy the aliexpress,the aliexpress link and paste it here,and then click import,and we're going to give it a few seconds,to import,all right so it's asking me whether i,want to import reviews as well or not so,i will choose yes imported reviews,and it's going to pull the reviews here,so i have the option to filter the,reviews by the number of stars only,reviews in english and so on all right,so i'll just click all reviews and i'll,click import,all right so this is our product in,light funnels it's been imported and,it's ready to be used,okay so you can see that we have all the,images imported here we have all the,variants in here we also have the,reviews in here okay,so,we can change the price,in order to make it like to leave some,margin for the ad spend and for uh our,profit so for the features uh you can,add features information here and this,will be picked up by
After seeing the sixth section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next seventh section about Clickbuy theme shopify
How To Setup Checkout Settings On Shopify Shopify Checkout Page Customization
How To Setup Checkout Settings On Shopify Shopify Checkout Page Customization
hey guys,welcome back to my newest kitchen,and today we're gonna go over a few more,of,our settings last time we did,um shipping settings yes,this time we're gonna do um check out,so first,as usual click on the gear settings then,click on checkout once you're in the,checkout section,there are just a few things we'll be,doing here,i'll go through them one at a time,all right so first,accounts are optional,this makes it so that persons can sign,up with your website,and login like how they do amazon um,just makes them feel a little bit safer,customers can check out using either,their phone number or email,i prefer just using their email,we could test this to see if it improves,the conversion rate,customers can download the shop app yes,and choose to add a phone number after,yes we will require first,and last name company name was the,ebook because burn up cylinder business,is wrestling to customers,address line 2 is optional that's the,apartment number,shipping address phone number is hidden,again we can test um,you can test to see what it does,show typing options at checkout,now this is one way you can get like,extra money from each order,by just having the option for them to,leave a tip,now i'm not gonna do it at this point,i may enable this later but not,at this point,when the shipping is just use the,shipping address as billion address by,default,yes enable address auto completion,um this can be a double-edged,sword because you could end up getting,like a lot of customers coming in and,asking to correct their address,but i think i'll leave it on we'll test,this one as well,automatically archive order this is,after the order has been fulfilled we're,gonna,leave that on and this additional script,section is where where we're gonna put,our,google tracking code or pinterest,tracking code,and stuff like that,email marketing show option checkout,yes,yes let's click on the on the checkout,page to better,the conversion rates,we are going to be using an app for this,so we're not gonna,automatically send abandoned checkouts,and then we hit save,and just like that the account,the checkout settings have been,configured,so guys if you learned something today,if this clarified any issues or doubts,you had,just go ahead and leave a like for me or,subscribe,and share it with someone who needs to,help,all right and if you have any questions,please feel free to comment in the,description below,or comment below,you
After seeing the seventh section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next eighth section about Clickbuy theme shopify
Paid Shopify Theme VS Paid Shopify Apps, Whats Better?
Paid Shopify Theme VS Paid Shopify Apps, Whats Better?
what's up everybody mark with ecom,warriors today we're going to be doing,a competition very video where we,compete essentially,the paid um we put against the paid,shopify theme the wolf shopify theme,against a bunch of paid apps and we'll,see which one is going to reign supreme,basically what we're taking a look at is,the same exact features,but what's going to save you more money,so let's go ahead and take a look at it,so this is the wolf of shopify theme as,you guys,may know it's probably the best,converting theme out there,to date i know there's a whole lot of,themes i've compared this theme to other,themes and i will compare this theme,to more themes in the future but we have,a stock counter we have,a countdown timer um we have an excuse,me,stock countdown timer here we have x,amount sold in the x amount of hours,we have a real a time visitor count we,have a pop-up,uh we have buy it now we have sticky add,to cart,we have a whole bunch of features we,have a special offer box,um so there's all these different,features and they all have,a part to play within the conversions,spectrum right the more of these,features you have,and and the better your marketing is,going to be the more conversions you're,going to have simply that's where you're,going to get,the six percent seven eight percent,conversions and it's actually very,possible in fact,one of my shopify stores i had a 16,conversion rate,and that's actually documented and true,so um you know if you guys want to check,that video out message me i'll send you,the link or something like that or you,could just look through my youtube,channels,it's there right 16 conversion rate now,um let's go ahead and compete so we know,or compare,we know what features the theme has,let's go ahead and take a look so,this is the theme just so we know the,theme is actually 159,so i'm gonna judge it based on that 159,not based on the,the sale price just so everybody knows,okay,um so this is the wolf of shopify theme,like i said this is the website when you,go visit the website you hit this little,shopify button,this is the place to order it you could,take a look at all the features yourself,i'm not going to go through that now,but what we will do is do the comparison,so let's start from the top,the first app is the sales pop-up master,which is this little feature right here,where the little sales pop up,on the bottom left of the screen and the,theme cost or the the,the feature cost 9.99 per month,after a three day free trial so let's go,ahead and pull up a calculator,and let's just write this down this is,what you're going to be paying monthly,for the apps,okay the next one the next feature is,the pretty product pages,uh for seven dollars and ninety cents,per month and basically what this is,going to do,is it's going to help replicate this uh,feature box right here,and the other side feature boxes i know,you guys aren't seeing it in this,example however if you edit different,versions that's why the wolf of shopify,
After seeing the eighth section, I believe you have a general understanding of Clickbuy theme shopify
Continue the next ninth section about Clickbuy theme shopify
The OFFICIAL Shopify Tutorial: Set Up Your Store the Right Way
The OFFICIAL Shopify Tutorial: Set Up Your Store the Right Way
if you guys don't already have your own,ecommerce store it is 2022 what are you,waiting for when life gives you lemons,aka a global pandemic why not make,lemonade and start your own shopify,store and honestly there's no better,time to do it than now,now that online store 2.0 is in full,swing baby if you're not familiar,shopify is a platform that allows you to,sell products online,and online store 2.0 is an updated,version of shopify that's going to give,you guys so much more control than ever,before i'm so excited to show you so you,guys are in for a real treat because,this is part one of a four part series,where you guys are going to learn how to,start a shopify store from scratch and,if you're new to this do not worry at,all because shopify is for beginners,this tutorial this series is going to be,for beginners from literally start to,finish i've got you guys covered,so excited so let's just get into this,what's up you guys i am michelle bally,if you guys are new here learn with,shopify is an official shopify channel,and we are all about teaching you how to,start run and grow an online business so,anything that you want to learn about,becoming an e-commerce business owner,you can find it here you want to learn,facebook ads we got you you want to blow,up your instagram,check so you can learn everything that,you need in order to start run and grow,an online business so if that sounds,like something that you need in your,life then hit subscribe so what is,shopify and is it right for you okay,guys let's get serious for one sec what,is shopify it's a tool that allows you,to sell online simple as that so if you,want to start a side hustle maybe you're,selling like gym equipment,you'd basically go ahead and make an,account with shopify to create an online,store and then you can start making,money so shopify lets you sell online,through a website you can use shopify to,sell in person through a pos,and you can even use shopify to sell on,social media and online marketplaces so,the nice thing about shopify is that it,has these built-in tools that are really,going to help you through digital,marketing you can create execute and,analyze your digital marketing campaigns,also shopify has this amazing single,dashboard to manage your orders your,shipping and your payments pretty much,anywhere you go,and the thing that i like to know is,that millions of the world's most,successful brands are currently using,shopify that being said you can be a big,business and use shopify you can also be,a small business and you can pretty much,sell almost anything guys almost,anything don't get any crazy ideas so,yeah you can be anyone you can be,anywhere and you can use shopify and be,successful,shopify plans and pricing okay so like,any millennial i have a serious fear of,commitment so the fact that shopify has,a 14 day free trial that was pretty,necessary for me i know it would,probably be necessary for some of you,guys as well so what i would recommend,literally before you
Congratulation! You bave finally finished reading Clickbuy theme shopify and believe you bave enougb understending Clickbuy theme shopify
No difficulty
