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:


    • Related Articles

    • Customize Quick View Popup

      Popup Layout Main image position You can choose to display main product image on the left or on the right of the popup. Thumbnails position The other images can be arranged on the left, right or bottom of the main image, or not to be displayed. ...

    • Design Quick View Button

      Icon Enable 'Show button icon' mode to display Quick View button icon. Choose the icon you want to display from the list. Button on Desktop Text To show text on button, switch 'Show button text' on. When button text is shown, the default text is ...

    • Frequently Asked Questions for Quick View

      What is the difference among Free plan, Basic plan and Premium plan? Please see the comparison table of there plans here. Can I downgrade to Basic after upgrading to Premium plan? Yes you can. To cancel Premium plan, please go to My Profile page > ...

    • How to uninstall Quick View completely ?

      UPDATE (15.06.2023) With the stores installing our app after JUNE 15, 2023, the app does not add code to the theme anymore. Therefore, you don't need to remove anything after uninstalling the app. When installing, Quick View adds a script directly to ...

    • Product Offer

      Product Offer is to show recommended products on the checkout page and encourage customers to buy more before moving to Payment. Let's explore how to set a product offer. Step 1: General Settings Before creating a product offer, you should set up the ...