{"id":67562,"date":"2016-03-30T03:52:18","date_gmt":"2016-03-30T07:52:18","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=67562"},"modified":"2016-04-14T03:05:03","modified_gmt":"2016-04-14T07:05:03","slug":"shopify-how-to-add-product-quantities-to-the-products-pages","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/shopify-how-to-add-product-quantities-to-the-products-pages.html","title":{"rendered":"Shopify. How to add product quantities to the products pages"},"content":{"rendered":"

This tutorial shows how to add product quantities to the products pages in Shopify.<\/p>\r\n\r\nShopify. How to add product quantities to the products pages<\/a>\r\n

By default, quantity box is not included to the product page. Thus, the one can be placed manually via files. <\/p>\r\n

Open admin panel of the website and navigate to Online Store > Themes> ‘…’ button> Edit HTML\/CSS<\/strong>. Search for the ‘product.liquid’ file<\/strong>, located under ‘Templates’ section. You can use the search option available on top. Open this file to edit: <\/p>\r\n\r\n\"Shopify_How_to_add_product_quantities_to_the_products_pages_1\"<\/a>\r\n

Note: <\/strong>make a copy of the original file before editing, so that it can be used to restore product page in case required.<\/p>\r\n

    \r\n
  1. \r\n

    Check the product.liquid file and search for the area to show quantity at<\/strong>. This can be any section of the product page.<\/p><\/li>\r\n

  2. \r\n

    Let’s place the one above Type and Vendor, in the product details section<\/strong>. Find the line for it: <\/p>\r\n 

    <div class=\"product_details\"><\/pre>\r\n  <\/li>\r\n  
  3. \r\n    
    The following lines should be placed below the div class mentioned. Once they are added, their alignment can be updated for easier code comprehension (that’s optional):<\/p>\r\n  
    \r\n<div id=\"variant-inventory\">\r\n{% if product.variants.first.inventory_management == \"shopify\" and product.variants.first.inventory_quantity > 0 %}\r\nWe currently have {{ product.variants.first.inventory_quantity }} in stock.\r\n{% endif %}\r\n<\/div>\r\n<\/pre>\r\n\r\n\"Shopify_How_to_add_product_quantities_to_the_products_pages_2\"<\/a>\r\n<\/li>\r\n  
  4. Next, find the selectCallback<\/strong> function in the same product.liquid\u00a0 file. Find  this piece of code:<\/p>\r\n  
    var selectCallback = function(variant, selector) {<\/pre>\r\n  
    Note: if your theme doesn’t have it, follow the corresponding steps to create one<\/a>.<\/p><\/li>\r\n  
  5. New code should be placed right after the value of selectCallback<\/strong> variable. Copy-paste the following code to the file:<\/p>\r\n  
    \r\n  if (variant) {\r\n  if (variant.inventory_management == \"shopify\" && variant.inventory_policy != \"continue\") {\r\n    if (variant.inventory_quantity > 0) {\r\n      jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');\r\n    } else {\r\n      jQuery('#variant-inventory').text(\"This product is sold out\");\r\n    }\r\n  } else {\r\n    jQuery('#variant-inventory').text(\"This product is available\");\r\n  }\r\n} else {\r\n    jQuery('#variant-inventory').text(\"\");\r\n}<\/pre>\r\n\r\n\"Shopify_How_to_add_product_quantities_to_the_products_pages_3\"<\/a>\r\n  <\/li>\r\n<\/ol>\r\n\r\n
    Save changes applied to the product.liquid file and get back to the products page to check results. Code has been applied respectively. Product quantity is displayed in the required section.<\/p>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nShopify. How to add product quantities to the products pages<\/a>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to add product quantities to the products pages in Shopify.<\/p>\n","protected":false},"author":66,"featured_media":67570,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1771],"tags":[572,542,1795,2419],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/67562"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=67562"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/67562\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/67570"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=67562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=67562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=67562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}