How to add Flockler to Shopify

Here’s how to add Flockler to Shopify in a few minutes:

1. Create Automated Feeds to gather content from Instagram, Facebook, Twitter, YouTube, and more.

2. Choose your layout (Social Wall, Grid, Carousel, or Slideshow) and create an embed code.

3. Add Flockler to Shopify’s homepage or any other page.

1. Create Automated Feeds to gather content from IG, FB, Twitter, YouTube, and more

The first step is to define what you’d like to gather and display from social media channels. If you haven’t added any content to your Flockler yet or need more content, navigate to the Feeds tab in the navigation.

Click the Add a new feed button, and our bot will guide you through the process. For example, you can gather all the posts by a specific hashtag campaign like this:

With Flockler, you can combine feeds from multiple social media channels. Here’s a list of supported social media channels and content sources.

2. Choose your layout (Social Wall, Grid, Carousel, or Slideshow) and create an embed code.

Once you’ve got content added to your Flockler account, navigate to the ‘Display’ tab and create a Wall, Grid, Carousel, or Slideshow layout. After selecting your layout, we’ll give you an embed code to add to your Shopify store.

3. Add Flockler to Shopify’s homepage or any other page.

The last step is to add the Flockler embed code to your Shopify store.

You can add a social media feed to your Shopify homepage, all product and collection pages, or any individual page. Here are the various options in more detail.

1) Add a social media feed to your Shopify homepage

To embed a Flockler feed on Shopify’s homepage, you need to edit the theme layout. Go to Themes, click Actions, and select Edit code.

Go to Sections and click Add a new section.

Give it a name (e.g., flockler), and an editor opens up.

In the editor, replace the "Section name" with "flockler". Also, replace everything after {% endschema %} with Flockler’s embed code that you can find from Flockler’s Display tab.

Save changes.

Next, scroll up the list to Templates, click index.json.

Note: Old themes don't have index.json and the same information is located in settings_data.json under Config.

An editor opens and you need to add the following snippet inside sections at the top:

"flockler": {
  "type": "flockler"
},

After adding that, then you should see this:

Before saving changes to the template, scroll down the code editor, and you’ll find the order of homepage elements. Choose the right spot for Flockler and add it to the list. New themes use field named order while older ones have content_for_index.

Here’s an example of how it would be placed as the last item on the page:

Note: Make sure that each item ends with a comma except the last one.

Finally, save changes, and the preview of your template shows your Flockler on the Shopify homepage.

2) Add a social media feed to all products and collection pages

If you’d like the Flockler embed code to show on all collections and product pages, you can follow the steps above. Only now, edit either collection.json or product.json to define the layouts of your Shopify product pages or collections.

3) Add a social media feed to any individual Shopify Page

Sometimes you’d like to add a social media feed to an individual page. For example, you might want to have a unique feed visible on a product page.

One option is to embed Flockler directly into the page content. From the text editor, click the Show HTML button.

Then add Flockler anywhere in the text.

That’s all! You can use any of the options to display an elegant social media feed on your Shopify store.

If you have any questions or need assistance, don’t hesitate to hit the chat button on our website.