Skip to main content

Loyalty with Storefront

When integrating your third-party loyalty program with Instacart Storefront, a customer links their loyalty account to their Instacart account. You can create a loyalty sign-up flow that works for your brand.

Example journey​

The following example shows a customer journey when there is a full integration between Storefront and a third-party loyalty program. In this example, a customer sees a creative that advertises your loyalty program. They click the link and are directed to the loyalty program page. The phone number field displays the phone number associated with the signed-in customer. If the number matches an existing loyalty account, the loyalty account is linked. Otherwise, an account is created.

  1. A customer clicks a link in a creative to sign up for a loyalty account.

    Shows a banner at the top of the homepage.

    The program page opens with the customer's phone number pre-populated.

    Shows an example program page for Fresh Rewards, which is a fictional rewards program.

  2. If a customer account hasn't yet been verified with Instacart, the app prompts the customer to check their text app for a verification code. The flow is similar for both a new sign up and linking an existing loyalty account. If the code is correct, the customer account and loyalty accounts are linked. Otherwise, the customer sees an error message.

    Shows the verification screens, where the customer enters the code that is sent by text to their mobile phone number.

  3. The customer shops and adds items to the cart.

  4. To review the items in the cart, the customer clicks the cart icon. If the retailer offers loyalty pricing for the items in the cart, the original price is crossed out and the loyalty-based discount price is shown above it. This is the same treatment used for other types of discounts.

  5. The customer clicks Go to checkout and places the order as usual. Loyalty savings are included in the discount subtotal.

Site changes​

In a full integration, the following changes can occur:

  • Loyalty program page. An internal page that describes the program and includes a way to sign up for a loyalty account with a phone number. The page makes an API call to your loyalty provider to validate or create a loyalty account.
  • Header. A button that links to the internal loyalty program page.
  • Loyalty creatives. Creatives that link to the loyalty program page.
  • Loyalty collection. A collection of products with loyalty pricing or coupons.
  • Loyalty pricing. If you implement loyalty pricing, discounts are shown in the cart.

Configuration​

You have two options for integration:

  • Full integration. Customers sign up for loyalty from your storefront. (Recommended)
  • Link integration. Customers sign up for loyalty somewhere else and then add the loyalty account number on your storefront.

Full integration​

Customers sign up for loyalty from your storefront. A full integration is the preferred user experience because the customer doesn't have to leave the storefront to sign up for your loyalty program.

The following items are required for the integration.

Third-party loyalty program​

A third-party loyalty program with an API that supports the following activities:

  • Get account
  • Create account
  • (Optional) Remove account

Loyalty program page assets​

The following image shows the assets and text that can appear on the loyalty program page:

Shows the template for the loyalty program page. The callouts are described below the image.

  1. Background image
    • Mobile: 1425x402 pixels
    • Desktop: 1000x310 pixels
  2. Icon
    • Mobile: 84x84 pixels
    • Desktop: 110x110 pixels
  3. Name of the loyalty program
  4. Primary text
  5. Field for phone number
  6. Secondary text with up to two hyperlinks
  7. Benefits, each with:
    • Icon: 192x192 pixels
    • Name: Approximately 36 characters
    • Description: Approximately 64 characters
  8. Legal disclosure with up to two hyperlinks

You can choose to link to your loyalty program page from the navigation in the web app or native apps in any of the following ways:

  • Primary link
  • Secondary link
  • Call-to-action link

For more information about the navigation link options and how they appear in the storefront, see the descriptions for each type of link in the Merchandising > Navigation page in the Instacart Platform Portal.

Banners​

To advertise your loyalty program, create banners that link to your loyalty program page. Banners are displayed to all customers, regardless of loyalty status. For more information about banners for Storefront, see Promotional banners.

Collections​

To advertise savings for loyalty customers, first define the loyalty pricing, promotions, or coupons, and then create collections that contain those items. Collections are displayed to all customers, regardless of loyalty status. For more information about collections, see Collections.

Customers sign up for loyalty somewhere else and then add the loyalty account number in their customer profile on your storefront's Loyalty Cards page.

For a link integration, you need to provide the following items:

  • Third-party loyalty program with an API that can be used to validate the account status.
  • The URL to your existing external loyalty program page, which can be linked from the storefront header.
Last updated on