By Sveta Oksen, February 11, 2019

In this tutorial, I will explain how to display the configurable options drop-downs in your Facebook shop.

What are the product option drop-downs in a Facebook shop?

Facebook allows displaying options drop-downs on the product page.

Options drop-downs are a great wait to improve the user experience in your Facebook shop. By letting the customer select the product options on Facebook, you create a smoother buying experience. That in turn, results in higher conversion rates.

In the following screenshot, the product has two options - color and size.

Once the customer changes the options - the product info (image, price, description, etc) changes accordingly. If for example, the customer will change the color to Yellow - the image will change to yellow.

Displaying your product options on Facebook

Note: In this article, I assume that you’ve already created a Facebook shop, and integrated it with your Magento 2 store. If not, please first read our previous article “How to integrate your Magento 2 site with Facebook (without an extension)”.

To display configurable product options on Facebook, you should implement something called variants in your feed file. Here you can find the official Facebook explanation regarding variants.

If you haven’t set up your feed file yet, please read my previous article “How to integrate your Magento 2 site with Facebook (without an extension)” (particularly the “The Step by Step guide to integrating your Magento website with Facebook (without extension)” section).

Otherwise, let me explain to you what are variants and how to implement them in your feed file.

Facebook Shop Variants

Facebook shop variants are products that only differ in one or few attributes, like size, color, etc. These products are grouped under one “main” product - Facebook calls it a “product group”.

Example:

Product group: Adidas T-shirt

1. Variant #1: Adidas T-shirt, color: white, size: M
2. Variant #2:  Adidas T-shirt, color: white, size: L
3. Variant #3: Adidas T-shirt, color: black, size: L

In this example, the Facebook shop will display one product - Adidas T-shirt, and two options’ drop-downs: color and size. In the color drop-down, there will be 2 selections: white and black. In the size drop-down, there will be 2 selections: M and L.

Note: currently Facebook only supports the following options in the variants: color, size, material, and pattern.

Magento configurable products and Facebook variants

The concept of the Facebook variants is very similar to the configurable products in Magento.

Facebook’s product group is conceptually the same as Magento’s configurable product, and Facebook’s variants are conceptually the same as Magento’s children products of the configurable product.

Therefore, if you have configurable products in your Magento store, it should be very intuitive for you to set the Facebook variants.

Implementing variants in the feed file

Now I will show how to construct your feed file to implement the Facebook variants.

In the feed file, you should create a line for each variant. You should fill some string in the item_group_id that will be the same in all lines that represent a variant of the same product. That way Facebook knows that all these variants belong to one product group.

Let’s look at the following example. Here we have a hoodie named “Chaz Kangeroo Hoodie”. It is a configurable product that has 15 children products. Its configurable attributes are color (Black, Gray, and Orange) and size (XS, S, M, L, and XL).

Therefore, in the feed file, we add 15 rows, one per child product (Pay attention that we don’t create a row for the configurable product, only for its children). All the rows share the same item_group_id. In this example, it is 12312310_67. All the rows have different values in color or size. Pay attention that some of the rows also have different images (and other fields like price, description, etc)

In the following screenshot, we only show some of the columns. You can download the full feed file here.

Uploading the feed file to Facebook

The last step is to upload the feed file to Facebook through the Facebook Business Manager. The upload process is covered in detail in our previous article “How to integrate your Magento 2 site with Facebook (without an extension)”, so if you are new to the Facebook feed, I highly recommend to read it and come back here afterwards. Otherwise, I will go through it briefly.

Go to the Facebook Business Manager, click on “Catalogs”. Select the catalog of your shop or any catalog that you want to update. On the left menu, click “Product Data Sources”.

If you’ve already set up some feed as your data source, click on it. Otherwise, click “Add Data Source” -> “Add New Product”. If you only want to upload your feed file once, click “Upload Once” and select your feed file. Otherwise, click “Set up a Schedule”, and fill in the location of your feed file. Also, select the frequency that you want Facebook to fetch your feed file at.

Click “Start Upload”. When the upload is finished, go to your Facebook shop, and your configurable product should show up. It should display options drop-downs.

Note that if you view your products in the Business Manager, you won’t see one product with options. Instead, you will see all of its variants. Like here -

Summing Up

In this tutorial, I showed you how to display option drop-downs in your Facebook shop products. I explained to you what are the variants and how to implement them in your feed file.

I hope that you’ve succeeded to set up your feed file and your products display the options in your Facebook shop. If not, please write me in comments and I will try to help!