Selected location rule (done)

The Location Selection feature in the “Multi-Location Inventory Info” app enhances the shopping experience by displaying a location selection pop-up when customers visit the store. This allows customers to choose their preferred store location, and the feature then shows only the inventory available at that selected location. This tailored approach ensures customers see relevant products, improving their shopping experience by reducing frustration and increasing satisfaction with accurate, location-specific inventory information. Additionally, customers can easily switch their selected location at any time through the change location feature.

  • From the Stock and Location Rules, go to “Product Page Inventory Widget Status.” Select the rule type “Location Selection Beta” and ensure that “Force Location Selection” is enabled.
  • To display a location selection pop-up when customers visit the store, enable the checkbox labeled “Display location selection pop-up.” This will trigger the pop-up on the storefront.

The preview will appear like this on the storefront:


configure location selection popup styles and text: #

Configure Location Selection Pop-up Styles and Text:

  • Header Text: Customize the text displayed in the pop-up header.
  • Placeholder Text: Customize the text shown in the location dropdown.
  • Description: Optionally displays additional information on the pop-up.
  • Custom Styles: Provide your own CSS to fully customize the appearance of the
    pop-up.
location settings: #
  • Excluded Location: If your inventory is out of stock at a specific location, select one or more locations to always exclude them from displaying stock information.
  • Location Display Order: Drag and drop the locations to set the order in which they are displayed.
  • Location Display Name: Customize the name of the location as it appears on product pages.
Product Page settings: #
  • Display Only Selected Location’s Stock: Use this option to show stock information for the selected location only. This means only products from those selected locations will be displayed in the popup where you have chosen locations.
  • Selected location label template: Use this setting to create a template for how location-chosen information appears on the product page widget.
  • Copy and paste the “default template value” into the box. You can modify “You are shopping at this location.” and “Change location” as needed.

The preview will appear like this on the storefront:

Sample code: #
You are shopping at this location. <br /> <a href="javascript:window.inventoryInfo.api.showLocationPicker(true)"> Change location </a>

For instance:

Sold out text:

  • Specify the message to display when the app disables the “Add to Cart” button and shows the “sold-out” indicator based on rules or customer tags. You can enter any text you prefer to replace the default “sold out” message. For instance:

Add to cart text:

  • Enter the message to display when the app enables the “Add to Cart” button based on rules or customer tags, specifically when the products are in stock. You can specify any text you prefer to replace the default message. For instance:

Text element selector:

  • If the text of the “Add to Cart” button is enclosed within an HTML element, please specify the selector for that element.

Additional info message:

For instance:

Additional note:
If the product is unavailable at a location, it will remain visible, but the inventory app will restrict product purchases.

How to set the Location selection header icon: #

You can also set a header icon for the location selection popup. To set it please follow the guide below:

  • Click on the right button and inspect the cart icon.
  • Copy the class associated with the cart icon.
  • From the online store, go to Themes.
  • Select “Edit code” for the published theme.
  • Use the “Filter files” search to locate “header.liquid”
  • Press Ctrl+F to open the search field.
  • Paste the copied class into the search field and click “Next” to locate its code section.
  • Insert the following header icon code below the cart icon’s existing code section:
Sample code: #
<a href="javascript:window.inventoryInfo.api.showLocationPicker()" class="header__icon link focus-inset" style="position:relative;top:9px;left:23px;">
  <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
    <path d="M1.791 2.253l-.597 3.583A1 1 0 002.18 7h.893a1.5 1.5 0 001.342-.83L5 5l.585 1.17A1.5 1.5 0 006.927 7h1.146a1.5 1.5 0 001.342-.83L10 5l.585 1.17a1.5 1.5 0 001.342.83h1.146a1.5 1.5 0 001.342-.83L15 5l.585 1.17a1.5 1.5 0 001.342.83h.893a1 1 0 00.986-1.164l-.597-3.583A1.5 1.5 0 0016.729 1H3.271a1.5 1.5 0 00-1.48 1.253z" fill="#000"></path>
    <path d="M18 9H2v8.5A1.5 1.5 0 003.5 19H7v-7h6v7h3.5a1.5 1.5 0 001.5-1.5V9z" fill="#00"></path>
  </svg>
</a>
To change the icon color: #
  1. Locate the fill attribute within the <path> tags of the SVG code.
  2. Replace the existing hex code with your desired color’s hex code.

For example, to change the icon color to red, modify the code like this:

If you have any questions or concerns, please reach out to our support team.

What are your feelings