Shops Ads: Enable Heavyweight Buy Online Pick Up in Store (BOPIS) Experience

Note: Use this document if your business already participated in or completed the development work for the new simplified Shops ads experience feature.

For instructions on enabling the lightweight BOPIS experience, see the documentation here.

About the BOPIS Product (BOPIS Omni Feature)

Shops ads for omni-channel business is designed to provide a seamless shopping experience by showing pick-up in-store options directly within Facebook or Instagram post-ad click.

BOPIS Product Functionality Overview

  1. Buyers will discover the ad through the Instagram/Facebook app.
  2. When a buyer clicks the ad, we will take them to the Instagram/Facebook shop PDP surface for consideration. This surface will:
    • Power recommendations such as bestsellers and frequently bought together products to show different products available in your store.
    • Display all product images, rich descriptions, pricing/discount, and variants for buyers to consider.
  3. Once the buyer likes the products, they can either add items to cart or check out directly.
    • The buyer will be shown the location of stores nearby.
    • The buyer will be able to select the pick-up store.
  4. When the buyer clicks on checkout, Meta will load the products into the advertiser’s website cart and present a payment/checkout page to proceed with the transaction in the in-app browser.
    • The store picked by the buyer in the step above will be shown on the checkout/cart page.
    • The buyer will need to enter additional information such as pick-up time, etc.
  5. The buyer can complete the checkout in the in-app browser. The checkout experience is the same as someone checking out products on your website using a mobile web browser.

Required Components

To integrate the BOPIS feature in your shop enabled with checkout experiences for Shops ads, you will need to support two things:

Estimated effort: 2 weeks

  1. Store location setup: This is required to allow customers to see nearby stores location.
  2. Location inventory setup feed: This is required to correctly map products inventory to stores to allow buyers to pick the ideal pick-up location.
ComponentAdvertiser StatusIntegration Level of EffortStakeholders

Store Location Setup

Adding stores in Business Manager

1 Day

Marketing Team, Feed Partner

Creating Local Inventory Catalog for Shops: A Step-by-Step Guide

Pick-up details

1-2 Weeks

eComm Team/Feed Partner

Checkout Process Integration

Additional field for BOPIS

1 Day

eCommTeam

1. Store Location Setup

Time estimate: 1 Day

You need to set up your store locations by following the steps mentioned in the Help Center article.

o take advantage of the lightweight Shops Ads offsite integration, the easiest way to add stores is in Business Manager.

  1. Go to Business Manager and select your business.
  2. Click on the All tools icon in the top left.
  3. Below the Manage business section, click Store locations.
  4. Click + Add stores.
  5. Click Next.
  6. Select Add manually and click Next.
  7. Fill out the fields below Add a store.
  8. Click Save when you have completed all the fields.

You need to set up your store locations by following the steps mentioned in the Help Center article.

There is also an option to add a feed that can be managed dynamically with these instructions.

2. Creating a Local Inventory Catalog: A Step-by-Step Guide

Time Estimate: 1-2 weeks

Prerequisites

  1. You have a Meta Business Account and a catalog set up

You need to set up your store locations by following the steps mentioned in the Help Center article.

There is also an option to add a feed that can be managed dynamically with these instructions.

Step 1: Prepare Your Local Inventory Feed

  1. Ensure your local inventory feed is in the correct format (CSV or XML).
  2. Verify that your feed includes the required columns:
    • retailer_item_id (unique identifier for each item. This id should be the same as the one from your shops catalog)
    • store_code (unique identifier for each store location. This should match the store code for the store locations you set up previously)
    • quantity (available quantity for each item at the store)


Step 2: Creating a Local Inventory Catalog

  1. Creating a new local catalog or updating a pre-existing catalog (separate from your Shop catalog)
    • Go to your Commerce Manager Business Asset page
    • Under the "Catalog" section, click the + icon to create a new catalog.
    • Under the "Catalog Type" section, select Local products or services, then click next
    • Select Ecommerce - local products as your catalog type, then select Store Location as the location type
    • In the "Configure settings -> Connect your catalog to a Page" field, select the shop you set up locations for in the previous step. Then click Create to create the catalog
  2. Uploading main feed
    • You can enter the catalog detail page from the previous creation flow or selecting the catalog in your commerce manager main page
    • Go to the data source tab and upload the feed you used to set up your Shops catalog as the main feed
  3. Uploading local inventory feed
    • Once you have uploaded the main feed, click on the "Data sources" tab again, now a section named "Local inventory feeds" should appear.
    • Click on Add new feed in the Local inventory feeds section.
    • Upload the local inventory feed you prepared in Step 1.

Step 3: Associate Your Local Inventory Catalog with Store Locations

  1. Click on the Settings tab on the left column
  2. Navigate to the Catalog tab, connect your store location page to the catalog under the "Stores" section

Verification and Troubleshooting

  1. Verify that your local inventory feed is correctly uploaded and associated with your store locations.
  2. Check for any errors or warnings in your feed upload report.
  3. Use Meta's debugging tools to troubleshoot any issues.

By following these steps, you should be able to successfully create a catalog with local inventory feed.

This option can be used if you have a fixed set of products/SKUs eligible for pick-up in store.

  • You need to provide us with the list of products/SKUs that are eligible for pick-up.

3. Checkout Process Integration

Time Estimate: 1-2 weeks

To correctly process orders from your Facebook and Instagram Shops, you will need to process the checkout URL that will be redirected to your e-commerce site.

Example checkout URL for items with pickup information:

https://www.example.com/custom/checkout?products=123:3,124:2,125:1&products_json={"123":{"store_code":"1"},124":{"store_code":"2"}}

Query Parameters

  • products_json: An optional JSON structure that contains the store_code information for every product in the order.

Additional Java Script BOPIS Code Snippet

/**
 * This method is to extract the order and store code from the query 
 * for product and in-store mapping in an order. 
 * @param {query} parsed URL query.
 * @return {product_store} Object of product ID and store code.
 * */
function processCheckout(query) {
  const searchData = JSON.parse(query.products_json);
  const product_store = Object.keys(searchData).map(productId => ({
        product: productId,
        store_code: searchData[productId].store_code,
      }));
  return product_store;
}