Juicer

The Juicer Blog

Setting up a Juicer Social Media Feed on Shopify

Posted January 19th, 2015 by Ryan in

    Shopify is an awesome solution if you are running an online store. It makes it super easy to set up a store, add products, manage inventory and take payments.

    It's also pretty easy to set up a Juicer feed on Shopify (though it takes slightly more effort than simply copying and pasting the embed code).

    First, visit Shopify and set up your account. There are several steps involved, but Shopify does a great job of walking you through them, so we won't get into them here.

    Also, make sure you are signed up to a Juicer account. Here's a great post about how to use Juicer and why it's an awesome tool for your site.

    Once you are signed up and signed in to Shopify, you'll find yourself on the admin page.

    If You Want Your Juicer Feed to Live On Its Own Separate Page

    First, create a new template for this page that contains the Juicer asset links.

    Click on "Themes" in the sidebar, as shown below:

    Themes Link

    Then click on the "..." button, and then "edit CSS/HTML."

    ... button, edit CSS?HTML

    From here, click on the link that says "Add a new template."

    Add a new Template

    After "Create a new template," select the "Page" option and name it "Juicer." Then click "Create template."

    New Template form

    You should now see a page that looks like this:

    Template Editor

    If you aren't familiar with HTML and CSS, don't worry! We'll walk you through it.

    Copy and paste the following code into the top of your template, as shown in this image:

    <script src="//assets.juicer.io/embed.js" type="text/javascript"></script>
    <link href="//assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
    

    Template Editor with Juicer code

    Then click "Save" in the upper right.

    Save Button

    Okay! Your template is now up and running. The next step is to create the page that the Juicer feed will live on.

    Click on "Pages" in the sidebar.

    Pages Button

    From here click on "Add a page" in the upper right.

    Add a Page

    Title this page something like "Social Media Feed."

    Then, in the "Content" section, click on the button on the right that looks like "< >". This will allow you to input HTML.

    HTML Button

    At this stage, you will need to have signed up for a Juicer account and created a feed with at least one social media source.

    In the "Content" section, copy and paste your Juicer embed code. This code is available from the "Embed In Your Site" area on your Juicer dashboard. You should also have received the code via email after signing up with Juicer.

    Once you've pasted in the embed code, delete the first two lines of the code (these are the same lines we added to the template), so it looks something like this:

    Juicer Embed

    Part of our example code here reads: data-feed-id="juicer". In your own code, the part that reads "Juicer" should be whatever you named your own feed.

    Next, scroll down to the section that says "Template" near the bottom of the page. From the drop-down menu, select the new template that you created, likely called "page.juicer".

    Template Dropdown

    Finally, click "Save page" in the upper right.

    Save Button

    If you click the link "View on your website" that has just appeared, you can see the page in action!

    View on your website

    If everything worked correctly, you should now see your Juicer feed on this page.

    Juicer Example

    If You Want Your Juicer Feed to Live On an Existing Page

    We're going to create a Juicer snippet that will allow you to add your Juicer feed to any existing page on your Shopify site.

    Click on "Themes" in the right sidebar.

    Themes Link

    Then click on the "..." button, then "edit CSS/HTML"

    ... button, edit CSS?HTML

    From here, scroll down, click on "Snippets" then "Add a new snippet"

    New Snippet

    Name your snippet "juicer-feed" and click "Create Snippet"

    Name Snippet Juicer Feed

    From here you'll have a big blank area to add text.

    If you haven't already signed up for a Juicer Account go ahead and do that. Sign up real quick and create your first feed. Once you've added your first social media source you'll find yourself at the Juicer dashboard. Click on "Embed in your site" in the right sidebar. Copy and paste the code here into your Shopify snippet:

    Embed code in snippet

    Click "Save"

    Then scroll up to the templates section. Choose which page you want your Juicer feed to show up on. For this example we are going to add it to the bottom of the homepage so we click on "index.liquid"

    Index

    Scroll down to the point on the page you want your Juicer feed to show up. We want ours to show up at the bottom so we're going to scroll all the way down to the bottom of this code.

    Then add the code {% include 'juicer-feed' %} Wherever you want the feed to show up.

    Include text

    Once you've added it click save and your Juicer feed will show up on that page. Easy peasy.

    Of course, if you have trouble, never hesitate to Contact Us and we will help you out.

    Good luck!