How to add Etsy Mini on WordPress.com

I just discovered the “Etsy Mini” feature on Etsy. So I opened it and saw that you can build a widget on your blog by using a java script or flash code they provide for you.

After choosing to showcase the items from my shop, the image size and the layout, I first tried the code for the java script version. I chose the Text Widget, entered the Title and pasted the java script code. After saving it, I checked my blog and saw that this didn’t work.

I next tried to use the flash version code. That too didn’t work. I thought maybe the height and the width needed to be changed to fit my sidebar. Once again, this did not work.

So I needed some help and searched for “how to put etsy mini on wordpress.com” and I find out that on WordPress.com, java script and flash are not permitted (reasons here).

So what to do? … Instead of having the flashy version of the mini etsy (where the photos change as you update your etsy store), I thought I can just do a still screenshot of the latest items in my etsy store. Here’s what to do (NB: the following instructions are very basic and uses basic applications on your computer):

  • Go to Your Etsy page, scroll down until you reach Promote and click on Etsy Mini

 

  • The next page is Build your own Etsy Mini. Choose your Items to show, Choose image size (if you would like more than one photo to show, the Thumbnail (75px square) is the better option) and then Choose layout (2 columns is the best fit for the sidebars, and then choose how many rows you want). I chose 2 columns and 3 rows

 

  • Take a screenshot of the preview photo (make sure of course to include the Etsy, Buy handmade and “Your Etsy Store Name”)

 

  • Save this screen shot (I saved mine on Paint application first), then to edit, I used Picnik to crop and sharpen the image.
  • Upload and save this image to your WordPress.com Media Library

Now the fun part begins.

  • Go to My Dashboard, scroll down to Appearance and click on Widgets. Scroll down until you find the Image widget, then click on Add

 

 

  • Enter your Widget Title (I put “My Etsy Store”)
  • Go to your Media Library and copy the image URL and paste into Image URL:
  • I left the Alternate Text blank
  • Enter your Etsy store’s name into Image Title (your store name will appear when you hover over the image)
  • You have the option to put a Caption (I left mine blank)
  • Choose your Image Alignment (I left mine at None as the image size I chose pretty much centres it on the sidebar)
  • The Width and Height you need to play around with depending on how much you cropped your photo. I have 176 for width and 424 for height. The picture should have a nice green border.
  • Enter your Etsy store’s URL into Link URL

 

  • Once finished, select the Position you want this widget to sit on your sidebar and hit Save.

If all steps are done correctly, you now will have a “faux” Etsy Mini sidebar. Ta dah!

 Hope this helps.

  • If you add new items in your etsy store, just update your etsy mini preview, save the new image to your Media Library and update the Image URL in your Image widget.

Good luck!

EDIT: I discovered a much easier way to add etsy mini to your side bar (after much trial and error). This time round, just copy the image from the preview photo, as per below:

  • Open a Text widget, add your title, then type in the HTML below (unfortunately I cannot paste the HTML directly on here to be copied as it gets edited by WordPress), then just add your own URL link for your etsy store, your store’s name and the URL of your image

 

 

This way, your readers can click on the image and it will lead to your etsy store, plus have the option to click on Etsy and the Buy Handmade options.

Hope this one helps too, just unfortunate you have to type the HTML out.

Advertisements

18 thoughts on “How to add Etsy Mini on WordPress.com

  1. YOU ARE AMAZING!!! I just fiddled with this thing for HOURS. After finding your tutorial, I pieced it together and it worked! Thank you so much for your help!!!

    • thanks eve. it took me AGES too at first. i tried so many different ways thinking i was doing something wrong or my computer was broken. just checked out your etsy widget and it looks great. thanks so much for leaving a comment.

  2. OK mine KIND OF worked (with the text widget version). The link at the very bottom with my shop name works, but the photo is unclickable. Any idea where I went wrong?
    Renees-Soirees.com

    • Hi, Just went to check your site. Go back to your Widget Image and double check the Link URL for your etsy store.

      Also, I clicked on the text but tells me there is no such link – you may want to double check that too. Thanks for trying out my tute. Hope it works out for you 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s