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. Section Components
| Section | Store Selector | Creates a location picker on the header that displays available store locations with pickup details. |
|---|---|---|
| Available block | Store | Used to add a store location's information. |
3. Location & Setup
To add & set up the Store Selector section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
-
Navigate to the Overlay group section.
- Click “Add Section”.
- Select “Store Selector”.
⚠️ Prerequisites:
- 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)
4. Highlight Features
- Multi-Location Support: Manage and show multiple store locations easily on the header.
- Pickup Pricing: Set different pickup costs for each location
- Timing Information: Display pickup availability windows
- Visual Elements: Add store images and custom icons
- Product Integration: Show pickup availability on product cards
- Targeted Display: Control which products/collections show pickup info
5. Common Use Cases
🤔 How to set up the store selector?
Before jumping into the steps to bring up this feature, make sure you have completed the PREREQUISITES above.
Then, follow these steps:
STEP 1: Add the Store Selector section to the Overlay group.
STEP 2: This is an important step: In the Store selector setting panel, turn on "Enable" to make this picker show on the header.
STEP 3: Click on a Store block to open its settings panel and set up:
- 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, including an image under this description, use the Store detail image setting.
- Store image: Show an image of the store on the left.
STEP 4: Add more Store blocks and repeat the steps above.
STEP 5: Click "Save" and preview.
💡 Note: Ensure all information matches your Shopify Admin (Settings > Locations) location settings to avoid customer confusion.
🤔 How to customize the location icon?
STEP 1: In Store Selector settings, find "Custom icon image".
STEP 2: By default, the theme shows a Location pin on the header; to change it, upload your custom icon image OR paste SVG code in "Custom icon (SVG code)".
STEP 3: Expand the Theme Setting tab, and you can adjust the edges, base size, icon style for the location pin, and hover animation.
STEP 4: Click "Save" and test the icon appearance on your header.
🤔 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 product at the selected location.
STEP 1: Ensure Pickup in store is enabled in Shopify Admin > Settings > Shipping and delivery
→ Or check out this guide from Shopify for more information.
STEP 2: In the Store Selector section setting panel, toggle ON "Show on product cards."
STEP 3: Choose your display scope:
If you want the pickup availability text is shown on:
- All products: Leave collection/product fields empty
- Specific collections: Select up to 50 collections in "Apply to collections" setting.
- Specific products: Select up to 50 products in "Apply to products" setting.
STEP 4: Save changes and test the pickup availability display.
6. Support Information
Need help? Contact our support team at Omni Themes Support.
