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.
Nice! We will use this feature on the Maxton Men Tumblr.
What an awesome app, Edward! It’s doing it right all the way!
PS. May I ask who designed that cute app logo?
Very cool.
Caro: That would be yours truly. :)
@Warren I learned that you designed the app as well! (Thanks Twitter) Like a baws!
Can this be used for a Facebook store? How many products can I feature all together
This is super cool. Would be even cooler if anybody could embed this to earn a slice of the transaction.
Just tried the app and LOVE it. Nicely done. Now I wish I had more places to embed the code :-)
This is fab – but how does it handle multiple purchases and customers that want to ‘add to cart’?
Almost perfect.
Fantastic work as usual you guys!
Thepost preview at wordpress shows a link and att tumblr a small gray icon. Does that animate to have a closer view?
Looks great! Can this work together with an affiliate app such as Wigify, thus allowing affiliates to spread the word easily?
thanks!
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?
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
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.
Can we paste this code into email/newsletters to let buyers quickly buy the product?
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!
I tired it on Tumblr but it wouldn’t work.
any tip I should know?
Thanks
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.
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
sorry, html didn’t display properly.
should read " If you are experiencing an error, place the code between “p” tags. " < >
I wish that had worked on the newsletter too :(
But it didn’t.
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.
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!!!
“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!
Would love an option to set the image size to none. Great app.
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.
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!