Set Up In-Store Pickup Tracking Page
Plans: Enterprise Platforms: Shopify, Commerce API
AfterShip’s Buy Online, Pickup In-Store (BOPIS), or In-Store Pickup Tracking enables customers to track when and where they pick up their orders originally bought online. Combined with a fully branded tracking page to track the progress of the in-store pickup orders including when it’s ready for pickup or if there are any delays, it enhances the customer experience by keeping them informed and aligned with the retailer's brand identity throughout the pickup process.
In this tutorial, we will follow all the steps and checklists required to create and set up your in-store pickup tracking page successfully.
In this article, we will show you:
Checklist
In-store pickup orders fulfillment statuses
Enable in-store pickup experience on your branded tracking page
Branded tracking page editor
Branded tracking page customization
Post in-store pickup tracking page setup actions
FAQs
AfterShip employs predefined fulfillment status codes to track and update order pickups' progress, from order creation to pickup completion. These status codes are employed to show the progress of pickup orders on branded in-store pickup tracking pages.
AfterShip updates the fulfillment status based on order updates received from the eCommerce platform or Commerce API. The availability of fulfillment status depends on the specific eCommerce platforms you are using.
Similar to normal shipments where customers can input the tracking number or order number along with their email/phone number/postal code to track the status of their orders, you can activate the in-store pickup tracking on your branded tracking page to allow customers to track the progress of the in-store pickup orders by entering the order number along with their email/phone number/postal code as one of the verification methods. Based on where, how, and when you are activating the in-store pickup tracking on your branded tracking page, there are 3 ways you can enable the experience.
If you already have a tracking page for shipments, you can activate the in-store pickup feature on that same page for in-store pickup orders.
To enable in-store pickup on an existing page:
Log in to the AfterShip Tracking admin panel.
Go to Tracking pages > Variations > Your tracking pages.
Choose the page where you want to enable in-store pickup > Actions > Edit
Navigate to Settings on the sidebar of the tracking page editor.
Under Order delivery methods, select In-store pickups.
Once you have In-store pickups enabled as the order delivery method for the same tracking page variation, you will see the option for a new tab under Results pages automatically created in the dropdown.
If you offer both In-store pickups and Shipping as order delivery methods at the checkout of your online store, make sure to select (enable) both Shipments and In-store Pickups on the same page variant for the delivery method. AfterShip Tracking will then direct customers to either the In-store pickup results page or the Shipments results page, depending on the delivery method chosen for their order.
To create a new page for the in-store pickup experience, you can start from scratch or use a template.
Log in to the AfterShip Tracking admin panel.
Go to Tracking pages > Variations > Your tracking pages.
Click Create page.
Choose Create from scratch.
Input a name for your tracking page for easy reference and select either In-store Pickups or Shipments or both order delivery methods as needed.
Click Create
If you offer both In-store pickups and Shipping as order delivery methods at the checkout of your online store, make sure to select (enable) both Shipments and In-store Pickups on the same page variant for the delivery method. AfterShip Tracking will then direct customers to either the In-store pickup results page or the Shipments results page, depending on the delivery method chosen for their order.
New pages for the In-store Pickups Results Page for the in-store pickup delivery method, and the Shipments Results Page for the shipping delivery method will be automatically created under the Results tab in the dropdown for you to choose and to edit separately.
AfterShip hosts a multitude of prebuilt templates, specific to certain industries with unique post-purchase elements supported in the template. You can select from these templates to create your branded tracking page and tweak the settings, enable in-store pickup tracking, and modify styling based on your business needs.
Log in to the AfterShip Tracking admin panel.
Go to Tracking pages > Variations > Your tracking pages.
Click Create page.
Select a Template labelled with In-store pickups > Select template.
Input a name for your tracking page for easy reference.
Click Create
The template will automatically generate two separate pages for in-store pickup results and Shipments results for you to choose and edit. If you wish to disable either page, simply toggle off the corresponding option under Order delivery methods.
Once you’ve enabled or configured in-store pickup tracking on your branded tracking page, you can customize the corresponding page on the branded tracking page editor, similar to the Order lookup and Shipments results page.
The tracking page editor supports 4 major elements that together complete the in-store pickup experience, functionality, design, and appearance of a branded tracking page.
a. Sections
b. Widgets
c. Style
d. Settings
You can edit sections of the in-store pickups results page separately; however, the header, and footer apply to all pages within the same page variant.
The availability of the widgets— gift tracking and chat support button is also subject to the order lookup and results pages.
The style and the general delivery method, branding, and Google Analytics settings will apply to all pages within the same page variant.
AfterShip’s tracking page editor enables you to customize your in-store pickup tracking experience to align with your branding and customer requirements. Let’s explore the customization features available with AfterShip Tracking’s suite of products and features in this complete guide .
In essence, the branded tracking page editor supports the same functionality, design layouts, style capabilities, user behavior tracking, and multilingual settings for all the pages within the same variation.
However, for the in-store pickup experience, as the nature of the order tracking is different from the normal shipments due to the lack of a tracking number, there are different sections supported on the editor for you to select, edit, and manage based on how to wish to elevate your customer’s tracking experience.
Let’s talk in detail about the aforementioned sections.
Go to Tracking pages > Page variations in your AfterShip Tracking admin.
Select the page variation for which you want to configure the in-store pickup tracking experience and click Actions > Edit to open the tracking page editor.
Select In-store pickups from the dropdown.
As mentioned above, the customization capabilities for the in-store pickups page are along the lines of a normal shipment tracking page. Due to the lack of a tracking number for in-store pickup orders, there is no Tracking updates section, instead, you find an Order updates section for customers to check the status of their orders as to how, when, and from where they can collect their orders with marketing assets to persuade customers to indulge more with your brand. This section is usually on the top of the page after the header with a banner-like appearance.
Click on the Order updates section to start customizing how you want the section to look to your customers. Select the Section type— Hero banner or Columns.
Hero banner: A background of the map showcasing the pickup location with a compact section to display the order updates.
Columns: Displays the compact order information section with two additional sections to add more relevant information or marketing assets to enhance customer experience.
Compact order info: This is a subsection of the Order updates section and is visible for both the hero banner and columns section type. The subsection provides customers with real-time information about the status of their in-store pickup orders in a neat, compact, and visually-appealing form with the following information.
Current status and description of your order.
Estimated pickup date and time.
Visual indicators like progress bars or status icons to show the stages of order processing.
Address and details of the store where the order can be picked up.
Google Maps to help customers find the exact location of the pickup point or store.
On the AfterShip Tracking Page editor, you have the full reigns if you want to showcase the information these sections have to provide and how you wish these sections to look.
You can choose to display the Estimated pick up date and time and Pick up deadline to your shoppers.
The estimated pickup time will be calculated based on the order created date and time and the Expected pickup time (defined in Shopify) and will be mapped to AfterShip.
How it works?
Before the order is ready for pickup: We will display the estimated_ready_for_pick_up date and time.
When the order is ready for pickup: We will show the pick_up_deadline_at date and time.
The displayed dates and times will be based on the local timezone of the pickup location.
Configure the title of the pickup instruction on the branded in-store pickup tracking page within the editor.
The pickup instructions itself can be modified only in Shopify under the Shipping and delivery section. The same information will be mapped to AfterShip along with the configured Locations. For more information on Shopify locations set up and mapping, refer to this article .
Pickup instructions modification under AfterShip Location settings is only available for Commerce API users.
Below the current order status and pickup date and time, you can enable a progress bar to indicate the stages of order processing, to help users track the progress of their orders from placement to pickup. You can choose between
Line bar: A continuous bar that shows the progress of the order from start to finish.
Stages bar: A progress indicator that displays distinct stages of the order processing within a process.
Choose whether to display the store location on a map for your shoppers. Locations can be synchronized from the platform or manually created in AfterShip. For detailed instructions, please refer to Create and edit in-store pickup locations article.
The pickup address will reflect the location associated with the order. To learn how to set up and manage your pickup locations and configure opening hours, please refer to Create and edit in-store pickup locations article .
In the tracking page editor, the Status section allows you to customize how different stages of the in-store pickup order tracking process are presented to shoppers including the status title, name, and description (only for Cancelled status). Click Edit and start configuring the titles and names based on your requirements.
The section will show all the default as well as custom pickup statuses.
The tracking history displays a record of pick-up orders and fulfillment updates. It includes the status name, title, and timestamp for each update.
If you are using the Commerce API to import your pick-up orders and fulfillments, any tracking information created under the pick-up fulfillment will be displayed in the history section. This will include details such as the carrier, tracking number, and a record of the tracking history.
Each section has a Styles tab, where you can configure the appearance of the block, and a Visibility settings tab, where you can choose who should see the block and which device types it should display on. The specific style and visibility settings available are different for each block type.
You can configure and add additional sections and blocks supported in the AfterShip tracking page editor to display additional information and marketing assets to engage customers and enhance their tracking experience.
Once modifications are done, Preview the changes and then Save.
Configure tracking page languages
Connect Google Analytics
Create customer and order-specific segmentation rules
Add tracking page to your Shopify store’s navigation
Set up a custom domain
Tracking Page Segmentation works independently of the order's delivery method:
Path A: Order does not match any segmentation rules
For Shipping orders: Shoppers will be directed to the default Shipments results page.
For In-store Pickup orders: Shoppers will be directed to the default In-store Pickup results page.
Path B: Order matches segmentation Rule 1
For Shipping orders: Shoppers will be directed to Page 1’s Shipments results page.
For In-store Pickup orders: Shoppers will be directed to Page 1’s In-store Pickup results page.
Path C: Similar to Path B
Shoppers will be directed according to the same rules as Path B, based on whether their order is a Shipping or In-store Pickup order.
With the AfterShip Commerce API, you can create multiple fulfillments for a single order, assigning each one a different delivery method (shipping or pickup). You can then display the fulfillment details to shoppers on the branded tracking page. To achieve this, you need to:
Activate both Shipping and In-store Pickup as delivery methods on the page.
Add either Tabs to switch between items or Other items in the order to your page.
This setup ensures that shoppers can view items associated with different fulfillment methods on their branded tracking page.
Overview
AfterShip’s Buy Online, Pickup In-Store (BOPIS), or In-Store Pickup Tracking enables customers to track when and where they pick up their orders originally bought online. Combined with a fully branded tracking page to track the progress of the in-store pickup orders including when it’s ready for pickup or if there are any delays, it enhances the customer experience by keeping them informed and aligned with the retailer's brand identity throughout the pickup process.
In this tutorial, we will follow all the steps and checklists required to create and set up your in-store pickup tracking page successfully.
What you’ll learn
In this article, we will show you:
Checklist
In-store pickup orders fulfillment statuses
Enable in-store pickup experience on your branded tracking page
Branded tracking page editor
Branded tracking page customization
Post in-store pickup tracking page setup actions
FAQs
Before you start
| Checklist |
|---|
| 1. You should be on AfterShip Tracking's Enterprise plan. |
| 2. The feature is available for Shopify and AfterShip Commerce API users. |
| 3. In-store pickup tracking is a paid add-on that needs to be enabled separately. Please get in touch with your customer success manager for assistance and activation. |
| 4. You need to enable the in-store pickup option for your store locations at checkout through your Shopify settings. |
| 5. Set up import rules to sync your in-store pickup orders to AfterShip Tracking. |
| 6. Create and edit in-store pickup locations with the preferred pickup times and instructions. |
| 7. Set up custom fulfillment statuses (optional) for your in-store pickup orders to better service your customer tracking needs. (Only available for Commerce API users) |
In-store pickup orders fulfillment statuses
AfterShip employs predefined fulfillment status codes to track and update order pickups' progress, from order creation to pickup completion. These status codes are employed to show the progress of pickup orders on branded in-store pickup tracking pages.
AfterShip updates the fulfillment status based on order updates received from the eCommerce platform or Commerce API. The availability of fulfillment status depends on the specific eCommerce platforms you are using.
| STATUS | DESCRITPION | |
|---|---|---|
| pending | Awaiting fulfillment or processing of items at the store. | |
| processing | The processing of the items in the order for which in-store pickup has been opted has started. | Not available for Shopify. |
| ready_for_pickup | The items in the order are ready for pickup at the designated store location | |
| picked_up | The customer has picked up the order from the store. | |
| canceled | The in-store pickup order has been canceled by the customer. | |
| custom status | Merchants can define their in-store pickup status(es) in addition to the above standard triggers | Available only for Commerce API users |
Enable in-store pickup experience on your branded tracking page
Similar to normal shipments where customers can input the tracking number or order number along with their email/phone number/postal code to track the status of their orders, you can activate the in-store pickup tracking on your branded tracking page to allow customers to track the progress of the in-store pickup orders by entering the order number along with their email/phone number/postal code as one of the verification methods. Based on where, how, and when you are activating the in-store pickup tracking on your branded tracking page, there are 3 ways you can enable the experience.
1. Create an in-store pickup tracking page from the existing tracking page
If you already have a tracking page for shipments, you can activate the in-store pickup feature on that same page for in-store pickup orders.
To enable in-store pickup on an existing page:
Log in to the AfterShip Tracking admin panel.
Go to Tracking pages > Variations > Your tracking pages.
Choose the page where you want to enable in-store pickup > Actions > Edit
Navigate to Settings on the sidebar of the tracking page editor.
Under Order delivery methods, select In-store pickups.
Once you have In-store pickups enabled as the order delivery method for the same tracking page variation, you will see the option for a new tab under Results pages automatically created in the dropdown.
If you offer both In-store pickups and Shipping as order delivery methods at the checkout of your online store, make sure to select (enable) both Shipments and In-store Pickups on the same page variant for the delivery method. AfterShip Tracking will then direct customers to either the In-store pickup results page or the Shipments results page, depending on the delivery method chosen for their order.
2. Create a new tracking page from scratch
To create a new page for the in-store pickup experience, you can start from scratch or use a template.
Log in to the AfterShip Tracking admin panel.
Go to Tracking pages > Variations > Your tracking pages.
Click Create page.
Choose Create from scratch.
Input a name for your tracking page for easy reference and select either In-store Pickups or Shipments or both order delivery methods as needed.
Click Create
If you offer both In-store pickups and Shipping as order delivery methods at the checkout of your online store, make sure to select (enable) both Shipments and In-store Pickups on the same page variant for the delivery method. AfterShip Tracking will then direct customers to either the In-store pickup results page or the Shipments results page, depending on the delivery method chosen for their order.
New pages for the In-store Pickups Results Page for the in-store pickup delivery method, and the Shipments Results Page for the shipping delivery method will be automatically created under the Results tab in the dropdown for you to choose and to edit separately.
3. Create a new tracking page using a template
AfterShip hosts a multitude of prebuilt templates, specific to certain industries with unique post-purchase elements supported in the template. You can select from these templates to create your branded tracking page and tweak the settings, enable in-store pickup tracking, and modify styling based on your business needs.
Log in to the AfterShip Tracking admin panel.
Go to Tracking pages > Variations > Your tracking pages.
Click Create page.
Select a Template labelled with In-store pickups > Select template.
Input a name for your tracking page for easy reference.
Click Create
The template will automatically generate two separate pages for in-store pickup results and Shipments results for you to choose and edit. If you wish to disable either page, simply toggle off the corresponding option under Order delivery methods.
Branded tracking page editor
Once you’ve enabled or configured in-store pickup tracking on your branded tracking page, you can customize the corresponding page on the branded tracking page editor, similar to the Order lookup and Shipments results page.
The tracking page editor supports 4 major elements that together complete the in-store pickup experience, functionality, design, and appearance of a branded tracking page.
a. Sections
b. Widgets
c. Style
d. Settings
You can edit sections of the in-store pickups results page separately; however, the header, and footer apply to all pages within the same page variant.
The availability of the widgets— gift tracking and chat support button is also subject to the order lookup and results pages.
The style and the general delivery method, branding, and Google Analytics settings will apply to all pages within the same page variant.
Sections, blocks, and widgets available on the in-store pickup page
| Sections | In-store pickups page |
|---|---|
| Tracking updates | No |
| Order lookup | No |
| Order updates | Yes |
| Shipment reviews | No |
| Images | Yes |
| Subscription | No |
| Shipment items | Yes |
| Other shipments in order | Yes |
| Video | Yes |
| Product recommendations | Yes |
| Custom sections | Yes |
| Yes | |
| Tabs for other items in order | Yes |
| Widgets | In-store pickups page |
|---|---|
| Gift tracking | No |
| Support chat button | Yes |
Branded tracking page customization
AfterShip’s tracking page editor enables you to customize your in-store pickup tracking experience to align with your branding and customer requirements. Let’s explore the customization features available with AfterShip Tracking’s suite of products and features in this complete guide .
In essence, the branded tracking page editor supports the same functionality, design layouts, style capabilities, user behavior tracking, and multilingual settings for all the pages within the same variation.
However, for the in-store pickup experience, as the nature of the order tracking is different from the normal shipments due to the lack of a tracking number, there are different sections supported on the editor for you to select, edit, and manage based on how to wish to elevate your customer’s tracking experience.
Let’s talk in detail about the aforementioned sections.
Go to Tracking pages > Page variations in your AfterShip Tracking admin.
Select the page variation for which you want to configure the in-store pickup tracking experience and click Actions > Edit to open the tracking page editor.
Select In-store pickups from the dropdown.
As mentioned above, the customization capabilities for the in-store pickups page are along the lines of a normal shipment tracking page. Due to the lack of a tracking number for in-store pickup orders, there is no Tracking updates section, instead, you find an Order updates section for customers to check the status of their orders as to how, when, and from where they can collect their orders with marketing assets to persuade customers to indulge more with your brand. This section is usually on the top of the page after the header with a banner-like appearance.
Click on the Order updates section to start customizing how you want the section to look to your customers. Select the Section type— Hero banner or Columns.
Hero banner: A background of the map showcasing the pickup location with a compact section to display the order updates.
Columns: Displays the compact order information section with two additional sections to add more relevant information or marketing assets to enhance customer experience.
Compact order info: This is a subsection of the Order updates section and is visible for both the hero banner and columns section type. The subsection provides customers with real-time information about the status of their in-store pickup orders in a neat, compact, and visually-appealing form with the following information.
Current status and description of your order.
Estimated pickup date and time.
Visual indicators like progress bars or status icons to show the stages of order processing.
Address and details of the store where the order can be picked up.
Google Maps to help customers find the exact location of the pickup point or store.
On the AfterShip Tracking Page editor, you have the full reigns if you want to showcase the information these sections have to provide and how you wish these sections to look.
A. Estimated pick up date
You can choose to display the Estimated pick up date and time and Pick up deadline to your shoppers.
The estimated pickup time will be calculated based on the order created date and time and the Expected pickup time (defined in Shopify) and will be mapped to AfterShip.
How it works?
Before the order is ready for pickup: We will display the estimated_ready_for_pick_up date and time.
When the order is ready for pickup: We will show the pick_up_deadline_at date and time.
The displayed dates and times will be based on the local timezone of the pickup location.
B. Pickup instructions
Configure the title of the pickup instruction on the branded in-store pickup tracking page within the editor.
The pickup instructions itself can be modified only in Shopify under the Shipping and delivery section. The same information will be mapped to AfterShip along with the configured Locations. For more information on Shopify locations set up and mapping, refer to this article .
Pickup instructions modification under AfterShip Location settings is only available for Commerce API users.
C. Progress bar
Below the current order status and pickup date and time, you can enable a progress bar to indicate the stages of order processing, to help users track the progress of their orders from placement to pickup. You can choose between
Line bar: A continuous bar that shows the progress of the order from start to finish.
Stages bar: A progress indicator that displays distinct stages of the order processing within a process.
D. Map
Choose whether to display the store location on a map for your shoppers. Locations can be synchronized from the platform or manually created in AfterShip. For detailed instructions, please refer to Create and edit in-store pickup locations article.
E. Pickup address and opening hours
The pickup address will reflect the location associated with the order. To learn how to set up and manage your pickup locations and configure opening hours, please refer to Create and edit in-store pickup locations article .
F. Status description
In the tracking page editor, the Status section allows you to customize how different stages of the in-store pickup order tracking process are presented to shoppers including the status title, name, and description (only for Cancelled status). Click Edit and start configuring the titles and names based on your requirements.
The section will show all the default as well as custom pickup statuses.
G. Tracking history
The tracking history displays a record of pick-up orders and fulfillment updates. It includes the status name, title, and timestamp for each update.
If you are using the Commerce API to import your pick-up orders and fulfillments, any tracking information created under the pick-up fulfillment will be displayed in the history section. This will include details such as the carrier, tracking number, and a record of the tracking history.
Each section has a Styles tab, where you can configure the appearance of the block, and a Visibility settings tab, where you can choose who should see the block and which device types it should display on. The specific style and visibility settings available are different for each block type.
You can configure and add additional sections and blocks supported in the AfterShip tracking page editor to display additional information and marketing assets to engage customers and enhance their tracking experience.
Once modifications are done, Preview the changes and then Save.
Post in-store pickup tracking page setup actions
Configure tracking page languages
Connect Google Analytics
Create customer and order-specific segmentation rules
Add tracking page to your Shopify store’s navigation
Set up a custom domain
FAQs
1. I’m using the Page Segmentation function and have both Shipments and In-store Pickup tracking pages. How will the landing page for my shoppers be determined?
Tracking Page Segmentation works independently of the order's delivery method:
Path A: Order does not match any segmentation rules
For Shipping orders: Shoppers will be directed to the default Shipments results page.
For In-store Pickup orders: Shoppers will be directed to the default In-store Pickup results page.
Path B: Order matches segmentation Rule 1
For Shipping orders: Shoppers will be directed to Page 1’s Shipments results page.
For In-store Pickup orders: Shoppers will be directed to Page 1’s In-store Pickup results page.
Path C: Similar to Path B
Shoppers will be directed according to the same rules as Path B, based on whether their order is a Shipping or In-store Pickup order.
2. What will shoppers see on the tracking page if their order contains both shipped items and in-store pickup items?
With the AfterShip Commerce API, you can create multiple fulfillments for a single order, assigning each one a different delivery method (shipping or pickup). You can then display the fulfillment details to shoppers on the branded tracking page. To achieve this, you need to:
Activate both Shipping and In-store Pickup as delivery methods on the page.
Add either Tabs to switch between items or Other items in the order to your page.
This setup ensures that shoppers can view items associated with different fulfillment methods on their branded tracking page.
Updated on: 23/08/2024
Thank you!