Widget settings and design

Tabs and tab footers

Split the Find in Store widget into tabs such as Stock in Store and Delivery, show tabs only on some products, choose the store details shown, and add footer messages.

3 min readUpdated
widgettabsstock in storeclick and collectdeliveryfooterproduct tags

Tabs split the widget into views, such as Stock in Store and Delivery. Footers add a short message under a tab, such as pickup instructions.

Both are in Settings › Widget appearance. Click Save at the top right after you change them.

Tabs

The Tabs section, with two tabs, Stock in Stores for products tagged clearance and Delivery for all products, the Add tab button, the Show in store details checkboxes, and a preview of the two tabs

Out of the box, the widget has one tab, Stock in Store.

Add or edit a tab

  1. Under Tabs, click Add tab, or click the pencil next to a tab to edit it.
  2. Fill in the tab:
    • Tab title: the name customers see, for example Pick up in store.
    • Shows: what the tab shows. See What each tab can show.
    • Subtitle: optional text under the title, for example Ready in 2 hours.
    • Only for products tagged: show the tab only on products with these tags, separated by commas. Leave it empty to show the tab on every product.
  3. Click Done, then Save.

The Add tab window, with the Tab title Pick up in store, Shows set to Stock in Store, the Subtitle Ready in 2 hours, and an empty Only for products tagged field

To remove a tab, click the bin next to it, then Save.

What each tab can show

Shows What customers see
Stock in Store The nearest stores and how much stock each one has of the chosen variant.
Click & Collect The same store list as Stock in Store. Use it with its own title and footer for pickup, for example Pick up at {{selectedStoreName}}.
Delivery The customer enters their address and sees your shipping options and prices for the product.
None Only the tab’s title and subtitle, with no store list or footer.

Click & Collect doesn’t reserve stock or create an order. Customers choose a store, then buy online with your usual checkout.

Show in store details

Choose what customers see for each store: Trading Hours, Phone Number, Email, Address, and Map. Untick anything you don’t want to show.

Tab styles

Click Advanced styling to change the tab titles, subtitles, and the line under the active tab: their colour, size, weight, and border.

Tab footers

A footer is a short message under a tab, for example where to pick up an order.

The Tab footer section, with a footer titled Pick up at selectedStoreName for the Stock in Store tab when a store is selected, the Add Footer button, and a preview reading Pickup at Urban Stitch Brisbane, Bring your ID

  1. Under Tab footer, click Add Footer, or click the pencil next to a footer.
  2. Fill in the footer:
    • Title: for example Pick up at {{selectedStoreName}}. {{selectedStoreName}} is replaced with the store the customer chose.
    • Description: for example Bring your order number and photo ID.
    • Show on tab: the tab the footer belongs to.
    • Visible when: Store Is Selected, Store Is Not Selected, or Visible (always).
    • Font Weight: how bold the title is.
  3. Click Done, then Save.

The Add footer window, with the Title Pick up at selectedStoreName, the Description Bring your order number and photo ID, Show on tab set to Stock in Store, Visible when set to Store Is Selected, and Font Weight set to Normal

Each tab shows the first footer set to it. To show a different message, edit that footer, or delete it and add a new one.

Use Store Is Not Selected for a prompt, such as Choose a store to see pickup times, and Store Is Selected for details about that store.

Translate tabs and footers

Footer titles and descriptions can be translated in Translate in the app menu. See Translations.

Last updated