Support

Display per-location inventory on product pages

Updated on September 30, 2021

Notice: this is an Advanced tutorial that requires basic knowledge of HTML and Liquid.

To embed per-location inventory on product pages, you will have to add a line of HTML to your product pages.

  • Navigate to the Online Store section of the Shopify admin. On your live theme, select Actions and then Edit code.
  • Find the file that is used to render your product page HTML. It’s typically product.liquid in Templates or product-template.liquid in Sections, but this can vary depending on which theme you’re using.
  • Find the area of the HTML where you would like to show the inventory per location and paste in the following HTML snippet

<div data-alpaca-inventory-list></div>

Alternatively, you can make the inventory view pop up in a modal by adding the following attribute to an existing HTML element:

data-alpaca-inventory

Either one of these embedding methods accepts an optional value to filter the locations by distance, based on the IP address of your customer. Here are two examples:

<div data-alpaca-inventory-list="filter-by-distance"></div>

data-alpaca-inventory="filter-by-distance"

Once you’re done, click Save. Now your product pages should display per-location inventory.


More support articles

Hide irrelevant rates

Only show the pickup or delivery rate the customer already selected

Updated on December 11, 2021

Custom messaging for ineligible carts and locations

Notify users when their cart or location isn't eligible for pickup or delivery

Updated on June 14, 2021

Location-specific notifications

Notify locations when they receive orders

Updated on May 18, 2021

Require advance notice for scheduled pickup / delivery

Specify how much time you need to prepare for pickup and delivery orders.

Updated on April 8, 2021

Configure your own Google Maps API key

How to get a Google Maps API key so you can enable address autocomplete

Updated on April 8, 2021

Disable scheduling until orders are marked as packed

Don't let customers schedule a pickup or delivery until the order is marked as packed

Updated on April 8, 2021

Prevent out-of-stock inventory when checking out

Prompt customers to remove out-of-stock inventory when they try to check out

Updated on April 6, 2021

How to show Alpaca's rates in your checkout

Add Alpaca rates to your Shopify shipping profiles

Updated on April 6, 2021

Theme integration placement

Control where Alpaca appears on your theme

Updated on March 26, 2021

Removing Alpaca from your theme

How to completely remove Alpaca from your online store

Updated on March 24, 2021

Customize Shopify's native email and SMS notifications

How to display pickup information in your email and SMS notifications

Updated on March 23, 2021

Update an order's delivery method

Manually change an order's delivery method and/or scheduled date and time

Updated on March 22, 2021

Disable rescheduling

Don't let your customers reschedule their pickup/delivery date and time

Updated on March 17, 2021

Carrier Service

How Alpaca adds pickup and delivery rates to your checkout

Updated on March 17, 2021

Prevent mixed carts

Prompt customers to remove items which aren't eligible for their selected delivery method.

Updated on March 16, 2021

Removing the shipping option from delivery methods

How to hide the shipping delivery method in Alpaca's theme integration

Updated on March 6, 2021

Require customers to schedule a pickup/delivery before checkout

Ensure your customers pick a time before completing their checkout

Updated on March 5, 2021

Non-physical items and shipping rates

Why shipping rates and delivery methods may not appear on your website

Updated on March 5, 2021

Optimized local delivery routes

Generate optimized delivery routes for your Shopify orders

Updated on March 5, 2021

Restrict pickup/delivery dates for specific products

Great for handling pre-orders and seasonal products

Updated on March 4, 2021

Hiding line item attributes

How to hide _alpaca_id attributes from appearing

Updated on December 9, 2020

Liquid variables in notifications

How to add dynamic content to your notifications

Updated on October 13, 2020

Delivery rates by zip / postal code

How to restrict local delivery rates to specific zip or postal codes

Updated on August 25, 2020

How to add or edit pickup schedules

Set when you offer pickup and other options regarding curbside pickup

Updated on June 2, 2020

How to add or edit local delivery rates

Manage the prices and options for local delivery

Updated on June 2, 2020

Change the look-and-feel of the pickup call-to-action

How to modify the fonts and colors of the pickup CTA

Updated on June 2, 2020

Add a pickup call-to-action to your theme

How to display a pickup CTA on your storefront

Updated on June 2, 2020


Still need help?

Send us an email and we'll get back to you as soon as we can.

Free 14-day trial

Try Alpaca for free, no risk, no hassle

Get started