From Shopify Wiki

Level: Difficult

Can one integrate Shopify into a Drupal, Wordpress or Textpattern website? More or less. This article will cover some of what can be done in terms of using Shopify in conjunction with another website.

Those are the kind of questions we'll ask:

1. How do I add a BUY NOW button to my Wordpress blog which when clicked will add a item to my Shopify cart.
2. How do I show my cart's content on my Drupal website.
3. How do I feature a collection on my TextPattern website.

Disclaimer: Those tricks may or may not work for you. They are provided 'as is' and are not officially supported by Shopify. Please reach out to developers in the Community forums for assistance if you're lost and need pointers. Also, if you have tricks to contribute, please sign up to our wiki, or log in, and add those tricks here. — Caroline Schnapp 19:38, 19 December 2010 (UTC)

Add to Cart form (HTML only)

No PHP, no Ruby, not any platform-specific tags are required to place a functional add to cart form on your external website. You can add an item to the cart using plain old HTML — and that will work even if your form is not on a Shopify page. This works across different domains:

<form action="http://your.shopify.url/cart/add" method="post">
  <input type="hidden" name="id" value="VARIANT-ID" />
  <input type="hidden" name="return_to" value="back" />
  <input type="submit" value="BUY NOW" />
</form>

Notes

• The action attribute of the form must be an absolute URL. Use the primary domain of your Shopify shop with /cart/add.
• To avoid being redirected to the cart page of your Shopify website, use <input type="hidden" name="return_to" value="back" />.
• You can submit in any which way you want the ID of the variant that is to be added to the cart (use a hidden field, radio buttons, or a select element), but whatever you do set the name attribute of your form field to id. If you're using checkboxes, so possibly adding more than 1 variant to the cart at a time, set the name attribute to id[].

Demo

See the blog post “Testing Shopify add to cart functionality from another website while staying put” for an example of an Add to Cart form added to a Drupal webpage.

Real World

Stuart Whitman makes use of a remote add to cart form on several non-Shopify pages. An example of this can be seen here: http://sageinvoices.co.uk.

Stuart says: "I have about 15 of these landing pages and they work a treat. I get great conversion rates, and those pages also fill up the first pages of SERPs on Google quite nicely!"

Troubleshooting

Use the variant ID, not the product ID

The most common mistake is to use the product ID rather than the variant ID in the add to cart form. Don't use the product ID. What's the product ID anyway? It's that number you see in the URL to the product page in your admin. Use the variant ID. Where will you find it? By inspecting the HTML of you product page, in your admin or on your storefront. If looking in your admin, look at the Inventory section. Painful, I know.

If you use Google Chrome, you can inject the following JavaScript to your product page in your admin with the nifty JavaScript Injector extension:

jQuery('#row-head th:last').before('<th class="variant-id" style="width:100px;">Variant ID</th>');
jQuery('#variants-list li').each(function() {
  var id = jQuery(this).attr('id').replace('variant_','');
  jQuery(this).find('tr.inventory-row td:last').before('<td style="width: 100px;">' + id + '</td>').css('whiteSpace', 'nowrap');
});

EDIT (Jamie): A cross browser userscript has been created to add the Variant ID. It is compatible and tested with both Firefox and Chrome (mac). It can be installed here: [1] Variant ID Userscript

That script will add variant IDs to your Inventory display like so:

You can copy and paste the variant ID(s) from there.

Remember: No product is ever added to a Shopify cart. Variants are added to the cart. When a product has no variations, it still has one variant, and it is that variant we add to the cart.

The return_to parameter (optional)

When an add to cart form is submitted, the item with the specified variant ID is added to the cart and you are redirected to http://your.shopify.url/cart, where you can review the content of the cart, edit quantities and check out.

You can change where you go after the form is submitted with an additional and optional return_to value.

• Set return_to to back if you want to stay on the same page. Give your buyer a visual clue to let him know that he added something to the cart — otherwise he will submit the form again thinking that nothing happened.
• Set return_to to /checkout if you want to skip the cart page and check out. (If you use Paypal Express Checkout, you will be going directly to Paypal after clicking on the BUY NOW button.)
• Use any absolute URL (that begins with http://...) if you want to go to a non-Shopify page.
• Use a relative URL (such as /pages/thank-you) if you want to go to a Shopify page.

Examples

<input type="hidden" name="return_to" value="back" />

You stay put.

<input type="hidden" name="return_to" value="/checkout" />

You check out.

<input type="hidden" name="return_to" value="/pages/thank-you" />

You go to the Shopify page with handle thank-you.

<input type="hidden" name="return_to" value="http://some.url" />

You go to some URL.

Add to Cart link (JavaScript)

Nothing special is required to place a functional add to cart link on your website. The HTML for the Link that Turned Into a Post Form When Clicked is:

<a href="http://your.shopify.url/cart/add" onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href; var v = document.createElement('input'); v.setAttribute('type', 'hidden'); v.setAttribute('name', 'id'); v.setAttribute('value', 'VARIANT-ID'); f.appendChild(v); f.submit(); return false;">BUY NOW</a>

What has been discussed in the previous section applies here too. Replace http://your.shopify.url/cart/add with your Shopify URL, and replace VARIANT-ID with the variant ID of the cartable item.

Using return_to

... to stay put:

<a href="http://your.shopify.url/cart/add" onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href; var v = document.createElement('input'); v.setAttribute('type', 'hidden'); v.setAttribute('name', 'id'); v.setAttribute('value', 'VARIANT-ID'); f.appendChild(v); var r = document.createElement('input'); r.setAttribute('type', 'hidden'); r.setAttribute('name', 'return_to'); r.setAttribute('value', 'back'); f.appendChild(r); f.submit(); return false;">BUY NOW</a>

... to cut to the chase and go directly to the checkout:

<a href="http://your.shopify.url/cart/add" onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href; var v = document.createElement('input'); v.setAttribute('type', 'hidden'); v.setAttribute('name', 'id'); v.setAttribute('value', 'VARIANT-ID'); f.appendChild(v); var r = document.createElement('input'); r.setAttribute('type', 'hidden'); r.setAttribute('name', 'return_to'); r.setAttribute('value', 'http://your.shopify.url/checkout'); f.appendChild(r); f.submit(); return false;">BUY NOW</a>

Demo

See the blog post “Testing Shopify add to cart functionality from another website while staying put” for an example of an Add to Cart link added to a Drupal webpage.