Quick start

Five minutes from install to live on your storefront. Follow these in order. Each step links to the full instructions if you get stuck.

1. Install the app from the Shopify App Store and pick a plan. Every plan starts with a 14 day free trial.
2. Add a Google API key in the app's Google API settings, or skip this step if you're using hard-code mode with 5 or fewer pickup stores.
3. Add the Product Page block to your product template so customers see pickup availability before they add to cart.
4. Verify each pickup location has a complete address and Shopify's Pickup in store setting is enabled in Settings → Locations.
5. Configure Store Hours (recommended) for each pickup location so customers see real opening times and pickup days.

Must-do checklist

The four tasks below are the strict minimum for the app to work on your storefront. Each task links to its detailed section.

1. Subscribe to a plan. The app is unusable without an active plan. All three plans include the full feature set. The 14 day trial is free.
2. Add a Google API key, or use hard-code mode. Postcode search and distance ranking require a Google Cloud key with both Distance Matrix and Geocoding APIs enabled. If you have 5 or fewer pickup stores, you can skip the key and list them directly in the Product Page block.
3. Add the Product Page block. Without it, customers cannot see pickup availability on the product page. Place it below the buy buttons.
4. Verify location addresses and Shopify "Pickup in store" setting. Each pickup location must have a complete address (street, city, state, postcode, country) and Shopify's native Pickup in store toggle enabled. The app reads these directly from Shopify locations.

Optional features

The items below are not required for basic Click and Collect. Enable each one only if you want the specific capability it adds.

Installation

Full step-by-step from a fresh install. Should take 10 to 20 minutes for a single-store retailer, 30 to 60 minutes for a multi-location chain that needs Store Hours configured per location.

Prerequisites

Before you start, confirm:

• You have a Shopify store. Both Shopify Plus and non-Plus plans are supported.
• At least one Shopify location exists, with a complete address (street, city, state / province, postcode, country) and Shopify's native Pickup in store setting enabled. To check, go to Settings → Locations.
• (Optional, postcode-search mode only) You have a Google Cloud account. A new project is fine. Billing must be enabled on the project to use Distance Matrix and Geocoding, but free tier limits cover typical small-to-mid traffic.
• You can access your Shopify theme editor and add app blocks to your product template.

Step 1. Install and subscribe

1

Install the app

From the Shopify App Store listing at apps.shopify.com/saas-integrator-cnc, click Add app and approve the permissions. You will be redirected back to your Shopify admin with the app installed.

Screenshot pending. Save as docs-images/shopify-app-store.png

2

Pick a plan

On first load you will see the plan picker. Choose the plan that matches your location count and monthly order volume. All plans include the full feature set, and all plans start with a 14 day free trial. You can change plans later from Billing in the app sidebar.

Screenshot pending. Save as docs-images/plan-picker.png

Step 2. Add your Google API key

Postcode-based store search and distance ranking are powered by Google's Distance Matrix and Geocoding APIs. A single Google API key works for both services.

Generate the key in Google Cloud Console

1

Open Google Cloud Console and open or create a project.

2

Enable both of the following APIs on the project:

• Distance Matrix API
• Geocoding API

You can enable them from APIs & Services → Library. Search for each by name and click Enable.

3

Create an API key. Go to Credentials → Create credentials → API key. Google will generate the key and show it once.

4

Copy the key and paste it into the app's Google API settings page in Shopify admin (in the app sidebar). Save.

Screenshot pending. Save as docs-images/google-api-settings.png

Optional: IPinfo for postcode auto-detect

If you want the search input pre-filled with the visitor's postcode based on their IP address, sign up at ipinfo.io and paste the API key into the same settings page. Without IPinfo, the search input opens empty and the customer types their postcode manually. All other features work normally either way.

Step 3. Enable App Embeds (optional)

Two App Embeds are available in your Shopify theme editor. Both are optional features, toggled independently. Skip this entire step if you only need the Product Page block.

1

Open your theme editor

In Shopify admin, go to Online Store → Themes, then click Customize on your live theme.

2

Open the App Embeds panel

In the left sidebar of the theme editor, click the App embeds icon (looks like a small jigsaw piece). You should see Cart Popup and Locations Popup listed under SAAS Integrator CNC.

Screenshot pending. Save as docs-images/theme-app-embeds.png

3

Toggle on Locations Popup

Find Locations Popup (saas-int-cnc-plus) and toggle it on. This activates the global store selector, the persistent header widget that shows the chosen store, and the search-by-postcode flow.

4

Toggle on Cart Popup

Find Cart Popup (saas-int-cnc-plus) and toggle it on. This activates pre-checkout cart validation, displays per-item availability at the selected pickup store, surfaces custom Click and Collect messages, and enforces Home Delivery blocking for Pickup-Only products.

!

If you use custom messaging triggers (described below), leave Cart Popup enabled. Disabling it is the most common cause of customers reaching checkout without seeing your "Available for in-store pickup only" or "Allow 2 to 3 days" messages.

5

Save

Click Save in the top right of the theme editor.

Step 4. Add the Product Page block

The Product Page CNC block displays stock availability and the store selector directly on each product page. Without it, customers cannot see pickup availability before adding to cart.

1

Open your product template in the theme editor

From the top dropdown in the theme editor, choose Products → Default product.

2

Add the block

In the left sidebar, find the product section. Click Add block, then select SAAS Product Page CNC from the list.

Screenshot pending. Save as docs-images/add-block-menu.png

3

Position the block

Drag the block to sit below the Add to cart button. This is where customers expect to see pickup availability.

4

Decide on postcode retention

Scroll the block settings to Remember last searched postcode. Decide whether to leave it off (recommended) or turn it on.

• Off (default, recommended). The search field is blank by default. It is only auto-filled when an IPinfo API key is configured (set on the app's Google API settings page). The field also clears after each search. Best for stores where customers may be shopping for delivery to different addresses on different visits.
• On (legacy behaviour). Restores the customer's last searched postcode each time the popup opens or the product page is revisited. Best when most customers always pick up from the same area. The setting applies in both Popup and Embedded PDP modes.

5

Decide on the Special Hours Alert Window

The block's Special Hours Alert Window setting controls how many days ahead an upcoming holiday closure is shown on store cards. Default is 7 days. Set it higher (e.g. 14 or 30) if you run early-warning campaigns around major holidays. Set it lower if you want closures to appear only when imminent.

The same setting exists on the Locations Popup block. The two operate independently. Set the block you actually display to customers; you can match them for consistency.

6

Save

Click Save in the top right.

The default PDP Store Lookup Mode is Embedded, which renders store search and results inline on the product page. If you prefer the legacy modal behaviour, switch to Popup in the block settings. See Product Page block configuration for the difference.

Step 5. Configure Store Hours

Store Hours are technically optional, but configuring them dramatically improves the customer experience. Customers see when each store is open, when Click and Collect is available, and any upcoming holiday closures. Without configured hours, the storefront falls back to "always available" which can mislead customers.

1

Open the Store Hours page

In the app sidebar in Shopify admin, click Store Hours.

Screenshot pending. Save as docs-images/store-hours-admin.png

2

Select a location and set regular hours

Click a location in the left column. In the Store hours tab, set the timezone for that location, then tick the days the store is open and enter open and close times. Use the Copy hours button to duplicate a day's schedule to others.

3

Set CnC availability

Switch to the CnC availability tab. This is a separate schedule from regular store hours. Use it when Click and Collect pickup is only available on a subset of trading days, for example a store that's open 7 days but only fulfils pickup orders Monday to Friday.

4

Set special hours

Switch to the Special hours tab to add public holiday closures or one-off hour changes. Special hours override the regular schedule and appear on store cards as alert banners ahead of the date. By default the alert window is 7 days, configurable on either the Locations Popup or the Product Page block via the Special Hours Alert Window setting.

5

Copy to other locations

Once one location is configured, click Copy to locations at the top of the editor to apply the same schedule across multiple stores. Tweak per-location overrides as needed.

Verification

Open your storefront in a private window and walk through the customer journey to confirm everything is wired up.

1. The Locations Popup opens on first visit. You can search by postcode (search mode) or see your hard-coded stores (hard-code mode).
2. Each store card shows distance, stock status, and store hours (if configured).
3. On a product page, the SAAS Product Page CNC block is visible below the buy buttons.
4. The block shows pickup availability per location, including any custom messaging you configured.
5. Add a product to the cart, then click the checkout button. The Cart Popup opens and validates stock against the selected pickup store.
6. If you set up a Pickup-Only product, confirm Home Delivery is hidden in the Cart Popup.
7. Complete the checkout. The Click and Collect confirmation appears on the checkout page and on the order confirmation email.

Configuration

Primary settings only. Every block has additional appearance and label settings (colours, fonts, button text) that work without explanation. The settings documented below are the ones that change behaviour and customer experience.

Locations Popup

The global store selector embed. Toggle in Online Store → Themes → Customize → App embeds → Locations Popup.

Hard-code mode

For single-store and small-chain retailers with 5 or fewer pickup locations, you can skip postcode search entirely by entering your Shopify Location IDs in the Store Location IDs field. Behaviour:

To find a Shopify Location ID, go to Settings → Locations, click a location, and copy the numeric ID from the end of the URL.

Cart Popup

The cart-side validation embed. Toggle in Online Store → Themes → Customize → App embeds → Cart Popup. Surfaces per-item availability at the selected pickup store and enforces Home Delivery blocking for Pickup-Only products.

Screenshot pending. Save as docs-images/cart-popup-storefront.png

Product Page block

The block that displays pickup availability on each product page. Add it via the theme editor under Online Store → Themes → Customize → Default product → Add block → SAAS Product Page CNC.

Store Hours

Per-location schedules. Set in the app admin, not in the theme editor. Open Store Hours from the app sidebar.

Each location has three independent settings:

Regular store hours

Weekly opening times with timezone. The schedule shown to customers on store cards as "Open · Closes at 5:00 PM" style status lines. Use Copy hours to duplicate a day's schedule across the week.

CnC availability

A separate schedule for when each location accepts Click and Collect pickup. Decoupled from regular hours so you can offer pickup on a subset of trading days. Example: a store open 7 days, fulfilling pickup orders Monday to Friday only.

Special hours

One-off variations and public holidays. Use these for Christmas Day closures, Anzac Day half-days, store-specific events. Special hours override the regular schedule for the dates you set. Upcoming closures surface as alert banners on store cards ahead of the date. The default alert window is 7 days, configurable on either the Locations Popup or the Product Page block via the Special Hours Alert Window setting. Set the block you display to customers, or match them for consistency.

Copy to locations

Once a location is configured, click Copy to locations to apply the same regular hours, CnC availability, and special hours to other selected locations.

Custom messaging

Product-specific Click and Collect messaging using Shopify metafields. The Product Page block supports up to three independent triggers built on a single product metafield key. Each trigger has its own value, message, stock-validation mode, and Pickup-Only setting.

The three-trigger system

You configure one metafield key (e.g. custom.stock_override) and up to three triggers. Each trigger watches for a specific value on that metafield. When a product's metafield matches a trigger value, that trigger's message is shown and that trigger's rules apply.

Ignore Stock Levels options

Common configurations

The trigger values below are examples. Pick any string you want, as long as it's unique within the block and matches what you'll set on the product metafield.

• Inter-store transfer. Trigger value e.g. transfer, message "Allow 2 to 3 days for collection", Ignore Stock Levels Only locations with no stock, Pickup In Store Only off.
• Pickup-only product. Trigger value e.g. pickup_only, message "Available for in-store pickup only", Ignore Stock Levels All locations, Pickup In Store Only on.
• Pre-order or made-to-order. Trigger value e.g. pre_order, message "Pre-order. Ships from 15 June", Ignore Stock Levels All locations, Pickup In Store Only off.

Pickup In Store Only and "Only locations with no stock" are mutually exclusive. Picking the latter automatically disables the former.

Pickup-Only Delivery Customisation

A Shopify delivery customisation that hides the Home Delivery option at checkout for any cart containing a Pickup In Store Only product. The customisation ships with the app and works on every Shopify plan (Plus and non-Plus), but you have to activate it manually once.

How to activate it

1. In Shopify admin, go to Settings → Shipping and delivery.
2. Scroll to Customisations and click Add customisation.
3. From the list, choose SAAS CNC Pickup-Only Delivery Customisation.
4. Click Save.

You only need to do this once per store. Once active, the customisation runs automatically against every order that contains a Pickup-Only product.

What it does

When a cart contains a product flagged via your Pickup In Store Only metafield trigger, the customisation removes Home Delivery from the shipping options shown at checkout. Click and Collect becomes the only available fulfilment method for that order. Customers see only the pickup option, with no ability to switch to delivery.

The customisation reads the same metafield key configured on the Product Page block, so changing the metafield key in the block automatically updates what the customisation looks for.

When you can skip this

Skip the customisation only if you do not use Pickup In Store Only on any products. Custom messaging without Pickup-Only restriction (for example, "Allow 2 to 3 days for collection" on inter-store transfer items) does not require this step.

Checkout Pickup Banner

A Checkout UI extension that confirms the pickup store the customer chose. Renders in the Delivery section of the Shopify checkout page, alongside the Ship / Pickup toggle.

What the banner shows

When a customer reaches checkout after selecting a pickup store, the banner displays the chosen store's name and address inline in the Delivery section. This reinforces the pickup choice and reduces "wait, am I getting this shipped or picking up?" support contacts after order placement.

How to add it

1. In Shopify admin, go to Settings → Checkout → Customize.
2. Open the Checkout editor for your live theme.
3. In the left sidebar, click Delivery to expand the section.
4. Click Add block and select checkout-ui-pick-up-banner.
5. Drag the block to your preferred position within the Delivery section.
6. Click Save.

Customisation

The banner inherits your checkout's typography and colour scheme automatically. There are no per-block settings to configure beyond placement.

Developer reference

Integration points for theme developers, Shopify Flow users, and anyone customising the email or notification templates.

Where settings are stored

App configuration is split across four places. Knowing where each setting lives helps when debugging a misconfiguration or planning a migration.

Metafields

The app reads two kinds of metafield data: per-product metafields for custom messaging, and per-location metafields for store hours.

Product metafield (custom messaging)

• Namespace and key: Configurable. The merchant sets the key in the Product Page block. Common convention is custom.stock_override.
• Type: Single-line text.
• Value: A string that matches one of the configured trigger values (e.g. stock_override, Pickup_Only, pre_order).

To set the metafield in bulk, use Shopify's Metafield definitions feature, the bulk editor, or the Admin API. The app auto-registers the definition on first load if it doesn't exist yet.

Location metafield (store hours)

• Namespace and key: saas_int_cnc_plus.store_hours (auto-registered on app load).
• Type: JSON.
• Structure: Contains regular hours, CnC availability, and special hours for the location. Written via the Store Hours admin page.

The location metafield is intended to be edited through the Store Hours admin page rather than directly. Direct edits via the Admin API are supported but the JSON schema is not documented for direct write access in this version.

Liquid examples

Because messaging is driven by native product metafields, you can reference the same data in any Shopify Liquid template (order confirmation, shipping confirmation, ready-for-pickup, Shopify Flow email actions).

Order confirmation email

The Shopify order confirmation email is the most useful place to surface Click and Collect messaging. Customers always read it, and you can tailor it based on the delivery method and product metafields. Go to Settings → Notifications → Order confirmation → Edit code and add the snippets below.

1. Delivery-method-aware greeting

Replace the standard "Thank you for your purchase" greeting with one that adapts to how the customer is receiving the order. Pickup customers get a "ready for pickup" message, shipping customers get a "we'll let you know when it's shipped" message.

{% capture email_title %}Thank you for your purchase!{% endcapture %}
{% capture email_body %}
  {% if delivery_method == 'pick-up' %}
    Hi {{ customer.first_name }}, we're getting your order ready
    for pickup. We'll notify you when it's ready to collect.
  {% elsif requires_shipping %}
    Hi {{ customer.first_name }}, we're getting your order ready.
    We'll let you know when it's been shipped.
  {% else %}
    Hi {{ customer.first_name }}, thank you for your purchase!
  {% endif %}
{% endcapture %}

Render it in the email body with <h2>{{ email_title }}</h2> and <p>{{ email_body }}</p> in the existing content section of the template.

2. Special Pickup Notice banner for delayed-collection items

For pickup orders that include items flagged in the product metafield (e.g. made-to-order or transfer-required goods), show a styled banner explaining the additional preparation time. The banner only appears when the order is a pickup order and at least one cart line has the metafield set.

{% assign has_delayed_pickup_items = false %}

{% if delivery_method == 'pick-up' %}
  {% for line_item in line_items %}
    {% assign stock_override_value = line_item.product.metafields.custom.stock_override | downcase %}
    {% if stock_override_value == "true" %}
      {% assign has_delayed_pickup_items = true %}
      {% break %}
    {% endif %}
  {% endfor %}
{% endif %}

{% if has_delayed_pickup_items %}
  <table class="row section" style="margin: 20px 0;">
    <tr>
      <td class="section__cell">
        <center>
          <table class="container">
            <tr>
              <td style="background-color: #FFF3CD;
                         border-left: 4px solid #FFC107;
                         padding: 20px; border-radius: 4px;">
                <h3 style="margin-top: 0; color: #856404;">
                  📦 Special Pickup Notice
                </h3>
                <p style="color: #856404; line-height: 1.6;">
                  <strong>Your order contains items that require
                  additional preparation time.</strong>
                </p>
                <p style="color: #856404; line-height: 1.6;">
                  We will notify you via email when your complete
                  order is ready for pickup. Please allow up to
                  <strong>3 business days</strong> for preparation.
                </p>
                <p style="color: #856404; line-height: 1.6;">
                  <em>Thank you for your patience! We're working to
                  ensure your items are perfect and ready for
                  collection.</em>
                </p>
              </td>
            </tr>
          </table>
        </center>
      </td>
    </tr>
  </table>
{% endif %}

Paste this block between <p>{{ email_body }}</p> and the View your order button block. The banner uses inline styles for maximum compatibility across email clients (Outlook, Gmail, Apple Mail, mobile).

3. Pickup-only subtotal label

Shopify's default subtotal table shows "Shipping" as the label for all orders. For pickup orders, swap it to "Pickup" so the customer sees terminology that matches their order. Add the conditional inside the existing subtotal-line block:

{% if delivery_method == 'pick-up' %}
  <tr class="subtotal-line">
    <td class="subtotal-line__title"><p><span>Pickup</span></p></td>
    <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
    </td>
  </tr>
{% else %}
  <tr class="subtotal-line">
    <td class="subtotal-line__title"><p><span>Shipping</span></p></td>
    <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
    </td>
  </tr>
{% endif %}

Detecting a pickup order in any template

The same delivery_method == 'pick-up' pattern works in any notification template (shipping confirmation, ready-for-pickup, Shopify Flow email actions). For more detailed checks, use the fulfilment location:

{% if delivery_method == 'pick-up' %}
  <p>You'll receive an email when your order is ready for pickup at
     {{ order.fulfillment_locations.first.name }}.</p>
{% endif %}

Shopify Flow

The app uses native Shopify metafields and native Shopify locations, so all standard Shopify Flow triggers and actions work without additional integration:

• Order created → branch on product metafield. Send a different email or assign to a different fulfilment team based on whether the order contains a Pickup-Only product, a made-to-order product, or a standard stocked product.
• Order created → branch on fulfilment location. Route pickup orders to the picking team at the chosen store.
• Order created → set a custom tag. Tag pickup-only orders so they're filterable in the orders list.

No Shopify Flow connector needs to be installed. All data is accessible via the standard product, line item, location, and order Flow triggers.

Theme compatibility

The app is built against Shopify Online Store 2.0 themes. Tested compatibility:

• Dawn (Shopify reference theme). Full compatibility. No theme changes required.
• Other OS 2.0 free and paid themes. Full compatibility for the Locations Popup and Cart Popup app embeds. The Product Page block uses standard {% schema %} block conventions and works in any theme that supports app blocks in section JSON files.
• Legacy Liquid themes (pre-OS-2.0). Not supported. The app relies on Online Store 2.0 features (app embeds, JSON section templates, and app blocks) that pre-OS-2.0 themes do not have. To use Click and Collect, upgrade to an OS 2.0 theme. Dawn is free and a common starting point.

Sticky header banner

The optional store and delivery header banner block sits in the header section group. Most themes do not pin app blocks by default. For best results, add sticky positioning to the header section or move the block above the header bar. Speak to your theme developer if you need this customised.

Troubleshooting

Common symptoms and how to diagnose them. If your issue isn't here, see Support.

Postcode search returns no results

1. Open the app's Google API settings page. Confirm the key is saved.
2. Open Google Cloud Console → APIs & Services → Enabled APIs. Confirm both Distance Matrix API and Geocoding API are enabled on the project that owns the key.
3. Confirm the key is not restricted in a way that blocks your shop domain. Check Credentials → your key → Application restrictions.
4. Confirm each pickup location in Settings → Locations has a complete address. Locations with missing fields are silently skipped.

Custom message not appearing on a product

1. Open the product in Shopify admin. Confirm its metafield (under Custom data) is set to the exact trigger value, with no whitespace or case mismatch. Pickup_Only is different to pickup_only.
2. Open the Product Page block in the theme editor. Confirm Metafield Key matches the namespace and key on the product (e.g. custom.stock_override).
3. Confirm the trigger's Trigger Value matches the metafield value exactly.
4. Check Ignore Stock Levels. If it's set to Only locations with no stock, the message will appear only at zero-stock stores.

Home Delivery still appears for a Pickup-Only product

1. Open Online Store → Themes → Customize → App embeds. Confirm Cart Popup is on. Pickup-Only enforcement runs through the Cart Popup. With it off, Home Delivery is not blocked.
2. Confirm the product's metafield matches the trigger configured with Pickup In Store Only turned on.
3. Confirm the trigger's Ignore Stock Levels is not set to Only locations with no stock. That mode automatically disables Pickup In Store Only.
4. Confirm the Pickup-Only Delivery Customisation is activated in Settings → Shipping and delivery → Customisations. The Cart Popup blocks Home Delivery at the cart, but this customisation is what blocks it at checkout itself. Without it, customers can still complete checkout with Home Delivery on a Pickup-Only product.

Hours don't appear on store cards

1. Open the Store Hours admin page. Confirm the location has at least regular hours configured.
2. Open the Locations Popup block in the theme editor. Confirm Enable Store Hours is on (it is on by default).
3. Hard-refresh the storefront to clear any cached theme data.

The Cart Popup never opens at checkout

1. Confirm BOTH the Cart Popup and the Locations Popup app embeds are on in the theme editor. Cart Popup reads its store list, stock display, custom messaging, and styling from the Locations Popup block. Without Locations Popup enabled, Cart Popup will not display anything.
2. Open the storefront in a private window. Check the browser console for JavaScript errors. If there are theme-level conflicts (e.g. another app intercepting the checkout button), the Cart Popup may not get a chance to open.
3. Contact support with a link to your storefront and a short description of the symptom.

FAQ

Quick answers to the questions merchants most often ask. For longer explanations, jump to the linked section.

Support

For help with installation, configuration, or anything that's not behaving as documented, contact the team directly.

More resources

• Click & Collect marketing page — feature overview, customer-facing positioning, pricing.
• Shopify App Store listing — install link, reviews, version history.
• Omnichannel customer experiences — real-world Click and Collect implementations from existing customers.