Click the name of the product that you want to change. If you require additional cost to be added it may or may not add the additional cost. In this article, I'd like to take a more in-depth look at one particular template — product.liquid. We have found great success in Infinite Options. The problem is I don't know how to check for the selected variant quantity on the first-page load. in my collection I added '?variant=*here-comes-the-variant-id*' to the link url (like it' done here). What you can do with Product Variant. On my product page I try to access this url parameter via variant.selected (or product.selected) (or even product.selected_or_first_available_variant). You can get the current product's variant ID using below. The options can be different from product to product. How and WHY to get rid of “ship from China” variant in Shopify? You might actually want to use product.selected_or_first_available_variant.id - as I understand it, selected_variant is null if there's no variant in the URL of the page you are on. The variant and option limits can only be increased by using a third-party app from the Shopify App Store. Also in this section. Since Shopify just allows adding maximum 3 options and 100 variants, let the app help you break the limit to display your product options in the most perfect way. The options for that product should be size and color. I'm thinking to use jquery and update the inner-html of a You can access the current product using {{ product | json }}, so your code would look something like var product = {{ product | json }} //when variant selctor changes … For example, one product can use size, color, and style, and another product can use weight, finish, and material. The store owners can know about the list of variants clearly … I am trying to solve this using Javascript and has written the following code in Theme.js file: function initialStockAvailable(){ To change this, Shopify would effectively have to completely change the architecture that the stores are built on. Do either of the following: If you have only one location for your store, then in the Variants section of the product detail page, click Edit beside the product variant. The variant for these options can be a big, red T-shirt. "How can I get that value at runtime? How to check current product Variant quantity in Javascript, https://help.shopify.com/en/themes/liquid/objects/product, debut theme - change font colour on collection image. @benjk. More detailed versions of these general actions may be available: Thus, customers enjoy the shopping experience by selecting items for their desired or custom product. How can I get that value at runtime? In this video,I will show you how to create products in your Shopify store with variants. The variant object has the following attributes: variant.available. This should be right: With product.selected_or_first_available_variant it is working now - I have no clue why I seemed not to work before. Thanks a lot, 'Cause product object has no .selected property, and for variant  it has different meaning, https://help.shopify.com/themes/liquid/objects/product, https://help.shopify.com/themes/liquid/objects/variant#variant-selected. See the timestamps below for more details. Out of the 3 options you've mentioned, only the last one, product.selected_or_first_available_variant references proper variable and property. You can access the current product using {{ product | json }}, so your code would look something like, You can find more info about what's available through a liquid product at https://help.shopify.com/en/themes/liquid/objects/product. On Shopify, you can add only 100 variants and not more than 3 options to one product. For every variant of a product created on Shopify, there’s a unique variant ID. If someone navigates to a specific product variant on my Shopify store using a product link for example : https:xxxxxxxxxxxxxxuv400-sunglasses-for-women?variant=12384642007063. The Shopify API lets you do the following with the Product Variant resource. {% if product.variants.size > 1 %}