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:
Then click on the “…” button, and then “edit CSS/HTML.”
From here, click on the link that says “Add a new template.”
After “Create a new template,” select the “Page” option and name it “Juicer.” Then click “Create template.”
You should now see a page that looks like this:
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" />
Then click “Save” in the upper right.
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.
From here click on “Add a page” in the upper right.
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.
At this stage, you will need to have signed up for a Juicer account and created a social media 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:
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”.
Finally, click “Save page” in the upper right.
If you click the link “View on your website” that has just appeared, you can see the page in action!
If everything worked correctly, you should now see your Juicer feed on this page.
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 sidebar.
Then click on the “…” button, then “edit CSS/HTML”
From here, scroll down, click on “Snippets” then “Add a new snippet”
Name your snippet "juicer-feed" and click “Create Snippet”
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:
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"
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.
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.
