Add a Want button to product pages

Note

Tap into a great third party resource so customers can tell their social networks what they want.

The WANT Button helps merchants socialize the buying experience by allowing their consumers to share WANTS via email, FaceBook or Twitter. WANT allows consumers to creatively afford products or services they otherwise may not have by delivering "contribution functionality".

Through the WANT Button, the merchant's consumers can collect contributions from family and friends and when enough funds have been accepted, the consumer can easily make a purchase on the merchant's website. Links and visits to the merchant website will afford greater visibility for the merchant through increased product and brand exposure.

You don't need to have an account with Want to have a WANT button on your page. Here are the steps to add it into your product pages:

Get your button code

The Shopify specific code for the medium sized WANT button with a count is shown below:


<!-- START Want Button Code for Shopify Platform Rev.2011-09-01 -->
<script src="http://button.wanttt.com/button/script/"></script>
<a href="http://wanttt.com/want/initial_popup/"
    data-merchant_name="{{ shop.name | escape }}"
    data-title="{{ product.title }}"
    data-price="{{ product.price | money }}"
    data-image_url="{{ product.images[0] | product_img_url: "large"  |replace: '?', '%3F' | replace: '&','%26'}}"
    data-count="true"
    data-style="wb2"
    data-page_source="product"
    class="wantButton"></a>
<!-- END   Want Button Code for Shopify Platform -->

Go to the Want Button implementation page to see an example of the look of the button.

Copy the above code to your clipboard.

Create a snippet

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click on the Snippets Folder in the left column

  4. Click to Add a new snippet

    Add snippet
  5. Name the snippet WANT and click on the 'Create snippet' button.

Paste your button code in your Liquid snippet

  • Click on your snippet name to open it in the online code editor.
  • Place your cursor in the big text box and paste your WANT button code inside.
  • When done, click to save your Liquid snippet.

Add your button to your product pages

On the Edit HTML/CSS page, click on 'product.liquid' under Snippets. That will open the file product.liquid in the online code editor.

Paste the following code where you want to position your button. This could be after your product description, or in vicinity of your Add to cart button. It's up to you.


{% include 'WANT' %}

Click on "Save" to save the changes to the template.

The WANT button should now be included on all your product detail pages.

Shopify WANT Wiki Demo store

Visit the WANT Button Sandbox for a demonstration.

Want to discuss this page?

Visit the Shopify Community