Add overlays

  • Updated

In Spire, you can add the following three overlays:

  • Sign In – Allow users to sign in without being redirected to the Sign In page. After a user logs in using the overlay, the page refreshes, and any current selections persist, such as product list filters.
  • Store Pickup – Allow users to select a store for pickup with support for one page checkout. The overlay displays the distance of each location from the address the user entered, as well as a message for each location indicating if the user's cart items are in stock, low stock, or out of stock.
  • Address Book – Allow users to manage shipping and billing addresses without being redirected to the Addresses page. From the overlay, users can search for addresses, and view results in list or map view.

Add Sign In, Store Pickup, or Address Book overlay

  1. Log in to the Admin Console.
  2. Go to the View Website icon, and toggle Content Editor to On.
  3. Click Website for the Spire website you want to edit.
  4. Go to Style Guide > Overlay.
  5. Toggle the desired overlay to On: Sign In, Store Pickup, or Address Book.
  6. Click Save.

To view an example of the overlay on your site, go to the Pages tab and select the overlay you enabled above:

  • Sign In Overlay
  • Store Pickup Overlay
  • Address Book Overlay

Widgets for each overlay

Optimizely Configured Commerce has widgets automatically enabled for each overlay.