Add a Pinterest button

Tip

If you want to create Buyable Pins for your products on Pinterest, you need to add the Pinterest sales channel in your Shopify admin.

You can add Pinterest buttons to your online store's product pages to help generate more sales. Most themes include Pinterest integration by default — check the Customize theme page in your Shopify admin to see if Pinterest integration is built in (you'll find settings for this in the Social Sharing or Product Pages section).

If your theme does not already add a Pin button to your product page, there are two ways that you can add one: install an app, or add the button to your theme manually.

Install an app

The Shopify App Store has a number of apps available to help connect your store to Pinterest.

Add the button yourself

From the Edit HTML/CSS page, you can manually edit your store's theme so that it displays Pinterest buttons on your product pages.

Here's how:

Create a Pinterest snippet

To add a Pinterest button to your store, you must create a code snippet for the new button, and embed it within your store's theme:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Find the Snippets folder in the lefthand toolbar. Scroll down and click on the Add a new snippet link.

  4. Type pin-button into the editable text box, and click on Create snippet.

    Pinterest snippet
  5. Paste the following code in the code editor:

    
    <a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&amp;media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&amp;description={{ product.title | strip_html | truncate: 200, '' | url_param_escape }}{% for tag in product.tags limit: 3 %}{{ tag | replace: ' ', '-' | prepend: ' #' | url_param_escape }}{% endfor %}" data-pin-do="buttonPin" data-pin-config="none">
      <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
    </a>
    <script async src="//assets.pinterest.com/js/pinit.js"></script>
    
    

    It should look like this in the code editor window:

    Pinterest sample snippet
  6. Save your changes. This creates a snippet that includes all the information for your Pinterest button.

Point to your snippet

All that's left to do is add one line into your store theme's code that will point to your newly created Pinterest snippet.

  1. On the Edit HTML/CSS page, find the Templates section in the lefthand toolbar. Under Templates, locate and click on product.liquid to open it in the online text editor.

    Product liquid
  2. Choose a spot for your new button and include it.

    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 there, you'll want to add it near the closing </form> tag.

    Can't find this spot in your code by scanning? Press ctrl + F on a PC or command + F on a Mac and type in /form. This will bring you right to it.

    Now that you've found </form> (or wherever you want to add your button), you're ready to add this line of code directly above it:

    
    {% include 'pin-button' %}
    
    
  3. Click Save.

  4. Visit any of your product pages to make sure your new button is displaying correctly.

Want to discuss this page?

Visit the Shopify Community