Social media - Pinterest

Highlighted
Community Manager
Community Manager
298 8 255

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.


Tip: If you want to enable Product 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 theme editor to see if Pinterest integration is built in.

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 some 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, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Find the Snippets folder in the lefthand toolbar. Scroll down and click the Add a new snippet link.
  4. Type pin-button into the editable text box, and click on Create snippet.

    pin01.jpg

  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:

    pin02.jpg

  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 product.liquid to open it in the online text editor.

    pin03.jpg

  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 enter /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:

    {% render 'pin-button' %}

     

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

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes