Store selector

1. What is Store Selector?

The Store Selector allows customers to select a specific store location for order pickup, improving the customer experience by offering flexibility in where they can pick up their orders.

2. How to set up the Store Selector feature?

Before jumping into the steps to bring up this feature, make sure:

• Your store has been all set with multiple locations (In Shopify admin > Settings> Locations, or check this guide from Shopify)
• Your store offers pickup in store for online orders (In Shopify admin > Settings > Shipping and delivery > Pickup in store, or check this guide from Shopify)

Step 1: Add the Store selector section.

In Theme Editor, under Overlay group, click “Add section”, and choose Store selector.

Step 2: Enable Store selector to show

This is an important step: In the Store selector setting panel, turn on Enable to make this picker show on the header.

Step 3: Add & edit the Store blocks

• By default, your Store Selector section has a Store block; if you want more, just add more.
• Click on one Store block to change its information, such as:
  • Name: The location’s name

• • Pickup price: The cost that customers need to pay when picking up in that location.

• • Pickup time: The time frame when picking up is available at that location.

• • Store details: Other detailed information that customers can see when expanding the tab, to include an image under this description, use the Store detail image setting.

• • Store image: Show an image of the store on the left.

• Repeat with other Store blocks.

⚠️Note: Make sure that all your entered information matches the location setting in your admin (Settings > Locations) to avoid confusion for your customers.

Step 4: Customize the section’s look:

After editing each block, you might need some tweaks in the overall Store selector section settings:

• Custom icon image: By default, the theme shows a Location pin 
  on the header; upload a custom image to this setting to change it (or paste an SVG code to Custom icon (SVG code)).

• Show on product card: Continue reading part 3. How to show pickup availability on the product cards? for better understanding.
• Theme Settings: Expand the this tab and you can adjust the edges, base size, icon style for the location pin, hover animation.

Step 5: Save the changes.

3. How to show pickup availability on the product cards?

This feature will let you show a small text under each product card, indicating the availability for pickup of that certain product at the selected location.

Step 1: Set up your Pickup in store:

To ensure this text is shown, you must offer pickup in store for your locations by going to Settings > Shipping and delivery > Pickup in store. 

→ Or check out this guide from Shopify for more information.

Step 2: Enable “Show on product cards” :

In Shopify Theme Editor, click on your Store selector section to open the setting panels. 

Depending on what kind of product you want the pickup text to display, the settings are slightly different:

Step 3: Save the changes.