â–Ľ
Streaming live at 10am (PST)

White paper - Pinterest integration to eCommerce

@WebDev_Brandon @johnramos @jorn

Pinterest integration with Webflow

One of my customers here in Sweden is using Pinterest. She asked me to rebuild here site, the eCommerce part, since the old build was using Shopify. I moved the eCommerce to Webflow. At the same time, she was asking me about how we could build a better integration with Webflow.

I have done this with 3 different solutions, the 2 first do not require a business account but the solution with product feeds must be done with a business account.

Solution 1 Pinterest Save Button with enhanced information.

You can use a widget generator and easy install a static Pinterest Pin, but I decided to build a dynamic Save Button Pin with extra information to get a better Pin with more information when the Pin is saved.

In Webflow I used a Div warpper with a HTML embed. Using Absolute position to place the Save Button on top of my image

SaveBtn SaveBtn2

Here is a sample of my code to create the dynamic Save Button Pin

<a data-pin-do="buttonPin" data-pin-count="Select Pin count" data-pin-tall="true" href="https://www.pinterest.com/pin/create/button/?url=https://www.excellentskin.se/product/Slug&media=Main Image&description=Name - Description"></a>

SaveBtn3

Press the button and your product will be Pinned to your Pinterest wall.

Link to Pinterest Save Button https://developers.pinterest.com/docs/widgets/save/

Solution 2 Pinterest Rich Pins – Product Pins.

If you use Rich Pins and validate the Pin and your site Pinterest will scan your site and create Product Pins automatic that users can Pin to their Pinterest wall.

Rich Product Pins can use Open Graph, Schema.org and oEmbed. I have been using Open Graph since it’s very easy to implement in Webflow.

Paste following code to the inside tag on your Products Template.

<meta property="og:type" content="product" />
<meta property="og:title" content="Name" />
<meta property="og:description" content="Description" />
<meta property="og:url" content="https://www.excellentskin.se/product/Slug"/>
<meta property="og:site_name" content="Excellent Skin & Hair" />
<meta property="product:price:amount" content="Price" />
<meta property="product:price:currency" content="SEK" />
<meta property="og:availability" content="instock" />

ProductPin

Link to Pinterest Product Pins https://developers.pinterest.com/docs/rich-pins/products/

Link to Pinterest Rich Pins Validator https://developers.pinterest.com/tools/url-debugger/

Solution 3 Automatic Product Feeds.

If you create or convert your current Pinterest account to a Pinterest business account you will have the possibility to set up an automatic Product Feed from your eCommerce Webflow Products, using the current integrations in Webflow.

I have been using the Facebook integration but I’m sure that Google will work (have not tested)

In your Pinterest business account, you can create a product feed that will import your product file each 24H. You will find the feed under the sub menu adds (my menu is in Swedish, sorry)

It will take 1-2 days before Pinterest has validated your feed file. My file got rejected the first time. They said that my terms of purchase and return was to hard to find on the site. I answered their mail and pointed out where to find them and everything was ok

When your file is approved you have to go to your account and create product groups. The products and groups can be found in Pinterest. Now you will have Pinterest walls with all your products.

There are many more things you can do in Pinterest, but this white paper is about Webflow.

There is a known BUG in Webflow regarding the Facebook and Google integrations files. The files DO MISS 2 properties in the file:

TAG google_product_category and Brand

This is a problem for both Facebook and Google but also for Pinterest. The file is missing very important information. I have reported this to Webflow before

Since English is not my native language you have to live with my grammar and spelling

God luck

Janne Wassberg

3 Likes