Support Center

You are looking at the old Shopify support page. Please visit our new support site instead for most up to date information.

How do I add thefancy.com buttons to my products?

Last Updated: Jun 18, 2012 03:26PM EDT

Shopify cannot provide support with adding thefancy buttons to your theme, this guide is added here as a courtesy. If you are struggling with this tutorial, reach out to your designer or to our community.

Option 1:
There is a free app in the app store that can be used called shopconnection (Apps are supported by the their creators):
Shop Connection

Option 2:
Install the button code into your theme as outlined below:

Get your fancy button code from thefancy.com.

Now we will make a snippet in Shopify's theme editor and doctor it up a bit to get our correct product values into the button's code.

And next:

Next we will tackle Category and add our collection title:

Next we will add our product image:

Done! You should end up with a snippet that look like this:


<a href="http://www.thefancy.com/fancyit?
ItemURL={{shop.url}}{{product.url}}
&amp;Title={{ product.title | escape }}
&amp;Category={{ collection.title | escape }}&amp;ImageURL={{ product.images.first | product_img_url: 'compact' }}" id="FancyButton">Fancy</a>
<script src="http://www.thefancy.com/fancyit.js" type="text/javascript"></script>

Now we simply include our snippet in our product.liquid template where we would like the button to  appear like so:

{% include 'fancy' %}

Shopify cannot support or add social buttons for you, this guide is added as a courtesy to help you as a quick start guide

Contact Us

  • North America:
    1 888 746 7439
    United Kingdom:
    0800 808 5233
    Australia:
    03 8400 4750
    New Zealand:
    07 788 6026