Hi. How can we help?

Search

Adding stock levels per location to a theme's code

You can allow customers to see the in-store availability of products and variants by adding code to your theme. This feature has already been added for Lightspeed owned themes like Ignite.

  1. Edit your theme's code.
  2. In the Pages section, select product.rain.
  3. Paste this snippet below the Availability label or wherever you prefer the element to appear.  
    {% if theme.inventory_per_location and theme.inventory_per_location != 'disabled' and product.stock.track %}
    <table>  
    <tr class="omni-location-inventory">
        <td>{{ 'Available in store' | t }}:</td>
        <td class="product-inventory-location-label" id="productLocationInventory">{{ 'Check availability' | t }}</td>
      </tr>
    </table>
      {% include 'blocks/omni-location-inventory.rain' %}
    {% endif %}

    Image: Shows an example of where to add the code you need to enter.

  4. Save your work.
  5. Select Close.

    Image: Shows an example of how fields you need to enter.

     
  6. Select More > Manage settings.
  7. Select Add setting.
  8. For Title, type Inventory per location [Omnichannel Only].
  9. For Type, choose Select.
  10. Select Save.
  11. For Category, type Display settings.
  12. For description, type If your Omnichannel store has more than one location, customers can check the stock level at each location.
  13. For Key, type inventory_per_location. This exact key is required.
  14. For Options, the keys disabled, only_text and show_levels cannot be changed. Type:
    disabled: Do not show in-store inventory levels
    only_text: Show inventory as in stock/out of stock
    show_levels: Show live inventory numbers
  15. For Default value, select Do not show in-store inventory levels.
  16. For Section, select Pages.
  17. For Apply to, select Product details.
  18. Save your changes.

Testing the customer experience

  1. Create or log in to a Retail account connected to an eCom store.
  2. Go to Settings.
  3. Select Locations.
  4. Add at least 2 locations.
  5. Go to Inventory.
  6. Select Item search and create or confirm an item :
    • Has inventory in at least location.
    • Is published to eCom.
  7. Log in to the eCom store admin and go to Design.
  8. Select Edit theme.

  9. Example of in stock / out of stock Image. Shows an image of the popup customers would see. It is without stock values.

    Example of live stock numbers     Image. Shows an image of the popup customers would see. It has the stock levels as numbers.

    In the dropdown, select Product details.
  10. Select Display settings.
  11. For Inventory per location, select either:
    1. Show inventory as in stock/out of stock
    2. Show live stock numbers.
  12. Select Publish.
  13. Go back by selecting the Theme editor breadcrumb, then Back to Home.
  14. Go to Products.
  15. Open the product with inventory by clicking on its title.
  16. Ensure it's visibility is set to either always visible or visible when in stock.
  17. Select View in Store.
  18. Select the Check availability button.
    Image: Shows arrow hovering over the check availability link.
  19. Ensure the availability for each location appears in the pop-up.

Troubleshooting and advanced implementations

  • The html tag related to Check availability (in the example above it is the <td>) should be within the id equal to productLocationInventory as we use this id to call the modal.
  • The modal that we have created to show the inventory per location is formed in: {% include 'blocks/omni-location-inventory.rain' %}
  • For advanced implementations - The storefront endpoint that is called to determine inventory availability per location is https://[shopurl].com/product-inventory/?id=[productVariantId]
    • IMPORTANT: This should only be called after a user action such as clicking a link and should not be used on page load.

Was this article helpful?

0 out of 0 found this helpful