Product Update: The Shopify Widget

Update: The Shopify Widget is now the Shopify Buy Button.

Wouldn’t it be nice to put a Buy Now button for your products anywhere on the web?

It’d be even more awesome if you could embed product previews or entire collections in forums, your Tumblr and Wordpress blogs, or wherever else you’d like it to appear. Now you can.

Introducing Shopify Widgets: embed your products anywhere. Like these great looking Shopify shirts :)

 

You can also create simple Buy Now buttons for when you need something simple but effective:

     

Looks awesome, right? Let’s get you set up and rocking your own widget.

1) Install it from the Shopify App Store.

2) Choose which widget you’d like to use. Let’s give the product with an image widget a shot.

3) Select the product you’d like to feature.

Try playing with the colors and other options to make it look just right:

4) Hit “Give me code” when you’re ready.

5) Copy and paste the HTML code that pops up into your Shopify, Tumblr, Wordpress blog, or wherever you’d like it to go. Note that some free sites don’t allow iframe code, but most places should be ok. Make sure that when you’re pasting in HTML, that you’re in HTML-mode, otherwise it won’t work. Here’s an example in Shopify:

You’re done! Nice work. Take a look at the top of this post for an example of what the embeds can look like :)

Shopify Widgets is launching with iframe support exclusively, but watch out for some exciting updates down the road. After all, it sure would be nice to have your entire store embeddable…

Questions? Add your comments here or hit the “Give the developer feedback” link on the Shopify App Store.

 

35 comments

  • Kishan
    Kishan
    January 12 2012, 01:00PM

    Nice! We will use this feature on the Maxton Men Tumblr.

  • @Shopify Caroline Schnapp
    Caroline Schnapp
    January 12 2012, 01:02PM

    What an awesome app, Edward! It’s doing it right all the way!

    PS. May I ask who designed that cute app logo?

  • Brad
    Brad
    January 12 2012, 01:27PM

    Very cool.

  • @Shopify Warren Dunlop
    Warren Dunlop
    January 12 2012, 03:55PM

    Caro: That would be yours truly. :)

  • @Shopify Caroline Schnapp
    Caroline Schnapp
    January 12 2012, 04:41PM

    @Warren I learned that you designed the app as well! (Thanks Twitter) Like a baws!

  • Donna
    Donna
    January 12 2012, 06:17PM

    Can this be used for a Facebook store? How many products can I feature all together

  • Kai
    Kai
    January 12 2012, 07:49PM

    This is super cool. Would be even cooler if anybody could embed this to earn a slice of the transaction.

  • Kai
    Kai
    January 12 2012, 07:53PM

    Just tried the app and LOVE it. Nicely done. Now I wish I had more places to embed the code :-)

  • Robin
    Robin
    January 13 2012, 06:18AM

    This is fab – but how does it handle multiple purchases and customers that want to ‘add to cart’?

    Almost perfect.

  • Jason
    Jason
    January 13 2012, 11:31AM

    Fantastic work as usual you guys!

  • Stefan
    Stefan
    January 14 2012, 08:37AM

    Thepost preview at wordpress shows a link and att tumblr a small gray icon. Does that animate to have a closer view?

  • Kym
    Kym
    January 16 2012, 07:34AM

    Looks great! Can this work together with an affiliate app such as Wigify, thus allowing affiliates to spread the word easily?

    thanks!

  • @Shopify Warren Dunlop
    Warren Dunlop
    January 16 2012, 04:50PM

    Awesome feedback so far guys, glad to hear it. Embed away!

    Donna: This could be used on Facebook if a Facebook app exists that allows for simple HTML embedding. I did some quick digging for you but didn’t come up with anything just yet. If you find something, let me know!

    Kai & Kym: A front facing embed code on your store-front would be amazing and we have definitely considered it. All I can say for now is there is still more in the works with widgets. I can’t give away any secrets just yet. ;)

    Stefan: Our testing on WordPress and tumblr produced great results, but perhaps you can send me a screenshot of what you’re seeing so we can lend a hand?

  • Stefan
    Stefan
    January 17 2012, 02:44PM

    Installs fine but when I try to get embed code I can’t see it… Is it in Flash? (I’m on an older machine).

    Thanks,
    Stefan, Home and Heart Company

  • Stefan
    Stefan
    January 17 2012, 03:13PM

    I was able to get the code, but when posting to Google+ or Facebook, the code remains in the post as well as the photo, which only has a miss-spaced price line when you click on it.

  • Anand
    Anand
    January 18 2012, 09:27PM

    Can we paste this code into email/newsletters to let buyers quickly buy the product?

  • Mer
    Mer
    January 20 2012, 05:47AM

    I tried pasting the code in a Mailchimp newsletter template and although it shows on the editor, it won’t show up in the preview or the test email. Any deas?
    Thanks!

  • Chris
    Chris
    January 22 2012, 01:08PM

    I tired it on Tumblr but it wouldn’t work.

    any tip I should know?

    Thanks

  • Paul
    Paul
    January 27 2012, 03:25PM

    Have you tested the widget on a product with a stock level of Zero? For me it blew up with an ugly error message, in hex no less. I sell one of a kind things so a zero stock level is easily possible.

  • Nic
    Nic
    January 30 2012, 05:25PM

    To post to tumblr:

    In a “Text” “quote” or "video post. Click on the “HTML” button and paste your code in the HTML editor. If you are experiencing an error, place the code between

    tags.

    example:

    code here

    does NOT work in an empty “photo” post. You must add a photo in order to make it work.

    Can I suggest adding a “save preferences” to the widget? Would save a lot of time to not have to manually set the colors/style/padding every time I want to embed a product.

    -N

    www.rockarolla.ca

  • Nic
    Nic
    January 30 2012, 05:28PM

    sorry, html didn’t display properly.
    should read " If you are experiencing an error, place the code between “p” tags. " < >

  • Mer
    Mer
    February 01 2012, 03:14PM

    I wish that had worked on the newsletter too :(
    But it didn’t.

  • Andy C
    Andy C
    February 02 2012, 05:54PM

    Great first wave. Love to have it either show a random collection or scroll through a collection. One static product doesn’t really hold much weight on our web properties.

  • Sean
    Sean
    March 03 2012, 05:24PM

    Edward – great app. Is there any way to change the behaviour of “buy now” to “add to cart”?

    Maybe this is not a use-case you anticipated: I’m using the Widget to create ‘product-line’ landing pages, for SEO and SEM. I’m using the Widget to add products w/Buy button to static Shopify pages. The Buy button action should be “add to cart” so users can continue shopping and add more stuff.

    Thanks!!!

  • subbu
    subbu
    April 12 2012, 05:18PM

    “It’d be even more awesome if you could embed product previews or entire collections in forums, your Tumblr and Wordpress blogs, or wherever else you’d like it to appear. Now you can.” If every e-commerce site used shopify this statement is true. Till then not quite. Great direction though!

  • Erik B
    Erik B
    May 30 2012, 02:49AM

    Would love an option to set the image size to none. Great app.

  • David
    David
    November 19 2012, 11:32PM

    When I set the embed product widget to take users to the cart, it opens the cart in a new browser window. When I set to go to either product or checkout, it opens in the same window.

    Anyone know why the “buy now” set to go to cart opens in a new window? And, how can I change that so it opens in the same window?

    Thanks in advance.

  • Ryan
    Ryan
    February 27 2013, 09:28PM

    Is there any way to have the shopify widget point to a collection. I can’t seem to work around the 3 options (cart, checkout, product).

    Thanks!

  • Marty
    Marty
    September 09 2013, 11:29AM

    Allow option to open in current window when sending to cart.
    As it is now when sending to cart it opens a new browser which is not very professional and seamless.

    Please fix.

  • Álvaro
    Álvaro
    December 18 2013, 05:25AM

    Is there a way to embed it in Mailchimp?

  • Dave
    Dave
    May 22 2014, 04:23PM

    It looks like the widget code just got broken. I use this widget a lot, and all of my images just disappeared. My products still have their images, by “No Image” shows up on every instance of the widget on my site. Interestingly, the same thing has happened on this page (the widgets just below the text “Like these great looking Shopify shirts” show “No Image” It would be awesome if this could get fixed so that the widget would work again. Thanks!

  • Sandra
    Sandra
    June 26 2014, 05:30PM

    Hi there…the widget code for embedding the shop does’t function on Blogger. But the single product widget does. can you tell me if i’m doing something wrong?

    thanks

  • David Lawrence
    David Lawrence
    October 06 2014, 02:34PM

    How can we use this in a Mailchimp email?
    PLEASE HELP!!!

  • Amanda
    Amanda
    November 15 2014, 08:59PM

    I want to use the imbed code for my site. How do I obtain this. Check out my current site soulgirlyoga.com
    and let me know

  • Brad
    Brad
    December 04 2014, 04:31AM

    Hi guys

    Love the store for Facebook & love the idea of the Shopify Widget.

    I have been trying tirelessly to upload 2 of my collections using Java on my Facebook page post. I copy the script & paste it into my post, but the actual link appears as code, nothing else. I have tried to do only one collection too & the same happens.

    Please let me know how I could sort this issue out.

    Thanks very much…
    Brad

Leave a comment ...