3 Ways to Add Pinterest Hover Effect to your Shopify store

Pinterest hover effect on shopify

When running a Shopify store, you want to make sure that you are making it as easy as possible for your visitors to share your content on their preferred social network. Facebook and twitter sharing is pretty straightforward.  Pinterest is a different story. With it’s focus on images, adding the Pinterest hover effect to your images could drastically increase the amount of pins that your website receives.

If you do not have a Pinterest button on your site, now might be a good time to add one. Pew research has Pinterest as the second most popular social network behind Facebook in terms of percentage of total internet users. Shareaholic’s Q4 Social Media report places Pinterest as the number 2 referrer of social traffic, behind only Facebook and referring more traffic than all of the other remaining social networks combined.

So we have established that Pinterest is huge. Now, how can we encourage Pinterest users to share what they like on our web site? The hover pin, “hovers” over an image when your mouse is on top of the image.

The behavior we want to add to our site is actually the same functionality in the Pinterest browser extension. If you are curious, here is a link to the Pinterest extension for the Chrome browser. If this is the functionality Pinterest is building for its power users, it is probably the most effective method of encouraging sharing on the network.

Below I am going to cover a few of the different methods of adding the Pinterest hover effect to images on your site. I will cover adding the effect to a few of the more popular platforms currently on the web. If your website or ecommerce store platform isn’t covered it should not be too hard to apply these examples to your site.

1. Adding Pinterest hover effect to a Shopify ecommerce website.

If you are using one of the more popular themes from Shopify you will most likely have some form of Pinterest sharing enabled on your site. One of the easiest ways to determine if you have Pinterest sharing enabled is to head over to one of your product pages.

Here is an example from one of my wife’s online baby store’s product pages. The theme we are using has Pinterest enabled, however, does not have the hover effect that she covets.

In my case, Pinterest sharing is enabled, however, we need to modify the sharing to include the hover effect. The Pinterest sharing is currently working so you can safely assume that the required javascript is being properly loaded into your site. You do not want to re-install the Pinterest sharing code. If you duplicate the library you might have some unanticipated consequences.

In this case, we are going to add a few parameters to the javascript that is requesting the Pinterest library. We do not want to add the library from scratch we need to find it in your existing template.

In most cases, you will be able to find the library in your theme.liquid file. I hate reading through every line of code so I will hit command + f and then type ‘pinit.js’ which is the name of the library. If you do not find it in the theme.liquid file you are going to have to go hunting through all of your theme files.

In my case the pinit.js library in called from the theme.liquid file. Here is what it looks like:

find Pinterest in shopify theme

CMD + F pinit.js

Now that we have found the html tag that is including the Pinterest library we are going to add a new attribute that will turn on the hover effect. Put your cursor near the end of the script tag, right before the closing tag, ‘>’ and paste in the following text: data-pin-hover=”true”

Here is what it looks like in my case:

Shopify add pinterest hover effect

Save your template and visit the the product page again. Now when you hover over an image you should see the Pinit button magically appear. If the hover effect is not working, try refreshing the page again. If still not working try clearing your browser cache and your browsing history.

If the Pinit share button is still showing up, but the hover effect is not working you might have mistyped the addition to the script tag. If you are spending too much time or if you are running into issues you might want to consider skipping down to option 3.

2. Adding Pinterest hover effect to a Shopify website with no Pinterest sharing enabled.

If you are looking to add the Pinterest hover effect to your website, but do not currently have any Pinterest sharing enabled, this is the step for you. Your first step is to check your theme settings to ensure that there is not an easier way for you to add the Pinterest sharing.

From your Shopify dashboard, click on online store, then themes and then customize theme. All themes are different, so I cannot give you a specific location within your theme to look. In most of the themes I have worked with the theme designers do a pretty good job of giving you options for social sharing. Double check that you do not have any options to add Pinterest social sharing to your site.

If you have come up empty after searching for social sharing options in your theme don’t worry, adding the Pinterest sharing and hover effect from scratch is not too difficult. Head to your theme editor again. Open the theme.liquid file again. For good measure, let’s search for the existence of the Pinterest sharing code again, command F and then type pinit.js.

If your search returns 0 results we can modify the theme files. Hit command F again to perform a new search. Now we are searching for the closing body tag, </body>.

If you want Pinterest sharing enabled on all pages, you can place the sharing script right above the closing body tag. For the purposes of this example, we are going to limit the sharing to product pages. To do this I am going to add a conditional statement to the template file. Here is what the conditional statement looks like to include the Pinterest sharing script on product pages exclusively.

{% if template == ‘product’ %}

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>

{% endif %}

Save the template file and check out your product page again.  If all was done correctly, you should see the Pin it button hover over any images on the page. If it is not working correctly, double check your modifications to the product page.

3. Have someone else add the Pinterest Hover Effect to your Shopify store.

If all else fails, you can always have someone else add the script and functionality to your site. Today there are too many options for finding virtual workers. For this type of task I recommend using one of the larger players. My recommendation is Elance.  Elance has a group setup for ‘Shopify Experts.’  All of the professionals in this group have passed a test and have been granted access into the group.

If you have never used Elance before, don’t let that stop you. You can setup an account and have your first job posted and successfully fulfilled in an afternoon.  Start by creating an account.

 

Elance client registration

Step 1. Create an account

Your next step is to add a payment method to your account. My preference is paypal as you do not have to worry about verifying your bank account, etc. You can also use credit cards or bank accounts but you will need to take additional steps to verify your account. Elance will make two small debits or credits to your account and you will have to verify those amounts.

Now you are ready to post your job. Click on the post your job button.

Elance job for pinterest hover effect

Step 2. Post your job

The post your job form is pretty straightforward. This is a pretty simple job, so you do not want to over complicate it. For the name your job field, try something like, Add Pinterest hover effect to images on existing shopify store.

The next field is titled describe it. Use this field to add some more information about your job. In this case, I would say something like:

I have an existing shopify store and I want to add the Pinterest hover effect. This should not be difficult for a shopify expert. When applying, please respond with your favorite Disney character in the first line of the proposal.

For select the category of work, pick IT & Programming and pick Web Programming for the sub category.

In the Request specific skills or groups type shopify. Then select “Shopify Experts.”  You should see select groups show up to the right of the drop down. Click on the checkbox, “Receive proposals only from members of this group.” Pictured here:

selecting shopify experts in elance

Step 3. Select Shopify Experts

You can then set work arrangement. For this type of job, I would recommend using an hourly arrangement and I would use the about $10 to $15 /hr price range. Enter 3 in the hrs/week and select 1 – 2 weeks in the duration field.

If you have a strong preference for working with someone in a specific location or want more granular controls over who can see your posting and apply to your job you can use the Location, Privacy and Other Options to further tune your posting. For this type of job, I do not recommend going overboard with the requirements as the task is very straightforward.

Click on continue. Do not feature the posting or spending any money advertising the posting. Now sit back and wait for the proposals to stream in. If a proposal does not have the contractor’s favorite Disney character in the first line, reject them. If they are not paying attention to the details at this point they are probably not worth working with.

Do not wait too long to make a decision. You are going to receive an ungodly amount of proposals. Once someone has met all of your criteria and you are ready to move forward award the job to the contractor.

One final step. Do not share your main Shopify username and password with the contractor. You just met them, let’s use some discretion! In your shopify admin, click on settings, account and find the staff members section. Click on add a staff member.

Shopify add user to update pinterest sharing

We just met. Let’s date first

For some reason, shopify gives new users full admin rights. When working with a new contractor I prefer to limit what they can see as much as possible. Click on the user you just added. Then click the checkbox limit access for [User Name].

I will then uncheck all but themes in sales channel. If the contractor needs more access they will have to ask you for it.

Elance hire shopify experts

Only allowing first base access on the first date.

To recap, I have shown you three ways to add the Pinterest hover effect to your shopify ecommerce store. If you have any other issues, please do not hesitate to contact us or add your comment below.

Are You Ready To Start Your Own Online Business?

Start An Online Store Crash Course

Sign up now to receive our 5 Step FREE Crash Course to starting your own online store. Learn the tricks we have used with clients for years. Get started building your future now.

  • FREE 5 Step Crash Course
  • Designed For Beginners
  • Receive our Resource Guide Instanlty
  • Start Now By Entering Your Email Below
  • Suzanne Sanchez

    I tried using your code, but it said it had a syntax error: Liquid syntax error: Unexpected character ‘ in “template == ‘product’”

    I didn’t have pinterest sharing enabled do I used step 2. Any help??

    • Suzanne,

      That looks like a syntax error. Look for any locations where you have an opening ‘ that is not closed by another ‘

      • Suzanne Sanchez

        I don’t know what that means 🙁 I know basic, basic coding so I just followed your directions and just copied and pasted what you provided.