How to show Product Availability on Quick view

How to show Product Availability on Quick view


To show Availability on quick view, you need to add some code to your theme. 

Follow the simple steps below, or contact us to help.

Step 1:

  1. Go to Online store → Themes → find the theme you want to add availability → Actions → Edit code.


  1. Under Templates folder, click Add a new template


  1. In the popup "Add a new template": choose
    1. Create a new template for: product
    2. called: qikify-quickview-inventory-extra
      (do not change this name)


  1. A new template named "product.qikify-quickview-inventory-extra" is created (it might look different in each theme).


  1. Delete the whole code inside this file and paste this code instead:
  1. {%- layout none -%}
  2. [
  3. {%- for variant in product.variants -%}
  4. {"id":{{- variant.id -}},"inventory_quantity":{{- variant.inventory_quantity | default: 0 -}},"inventory_policy":"{{- variant.inventory_policy | default: 'deny' -}}"}{%- unless forloop.last -%},{%- endunless -%}
  5. {%- endfor -%}
  6. ]


  1. Save.

Step 2:

  1. Go to the theme.liquid under Layout


Press Ctrl+F to find the </head> tag




  1. Paste this script to above the </head>
  1. <script>
  2. QikifyQuickView = {
  3.   show_availability: true,
  4.   availabilityText: 'Availability',
  5.   text: {
  6.     instock: 'In stock',
  7.     willbeinstocksoon: 'Coming soon',
  8.     outofstock: 'Out of stock',
  9.     onlyleft: 'Only [NUMBER] items left',
  10.   },
  11. };
  12. </script>


  1. Save and Done.

Then enable the "Show product availability" in Quick View app. The Availability should show up now.

Contact us if there's any problem.


NOTE:
The color of "Only xx items left" message depends on the inventory:
  1. When there're more than 10 products in stock, it shows in green:

  1. When there're less than 10 products in stock, it shows in yellow:

  1. When there's 0 product in stock, it shows in red: