Note: you’ll need to activate the Commerce add-on to use this feature. Learn more about Commerce add-on.

If you’d like the Wall, Grid, Carousel, or Slideshow layout to display posts by a product category, there are two options:

Manually choose the product category for a Display layout or
Set the product filtering dynamically on your webshop

If you’d like to use the first option and create the embed code manually, you can find step-by-step instructions here.

But in this article, we will walk you through the second option. This option allows you to automatically show the right social media posts on each product category page.

Set the product category filtering dynamically on your webshop

This option requires a bit of development work from your developers as they will need to dynamically set the product category id for the embed code depending on the page in question.

From below, you will find a simple and advanced method.

Simple method

To show an embed code with the product category filtering, you can use query parameters with product category ids from your webshop and product feed. You can add one or multiple product category ids.

Follow these steps:

Make sure you’ve submitted products to Flockler with Google’s category ids.
Tag products on social media posts on the 'Commerce' tab.
Create an embed code (Wall, Grid, Carousel, or Slideshow) on Flockler’s Display tab.

Then, copy the embed code and add a query parameter to the URL within the embed code like this: ?productCategoryIds[]=PRODUCTCATEGORY. Replace the PRODUCTCATEGORY with the product category id from your webshop.

Here’s an example embed code with a fictional product category 456:

<div id="flockler-embed-1847b92eb130c2ddfa7b8f4ee9ebe552"></div>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/1847b92eb130c2ddfa7b8f4ee9ebe552?productCategoryIds[]=456" async></script>

Showing posts from multiple product categories

You can add multiple product categories like this:

?productCategoryIds[]=456&productCategoryIds[]=4355

Show all posts if there are no products tagged from the product category

Sometimes, you might not have any social media posts tagged matching the product category and you’d like to show all posts instead of loading the embed code empty. You can do that by adding:

&productShowAllFallback=true

Here’s an example code with two product categories and a fallback to show all posts if there are no matches.

<div id="flockler-embed-1847b92eb130c2ddfa7b8f4ee9ebe552"></div>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/1847b92eb130c2ddfa7b8f4ee9ebe552?productCategoryIds[]=456&productCategoryIds[]=4355&productShowAllFallback=true" async></script>

Advanced method

The advanced method allows even more control for your developers to integrate Flockler into your webshop.

For example, your team can add a fallback behaviour if products from a certain category has not been tagged on any of the social media posts yet. Also, if you happen to have submitted multiple product feeds to Flockler (e.g., language versions), you can define which product feed is in use.

In this demo carousel layout, the first Instagram image on the left has a product tagged.

If I’d like to show only Instagram images tagged with that specific product category, I’d follow these steps:

Make sure you’ve submitted products to Flockler with Google’s category ids.
Tag products on social media posts on the 'Commerce' tab.

Create an embed code (Wall, Grid, Carousel, or Slideshow) on Flockler’s Display tab. Here’s my example code:

<div id="flockler-embed-1847b92eb130c2ddfa7b8f4ee9ebe552"></div> <script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/1847b92eb130c2ddfa7b8f4ee9ebe552" async></script>

From the embed code, find the UUID needed in the next step. In my example embed code, the UUID is 1847b92eb130c2ddfa7b8f4ee9ebe552 and you can find it at the start of the embed code.
Then, I will place the embed code to my website together with an additional script in the middle:

<div id="flockler-embed-1847b92eb130c2ddfa7b8f4ee9ebe552"></div>
<script>
  var _flocklerOverride = _flocklerOverride || {};
  _flocklerOverride['1847b92eb130c2ddfa7b8f4ee9ebe552'] = {
    productCategoryIds: ['456']
  };
</script>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/1847b92eb130c2ddfa7b8f4ee9ebe552" async></script>

_flocklerOverride has the UUID value described in step 4.

The productCategoryIds value (here '456') you will find from your webshop and product feed.

Adding multiple product categories

You can add multiple product categories to the embed code, separated by a comma like this [PRODUCTCATEGORY_1, PRODUCTCATEGORY_2].

Here’s an example embed code with product category ids 456 and 4355:

<div id="flockler-embed-1847b92eb130c2ddfa7b8f4ee9ebe552"></div>
<script>
  var _flocklerOverride = _flocklerOverride || {};
  _flocklerOverride['1847b92eb130c2ddfa7b8f4ee9ebe552'] = {
    productCategoryIds: ['456','4355']
  };
</script>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/1847b92eb130c2ddfa7b8f4ee9ebe552" async></script>

Show all posts if there are no products tagged with a matching category

Sometimes, you might not have any social media posts tagged with matching product category and you’d like to show all posts instead of loading the embed code empty. You can do that by adding:

productShowAllFallback: true

Example code with two unavailable product categories and fallback to show all posts:

<div id="flockler-embed-1847b92eb130c2ddfa7b8f4ee9ebe552"></div>
<script>
var _flocklerOverride = _flocklerOverride || {};
_flocklerOverride['1847b92eb130c2ddfa7b8f4ee9ebe552'] = {
productCategoryIds: [312, 155],
productShowAllFallback: true
};
</script>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/1847b92eb130c2ddfa7b8f4ee9ebe552" async></script>

If you have any questions regarding the product and product category filtering, please don’t hesitate to send us a message via live chat or email. Our team is happy to help!