If you want to display Juicer 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 appear on that page.
If you want to display Juicer on a new, 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 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.
In addition, you can try the iframe version of Juicer by obtaining that code from the "Embed in your site" panel of the Juicer dashboard.
If you have any questions or need any help please email us at hello@juicer.io