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
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
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.
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:
Just before this line of code, add the following 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: