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":{{- -}},"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.

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 ?

      When installing, Quick View adds a script directly to your published theme to make it load faster. When uninstalling on the Apps page, that script still remains in your theme. Follow these steps to uninstall Quick View completely: Step 1. Uninstall ...
    • How to translate every element of Quick View with Tranzi?

      Although Tranzi can integrate seamlessly with Quick View, there are some fields from Quick View that will not automatically sync to Tranzi and therefore unable to edit, such as View details, See more/less, text on Quick view button, etc.  ...