#1 TikTok Ads Spy Tool

A Better Way to Make TikTok Ads Dropshipping & TikTok For Business

  • Find TikTok winning products & TikTok dropshipping ads.
  • Analyze TikTok advertisers
  • Get the Latest TikTok Shop Data.
Try It Free

shopify cart attributes

Published on: January 31 2023 by pipiads

Line Item PropertyとCart attributeで商品・カートページをもっと便利に【Hello Shopify Themes】

※動画内で言い損ねてしまったのですが、 こちらのCart attribute入力要素にも、 form属性としてform="cart" 属性の記述をお忘れなく。.

Add Messages To The Product Pages By Using Tags - 2022 FREE Shopify Tutorial

in this video, you're gonna learn a little hack on how to add specific messages to specific products- not all of your products, just the ones you want- and we're gonna do this little hack by using tags. it's gonna be super easy. at the end it's gonna look amazing. so stik to the end. bonjour, shopify. well, my name is andrew from e-com experts dot io. as you know, this is the green hoodie. we're doing shopify coding. below in the description there is a link. if you follow that link put in your email address, you will get the full document with all of the code that we're using in right here, so you can just copy and paste the code instead of having to figure it out. all right, let's just jump straight into our store. so, welcome to our demo store right here. and just to show that i'm not bamboozling you, um, i'm going to this amazing chakra bracelet. oh, my god, that was weird. i got stuck there for a second. um, this amazing shot crap bracelet. um, let's view it. you know it looks like this: there's no message. and if i do message here or something like that, nothing, nothing's gonna happen. if i add the tag message here, nothing's gonna happen. there is no message. i feel betrayed, but we're gonna change that right now. so, uh, in order to change that, it's actually really simple. you're going to go to your online store, right here. you're going to wait until it loads and when it's loaded, you're going to go to the live theme, or the theme you want to make a change on, you're going to click actions and you're going to click duplicate. if you forget this, you're an idiot. do not skip this step, because if you make a mistake in your code and you're not good enough with code that you can't figure out what mistake you made- it's crude. you have to hire a developer, just duplicate the theme. now you have a backup, you work on the backup and if you mess up, you just delete the backup and you start up. all right, cool, we're on the same page. um, you're gonna click actions. once the duplication is done, you're going to click actions and you're going to click edit code. and you have some drum roll in the back because right now, ladies and gentlemen, you have arrived to the code editor. all right, once you're here, we're going to go here, right here, on the left, we're going to find the sections section- it's so confusing, uh, the sections. and then we're going to look for product dash template. uh, let's see where are your recommendations. product template: here we go. so product template dot liquid, again under the sections. if you don't have it, something that looks similar, the naming might be a little bit different. i mean, there's over hundreds of teams out there and there's fast one, slow ones. i made a video about that um, about which ones are fast, which ones are slow, and they're all very different. but you know it's gonna be named something like product templateliquid, as long as it's in the section section. this is confusing. all right, once we're there, let's say i want to add the message to above the add to cart. so we're going to click control f on windows, command if on a mac, and we're going to do add, and then this is going to pop up: a button type, submit. oh, if your button type is submit, that is your add to cart button, considering one of the products templates. um, so this entire section right here. that's the beginning of a button, that's the end of the button. so if i want to write something above the button, i do a couple of enters. spacings do not matter in html and css, so i create a bunch of white space and i paste the code that i've provided. copy and paste, boom. i know i'm going to make it look a little bit prettier like this. you don't? i recommend you doing it, but you don't have to do it a little bit more, it's a little bit too much. and then i'm going to even do a little gift to the next person that's going to be playing in this theme. start code by tik. all right, andrew, why are you doing this? well, you know this way, the next developer that walks into this theme, they don't have to spend hours trying to figure out why there is a tag being called here and what's happening. no, they just look at the comments. when it's great, it's commented out, it's not real code, it's just a comment. and they say, oh, this is the start of the code. message by tag: okay, this is the end of the code for the message by tag. maybe i should do it like, because even with comments, it's not clear sometimes, as you can see. anyway, if you don't want to put the grey part in of the commenting, just forget it. just copy and paste what is written and you're good to go. basically, what it says is: you know, if you find the tag and the con. the tag contains the word new message. then remove the word new message from the tag and paste whatever comes after the word new message right above the cart button. now, if you don't want it to appear above the card button, you can move this, you can play around with it so you can- um, you know, cut and you can paste this on other places, as long as it's in the product dash template, dot liquids. you kind of have to try it for yourself, you know. if you don't want it above the add to cart button, you can do it below the arctik card button. you can do it above, like the description. you can do it below the description, above the pro, above the images. you can kind of paste it like here. or you can paste it here, or you can paste it. you know, you kind of play around with it and then look at the result and then come back and play around with it again. we're going to keep it simple. we're going to do it above the add to cart. all right, save. and that was it for the code. now, uh, one very important thing is that you need to copy this new message. you don't need to copy it, but you need the spelling exactly the same, with the caps exactly at the same places. so no caps for new, but m in caps for message. that's really important because you're going to take that like i said, take it like this. you're going to copy it. that's the easiest way. now we're going to go to products. i found my sharper base, all right, and it's here. products shack replace it, all right. so you go to the shop bracelet right here. you can paste what we have just written and you say: this product is available for pick up at the boutique. just text me, all right. so you're not supposed to write an entire bible here like this is for messages and notes and stuff like that. uh, it doesn't work, for it could work for a product description. just don't do it. it's really not meant to work like that for a product description. it's a hack. so once you have that, yeah, you add that new message. so you got it here as a tag now and then you save it and if you view it, it's not going to appear because i forgot to put our theme life. so you go back to the online store. you go to online store right here and remember we worked on this one last save two minutes ago. we did not touch this one, so this one is not live. so we do actions, we do publish. are you sure you want to publish this? yes, we're sure. we want the whole world to see our new code. all right, now it's live. so i go back to products. check my bracelets. i view it. i guess it was open here. i could have just. this product is available for pickup at the boutique. just text me. oh, but, andrew, does it appear on all of them? no, look, origami, it's not here. silver treated necklaces ain't there. but, andrew, i want the guardian angel earrings. god, where did i come up with these names? um, i want there to be a message there. okay, fair enough, the guardian angel earrings. look at that. look at that. i can do tags. uh, paste new message. yep, here is a specific message. you get the point. you, you're smart enough. you're like, oh, let me get it, and that that's basically it. it's oh, it takes a moment. close preview. why are you not showing yet? view new message. here is a specific. why are you not working? here is a partikular message. there you go. it takes a moment before it uploads, but it did work. so, yes, if you're building your store like this, make sure to check out this video that we did about the seven steps that you kind of have to check out before you start building stor.

More:The Biggest Health Affiliate Program To Join In 2020 ( Make Money Online)

How To Add Cart Button and Variant Selector on Collection Page of Shopify

Hi guys, welcome back to WebSensePro. I'm your host, Bilal Naseer, with another Shopify how-to video. in this video, we will learn how to add a variant selector on your collection page. also, if you want to add a buy now button to your collection page, you can do that by implementing this tutorial. okay, so that's how your collection page will look like after following this tutorial. so I'm gonna go to my best selling products and that's how the collection page will look like. so there will be a drop-down menu from where you can select your variant and if you don't have any variant on your product, you will see just a buy now button. so let's test this first if it's working properly. so in this t-shirt I have four colors: red, black and white. now let's try adding the white to your card. click on buy now and it will add the white color to your card. now let's try one more time. so in this case we have multiple variations, so we have black color and small size. you can see it's displaying the size and color and if the products are sold out, it's unselectable, so you cannot add the sold out products to cart. cool, right now let's try adding the blue large. click on buy now and here we go: the blue large classes are added to your card. so if you want to learn how to implement this, please stik to the video. don't forget to subscribe to the channel, which will motivate me to create more Shopify outing videos, wordpress videos and web designing and development videos. without further ado, let's jump into the code. so, guys, that's how the originally Shopify dawn theme collection page looks like, where, in order to add the product to cart, you will have to go to the product and then select any of the variation and then click on add to cart to add product to the cart. after implementing this tutorial, you'll have your collection page look like this, where you will have option to select variant and add it to the cart directly from your collection page. okay, so now let's implement it, and first go to your backend by navigating to slash admin, and here's how your Shopify backend will look like. click on the online store from your left-hand menu and here's our currently active theme. so I'm adding this code to dawn 6.0.2. this might not work on any other theme, because i haven't tested it on any other team. so if you want to learn how to implement this on your own theme, comment on the video below and I'll try to create a tutorial for that specific theme as soon as possible. okay, we'll be editing our code by clicking on actions, then edit code, and before editing the code, make sure to duplicate it. once you duplicate theme, you'll have your copy of dawn like this and you can easily revert it back if you mess up anything with the code or you mistakenly do anything wrong. okay, now let's go to our code editor by clicking on actions and then edit code, and here we will file main-collection-product-gridliquid. so that's the file where we will be adding a code snippet. click on the file and scroll down to line number 121, 121. okay, so that's a line where our li is closing. so add a line break before ally, so we'll be adding our code within this ally and after this ending bracket. so that's where you need to add the code. now i already have the code ready, so i'm just going to copy it and paste it here. don't worry about the code. i'll provide all of the code in detailed instructions. in the youtube video description you'll find a blog post link where you'll have all the details. okay, now click on save. and now let's go back to a collection page and hit refresh. okay. so, as you can see, we have our drop-down and the buy now button, but it's a little messed up. so what we're going to do, we'll add some css. so in the first row we are unable to see the buy now button because it's behind the next slime. so we'll fix all of these issue by adding some css. and in order to do that, go back to your code editor, search for basecss file, scroll down to the bottom and add the css code which i already have ready. i'm just going to copy the css code and paste it on the bottom of css file. again, don't worry about the code. you will find all of those in video description. click on save and now go back to your collection page. hit refresh and here we go. our code is working completely fine. we can easily add our variant directly from our collection page. co right, and this code will not disturb any of your other pages, any of the product page or any of the single product page, because it's specifically made to run on your collection pages. so if you go to the liquid code which we added on the top of it, it says if request, that if request dot page underscore type is equal to collection. so this whole code which we added will only work if the page is collection page. it won't work on any other page. so it won't mess up any of your product page or any of your single product page, because the code which we added is in the main collection product grid which might affect your other uh pages, other single product pages, but it won't, as we already have added the check. and that's it for the tutorial, guys. if you like it, don't forget to comment and ask as many questions as you want in the youtube video comments. until next video. have a great day.

More:Why EXP Realty Will Change The Way You Look At Real Estate Forever

A Brand New Type Of Shopify Apps: Checkout Extensions

hey, everyone young here codingwithyancom check out extensions: a brand new way of adding features or customizations to the checkout of Shopify Plus stores and also very interesting opportunity if you ever wanted to build your own Shopify app, because it's basically an entirely new category and pretty untapped. so today we'll go over why and when to consider checkout extensions in the first place, what they are exactly and how we can get started today, and I really hope you find some value in this. so let's have a look. all right, so we all know that checkout is where the magic happens. customers put in their names, their shipping address, they select the payment method and cha-ching- the sound we all love- or dark complete. now, if you've been in the space for a bit, you'll probably also know that the checkout on almost every Shopify store out there looks pretty much the same, and it's because, unless you're on Shopify plus, there are only a handful of customizations that we can make. namely, these customizations include changing or replacing the logo, changing the text color. we can also do some minor customizations on the order status page, or you can add a post purchase Page by installing one of the corresponding apps out there. all right now, to be fair, there are still quite a few people out there who find these options a bit limiting. I totally understand that. but also to be fully honest with you- and I might be throwing myself under the bus here a bit- but personally I think most people shouldn't have the ability to customize the checkout, and that's simply because they have no idea what they're doing, and I'm not even excluding myself here. but think about this way: the default checkout has been used by millions of merchants at this point and Shopify literally measures and tracks every single step of the process. and also the checkout has gone through dozens of iterations- a, b, split tests- and it's just in the company's best interest to keep the conversion rate as high as humanly possible, because Shopify is directly financially incentivized to do so. and if I had to bet on either me, who thinks what looks good, versus Shopify as a multi-billion dollar company that it is, with teams of developers and data analysts and much more data points than I have, I think I would bet on them every single time. right, and I'm also not here to tell anyone what to do, but maybe that's at least a thought to consider before we go, before we go on the rant about the default checkout next time. fair enough, awesome. so then let's actually have a look at what the new checkout extensions are exactly. because, despite everything that I just said, every store is still unique, and if you can create, let's say, a good looking upsell section on a Shopify Plus store that's maybe doing a million per year in turnover, then even the one percent uplift, which is like a super conservative estimate, would already be an extra 10K per year. so I think you would all agree that it's still worth to test these things right. okay now, in the past, the way you would make customizations on a Shopify Plus store was by texting the support and then they would give you access to the checkoutliquid file, and that was awesome because you could just add your HTML, CSS and JavaScript directly in there and, yeah, you were pretty much in control. so this was an awesome time. however, yeah, you see, this is an episode with ups and downs. this approach came with two major risks. first, you could introduce breaking changes, which actually happened to me once and I burned about 15 000 in clients Revenue- um also have a video about that story- and then, second, your code also needed frequent maintenance, because whenever there was an update to the checkout, you just had to catch up with changing elements or changing naming selectors. to overcome these challenges, Shopify now introduced the new checkout extensions, which are basically custom or public apps that you can write, which is great, because it also means you can sell and distribute them on the Shopify app store. and to speed up the development, you will also find pre-built UI components, such as text blocks, Choice lists, check boxes, grid layouts, and all these elements are already styled similar to the rest of the checkout so that you can easily create this native or coherent design experience. the new checkout extensions are also a lot more robust, and in order to place them, we can use so-called extension points, though these are kind of like predefined placement points throughout the checkout, and we can then anchor our new elements to them. and the best news of oil, similar to the theme customizer, Merchants will also be able to move your checkout extensions around or replace content by using a new checkout customizer, if you coded your elements in a dynamic way. but how epic is that? okay? so now that we understand what the new checkout extensions are, let's also tok about how we can get practikally started, like how we can get started with building them, and a few things we need up front here include git installed on your local computer, then a Shopify partner account. a development store with at least one product in there just just makes it easier to preview the checkout, and while creating that store, it's also super important that we created, under the checkout extensions, developer preview, because at the time I'm recording this, the checkout extensions are not publicly available on all the stores just yet. yeah, like this is how brand new they are, and you also want to make sure that the email address you enter there is the exact same that you use for your Shopify partner account, and if that's not the case, you might just want to go ahead and create the store and then change it afterwards in the user settings. um, or at least that's what I had to do in order to authentikate my app later, and yeah, it took me a bit of time to figure that out, so it might save you a couple minutes here. further, we then also need to have nodejs installed, as well as a package manager such as yarn or npm, and that's because we're going to be using the new Shopify CLI version 3.0, which is awesome because the installation has been simplified dramatikally and now we can just use one single command to instantiate a new app project and all the dependencies will be installed automatikally, as well as the CLI itself. yeah, so that's amazing. and then, lastly, we just need an engrock account to surf the app locally while still under development, and the account is going to be free of charge, but we just need to grab up the access token from the dashboard. alright, now, assuming that you have everything ready, and of course you will also find links to the best resources for everything that I just mentioned in the description, but assuming you're ready. now it's time to bring up visual studio code, and on my desktop I already created this development folder here and then brought it up in vs code. if you don't know how that works, just you can just click on file here and then open folder and then select it, and then next I want to bring up the terminal so you can either click on this gear icon here and then command palette, or just press Ctrl, shift and P and then view toggle terminal right. and here you can also see that one of the main benefits of bringing up a folder in vs code is that the working directory gets automatikally set to that folder and otherwise you would have to change directory to navigate there. okay, so now then let's get started with the First Command, and we're just going to start by typing yarn, create, add, Shopify, slash app, and then hit enter. now it's installing some dependencies, so we're just going to wait for that to finish. here we need to enter a name for our app. for now, we're just going to go with checkout app, 10 points for creativity, and then we can select which template we're going to be using. um, and personally, I only tested the nodejs templates and that's also what I'm most familiar with, so let's just select that one and after all the dependencies are installed, we should fin.

Shopify Theme Build: Theme Cart JS Intro - Episode 6

hey everybody, i'm sam webb and this is part six of my shopify theme build series. we're getting really close to finishing up some of the simple templates and we're starting to get to a point where i'm going to want to add a bit of javascript to to kind of take it to the next level. one of those areas is the cart, and today we're going to be adding a library that shopify built called theme cart, to help with that. the first thing we want to do is we want to go over to npm, which is a package manager for javascript, and we want to look up shopify. so we're gonna, if you look at his name right here at shopify slash theme hyphen cart, and this is shopify's javascript library made for interacting with the cart. now, before we get into implementation, let's just have a quick look at this documentation. so we've got the getting started here and we'll be looking at that in a minute, but before that, let's let's scroll down here and look at some of the different methods we have available. we've got this get state function- that that just gets the state of the cart, so it gets all the information about the cart, and then, further down, we've got add item. we've got update item and remove item, clear items, and so these are just a bunch of different functions that will allow us to either update the cart or get information about the car. so if you ever have any questions about how any of this works, make sure you come back to this. now, all these things that are in red like key here, these link out to somewhere else, right, so get item and it says pass in key, which isn't explained here. doesn't make sense, and so if we click key really quickly it takes us to the object documentation for a line item, and so this is why i was so big on a previous video about this object page is because a lot of things end up coming back to just looking at the objects and and getting understanding about what properties are on these objects. going back to that theme card documentation, scroll back up to the top to getting started so that we can get this added into our store within our project. in the terminal we need to add: add this package with yarn add and then, within the files that we're going to use it, we need to import it. first things first, let's do the yarn ad at shopify slash theme cart as we see we've got, we got our successes there. so you see that it's been installed, we see that version 4.0.2 has been installed and now we're good to go. we're not really going to be making any changes to the front end right now. i just want to get this added for later use, because when it comes to adding products to cart, updating our cart and just different things that i'm going to be doing with the car, in the long run we're going to work, we're going to end up needing this librarian, so it's good to get it installed early, open up, inspect. we're going to be looking at the console and we're going to be doing most of our most. most of today is going to be within the console and within the code. now, before we write any code, i want to mention that before, before you're going to be able to do this, there needs to be an update to the workflow. now, if you're start, if you're, if you're using workshop and you're using this specific workflow, if you, if you're creating a new workflow after this video, then you shouldn't need to do this step. but for anybody who already started working with their workflow before today, you're going to need to to make a quick update. and so let's open up workflow and let's go into tasks and theme, and so there are two lines that you need to update: line number. so line number four, where we have this const resolve and then everything else. we're going to need to add this line and then, within plugins- before this was an empty array- we're going to need to add this resolve function here and what this will do is it will allow- it will allow the workflow to resolve any node modules that you're using. if you have a shopify plus and you do have checkout enabled, then you'll also want to do that same exact thing within checkout. and also, if i actually stop running this for a second, you're going to need to. you're also going to need to install this, and so, the same way that we just installed theme cart, we're also going to need to install this. so i already have it installed. but what you would do is yarn, add and then paste that in, and then you, if you want this to be a dev dependency, you can do dash dash dev. and if we look into packagejson, you'll see that we have a plug-in node resolve at version 11 within dev dependencies, right, and you'll also see that within normal dependencies we have a shopify theme card up here. so now, moving on to actually implementing this, we can go into source and let's open up scripts and themejs, but what we're going to do is we want to test cart now. in the long run we're going to get more into javascript later on and into how you should be formatting your javascript and how you should be structuring these folders, but for now we're just gonna do everything within themejs, just because we're just testing this out, but we're not actually using it yet. so if we go back to the documentation, we have the import star as cart from shopify themed cars. let's copy that and paste it in here. and before we save this, let me yarn, start again, just to get this back to watching file changes. and so now i want to see if, if this works at all. so let's say, consoleinfo, cart, refresh the page. now we see we've got this, this object here that comes after the example code, and so that's all the functions that come with theme card. and so let's try one of them and i'll say, uh, cart, dot, dot, get state. now run that function. now, before i run this, this is a promise based library, so what we're going to get back is just a promise, refresh that. you see it says promise and status is pending, and so this isn't the proper way that you would want to to display the information from this. instead, what we would do is if i get rid of this and i say cart dot, and now when i do cart dot, you can see that i get these, this information about the different functions that are on it, which is pretty handy. so i'll pick git state then, and then we just say data, consoleinfo, data, right, refresh that, and now we see an object. that is all the actual cart data. so we've got our attributes, which we don't have any on our cart right now. we've got any discounts that are applied and since we have- uh at this, today we have i have a black friday, cyber monday sale running and so we've got this 15 percent off sale here that you can see that that's added to the cart. if we go down here, we see item car, item count two. so we got two items in the cart and you could see, we can see all the pricing and and all the different information on the cart. one thing you may run into is third parties who who need to add products to cart for whatever reason and you don't want the process to be difficult, right, and so, to make it easy, what you can do is you can expose this library to the window. so right now, if we go back to the code, right, you'll see that we have this cart object that has a bunch of information on it. but if i were to type cart in in here in the browser, we get an error, a reference error. card is not defined, it doesn't exist, and that's because the way this workflow works, it does a bunch of different things to transpile the code and it bundles it up into this one kind of large function and then all that information within that function is kind of contained within it. right, you can't reach into it to get the information, but there are ways to to reveal things: window dot, cart. i'm going to do a capital c equals cart. if i save that and go back to the front end, first i'm going to go window that cart, just to show you that it doesn't exist, right, and then, but if i refresh the page, do the same thing. now we have the same get state and now you can run tests within the browser. you actually don't have to put window, you can just do cart dot get state data. there we go that, get state about that, then it states a function and then dive.

21 - How Product Add To Cart Form works in Shopify

hey, welcome to another video. in this video i'm going to show you, behind the scene of product form at record, how exactly product uh act record is working behind the scene and what are the requirements. before we jump into the advanced ejects at record, it is important to understand how the basic r2 card is working. so in the previous video we switched from shopify cli to shopify team kit. in this video let's see how exactly we are going to develop our theme for the continuous of the videos. so now, before we like using cli, we just we just run the shopify um theme serve. now what we have to do is we have to do a theme watch, because we are, we are using team kit. when you run a team watch, it is going to read your config file and it is going to watch for the theme that you are modifying, which is this thing for me. now, if i open the config- this is the configuration we did in the previous video. now, to have a watcher for the css, we have to again, like we have to run npx um mix watch. this one is for the watcher to compile our css television css i mean. so now our development setup is ready. of course, this is processing the css and nothing much to change. let's dive deep and see how exactly this is going to work. so, behind the scene, i did some designing in here, but this is actual chord. it's still here. now, if i come to my code, it is in the main product, the liquid. so let me just collapse some of this. uh, so we can understand where we are. this is title. this is how we display the price. we toked about it in the previous video and behind this price there is something called. there is also a product form. this is actually how you define a product form. you just use that liquid form in here. you pass the product. this is the product that you are passing and the id is going to be this id. what is this? this is installment. installment is a for shopify shop pay. shop is like after speed, if you are not familiar with this term: after space. basically, you are not paying the full price of the product, you are paying in a four installments. so if a shop is supporting after speed, they can also support the shopify shopee, which is new. by shopify they see a lot of benefits on after play. now they introduce their own project, which is shopee. this is for shopping that shows under the price. that's saying you can in. you can buy this product and pay it in four installments. next up is the description. i added just a little bit margin top and bottom. this is the custom liquid code. this is collapsible. for now we are going to touch it. we will write our own custom. this is the product quantity selector. great, we have like uh written this, but i will come back to this and we will refactor it in the future. videos. this is the pop-up uh. each of them are like forms in here and let's see, this is the variant selector. they call variant picker. we will come back to this also. it is very important, but for now let's just continue going for the rest of it. this is no script means if they do not support javascript, which this component does not exist, then this one will run. okay. they have like a store availability in here, product rating. all of them are great. this is what we want. product buy now button. so this is, by now, by far like there is the uh product for me in here that they have like they have put in here. now, if i come to the console and try to add product to the card. let me just do a refresh by default, since we remove a lot of the codes. we add it to the cart. we see an error, something like this, from product form. i'm going to remove that. i'm not going to use this because we are writing our own custom in the future, like in the next video. so this time, if i refresh it, uh, let's add it to the card- it is still the same error because it didn't pick the changes. okay, cool, sometimes it takes one or two seconds, so that we should remember that now. add to cart. it is adding to the card and sending a post request to this url, but we see an error, invalid item, something like this. if you are getting this, you see it is a post request to this url, but it is 400 means one of the items are missing. so to to add product to the card, all you need is one item, that is the varian id. so if you pass a variant id to the shop shopify card, then software will automatikally add the quantity of one to that. so how does that work? if i scroll down in here, let me come to this: buy. now you see this product form again is started in here behind the scene. it has an, a name called id. this input, it is a hidden. what is the value of this? the value of this is: selected variant id, select it or first. the reason the use is selected or first is because sometimes the product is automatikally selected. let's say they have selected the size- large or medium or small, something like that- and they put the id. we'll, we will focus more on that in the future, but for now this is the id. here is the thing: if a form is disabled, that value will not be sent to this product form. let me show you what i mean. so you see, this is like disabled in here. i'm going to remove this for now. uh, let's go back to the browser. i'm going to come back to the product page. i didn't save it. i notiked that. so here's the thing. you see, this form, it is sending a post request to card, but the input that we have in here for this uh name, it is disabled. so if it is disabled, then that data will not be sent. so i will come to the code. i will save it this time. let's come back, refresh it now. you see, oh, it's still disabled. okay, let's refresh again. the stable is gone from this in this input hidden. now if we add it to the card, it should add the product to the card. okay, it was successful. product is in the cart. let's go back to catalog, to the product and let's add it again. now it is working just fine. this is exactly how it works like. all you need is, uh, an input with a name of id and then pass the variant id. what is the varian id? if i open the same product in a new tab and add the json extension, i can see the structure of the product. it has variance. if each product has variance, some of them has one. they have like it is called, they have default variant. uh, since this is the default title, this is the id and the product id and product variant is different. variant is what software i want, not the product id, not this one. this is what shop 51. so if you want to access it in liquid, you will use the selected or first available variantid. then it will put it in here. now, what else is like extra in here? i'm going to remove a lot of the codes. let's remove this loader for now. we will add a nicer one in the future. what else we have in here. these are a lot of codes. let me give it a unique ad to cart like button. so it should be add to cart button. the reason i put this is because some apps require an a unique code for the art culture, for example, facebook, facebook pixel. if you wanna like, trigger a custom event, you have to have a custom class in here. so that is important. we do need a button. we do need this full uh width button because we are using kelvin and everything else should be enough for this. and what is this? the last one? okay, the last one is this: disable if product is not available, means equal to false. then it will disable the arch card itself. this one is the dynamic checkouts, the checkouts that you see in here. i come here. let's go to the product page. these are the dynamic checkout. now, if it is not showing for you, the reason is because you did not add your payment in the browser. so if i'm using it safari, then it will show apple pay for me. that is call it dynamic. it will dynamically like: add me to the checkout. let's just go to the checkout now. this is all you need to know. just add it in here now. one more thing, if you have like, notike this: if you add more quantity, let's add to the card. then the quantity is not going to work. let me show you again. i'm removing it. let's go back to the product page. i'm going to come here now. we add some quantity in here, three like four. if we add it to the curve, it is adding one to the card, because in shopify, if i come back to this product,