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…

Join 266,526 entrepreneurs who already have a head start.

Thanks for subscribing

You’ll start receiving free tips and resources soon. In the meantime, start building your store with a free 14-day trial of Shopify.

36 comments

Kishan

January 12 2012, 01:00PM

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

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

January 12 2012, 01:27PM

Very cool.

Warren Dunlop

January 12 2012, 03:55PM

Caro: That would be yours truly. :)

Caroline Schnapp

January 12 2012, 04:41PM

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

Donna

January 12 2012, 06:17PM

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

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

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

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

January 13 2012, 11:31AM

Fantastic work as usual you guys!

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

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!

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

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

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

January 18 2012, 09:27PM

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

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

January 22 2012, 01:08PM

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

any tip I should know?

Thanks

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

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

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

February 01 2012, 03:14PM

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

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

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

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

May 30 2012, 02:49AM

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

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

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

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

December 18 2013, 05:25AM

Is there a way to embed it in Mailchimp?

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

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

October 06 2014, 02:34PM

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

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

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

travis

February 18 2016, 05:34PM

Doesn’t work for Tumblr posts anymore. The HTML elements are blocked and it just becomes a text link.