Table of Contents
How do I add a Pinterest button to my product pages? (Shopify Classic Admin)
Shopify cannot add Pinterest buttons for you to your theme. This is a general guide because each theme is coded differently which means the exact placement of your code will differ. If you are struggling with this tutorial, reach out to your designer or to our community.
Option 1: Easy level
Shop Connection is a FREE app in the App Store that can be used to add buttons like Pinterest. (Apps are supported by the their creators so if you have any issues, email fraser@getwillet.com)
Option 2: Difficult level
Here you're going to install the button code into your theme.
Fortunately you don't need a Pinterest account to get a button on your site. If you would like an account you can get one here: http://pinterest.com/landing/
This is the code for a Pinterest button:
<a href="http://pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&media={{ product.featured_image | product_img_url: 'compact' | split:'?' | first }}&description={{ product.title | escape | replace:' ','%20' }}" class="pin-it-button" count-layout="none">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
All we need to do here is create a snippet in our theme editor to house this button. If you already have some social buttons in your product page you may either already have a snippet or a section in your product.liquid template for social sharing buttons. Check your theme and use your judgement.
Now just paste our button code into the snippet:
All that's left now is to include the snippet in our product.liquid template where you would like the button to appear using the liquid include tag like so:
{% include 'pinterest' %}
How do I add a Pinterest button to my product pages? (Shopify 2 Admin)
Great idea! Pinterest helps generate more sales for online stores.
There are two ways to add a Pinterest button to the product page of your Shopify store:
Option 1: Add an app
Visit the Shopify App Store and search "Pinterest."
There are lots of free options: tools like Shop Connection can even help you add multiple social sharing buttons at the same time.
It's easy! Just pick an app, install it, and follow the simple steps provided.
Option 2: Add it yourself
You're brave! You're capable! You can add the code for your Pinterest button right into your store's theme – and you can do it all on your own.
Here's how:
Create a snippet
In order to add a Pinterest button to your store, you must create a "snippet" that contains the code for this new button, and embed it within your store's theme.
Sound tough? It's not, promise.
-
First, log into your store, and click on Themes tab. This will take you to a preview of your theme. In the sidebar, click on the Template Editor button.
This will return you to the dashboard. - Find the "Snippets" section in the lefthand toolbar. Scroll down until you see "add a new snippet" in blue text, and click on it.
-
A textbox will appear with the words "Add a new snippet."
- Type "Pinterest" into the editable text box, and hit "Create snippet."
-
Paste the following code in the code editor that appears in the centre of your screen:
<a href="http://pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&media={{ product.featured_image | product_img_url: 'compact' | split:'?' | first }}&description={{ product.title | escape | replace:' ','%20' }}" class="pin-it-button" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
It should look like this in the "code editor" window:
- Hit save.
You've just created a snippet that includes all the information for your Pinterest button!
Point to your snippet
All that's left now is to add one line into your store theme's code that will point to your newly created Pinterest snippet.
- Find the "Templates" section in the lefthand toolbar.
- Select product.liquid.. A text window will appear, containing the code to your product pages.
- Choose a spot for your new button.
Note: If you already have some social sharing buttons on your product page, you might already have a snippet or product.liquid template dedicated to social sharing functions. If this is the case, you can add the Pinterest button code in the same place so all social sharing buttons will be grouped together on your product pages.
You can add the Pinterest button anywhere on your product pages. One logical place to put it is near your "Add to Cart" or "Buy Now" buttons. If you choose to add your button here, you'll want to add it near:
</form>
Can't find this spot in your code by scanning? Hit "CTRL-F" or "command f" and type in "/form". This will bring you right to it.
4. Now that you've found </form> (or wherever you want to add your button), you're ready to add this one simple line directly below it:
{% include 'pinterest' %}
5. Hit Save one last time… and you've done it!
You are now the proud owner of a "Pin it" button. It should look something like this:
Visit any of your product pages to make sure your new button is displaying correctly.
