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 ‘Automated 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, Slideshow layout. After selecting your layout, we’ll give you an embed code to add to your Shopify store.

Flockler’s display layout options

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 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 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'.

Adding a section to Shopify

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

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

Editing a section for Shopify

Save changes.

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

Editing Shopify’s homepage

An editor opens and you need add the following section at the top:

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

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.

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

Flockler on the Shopify page

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 to the page content. From the text editor, click the ‘HTML button’.

Shopify content editor view

Then add Flockler anywhere in the text.

Adding Flockler to the Shopify content editor

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.

Did this answer your question?