Warning (Click here to dismiss)
Pixel Union cannot provide support for themes modified using this guide. Support for theme modifications are best directed toward a 3rd-party development service such as Storetasker
Pinterest is a popular image-sharing platform that many merchants use to bolster their marketing efforts. Adding a Pinterest Save Button is a common customization to connect Pinterest and Shopify
Follow this guide to sign up with Pinterest and adjust your theme files to display a Pinterest save button.
Sign up with Pinterest
It's ideal to start with a business account for Pinterest so customers can access your product and promotional images with ease.
Adjust theme files to add Pinterest save button
There are two main steps for adding a Pinterest Save Button for images: (1) add script to the theme.liquid and (2) inject button code into theme files.
It's always worthwhile to back up your work before making theme file adjustments, so consider duplicating your theme and other best practices before completing this adjustment.
What steps should I take before modifying theme files?
Add script to the theme.liquid
In the Online Store, select Actions, then Edit code.
Open Layout, then theme.liquid.
In this file, look for the closing Head tag:
</head>
Just before this line of code, add the following script:
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
></script>
Save and proceed to the next step.
Inject button code into theme files
Now that the two platforms are connected by this added script, the next step is to include the Save Button's code itself.
Formatted in HTML, this code is added directly to the theme file for the image(s):
<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark">
</a>Where you'd like these to appear would determine which theme files to adjust. As an example, here is how the button is added to the slideshow images for Empire.
Empire's slideshow draws the main image code from the static-slideshow.liquid file in Sections.
Generally, these codes are added within the image tag-formatted code. In Empire's case, this would be just before the various image display options begin:
This could be applied more broadly by looking for codes beginning with 'IMG' then adding the code within the same DIV, SPAN, etc.
When clicked by the customer, they will be presented with a modal window offering various sizes of the image.
Learn more about this process
Check out Pinterest's own guide:
Integrate save button with your Shopify theme