How to add Etsy Mini to your free WordPress blog

Anyone who runs an Etsy shop and has decided to create a blog with WordPress will be very disappointed to discover that you can’t add your Etsy Mini app to the free version of WordPress as it doesn’t support JavaScript. An easy way around this is to make use of the Print Screen function on your computer to capture the image from Etsy. Sometimes shown as ‘prt scr’ on the button, it takes a snapshot of the entire screen. From this you can create your own ‘static’ Etsy Mini and then add this image to the sidebar of your blog as a clickable link.

But one thing that disappoints me with the Etsy Mini, and I’m sure that others feel the same, is that it automatically displays your Featured items first, followed by your recently listed items. A large proportion of my sales come from tutorials so I find that the rest of my Etsy Mini is full of these and very little of my jewellery. So if you want it to show the items YOU want from anywhere in your shop, it can be done with a little time and effort.

So I’ve written this tutorial to show you how to make a customised Etsy Mini image like mine and how to add it to your WordPress blog. I’ve used Paint Shop Pro 5 to create the image but you may have your own graphics program or you can download free 30 day Paint Shop Pro trials on You’ll need two browser windows open on your computer, one for your Etsy shop to gather the images, and one for the graphics  program.

First, create your Etsy Mini image.

1. Right click on the grid image below and click Save Picture As… to save it to your computer. It’s in GIF format, I use this because it keeps the grid image crisp and clean. But to add your colourful item images you’ll need to increase the amount of available colours. Open the image in your Paint Shop Pro and click Colours on the toolbar, then Increase Colour Depth to 16 million colours.

2. Go to your Etsy shop front and click on the button that changes your shop view from Gallery to List. It’s on the right hand side, between your Featured items and the rest of your listings. The images from the gallery view will fit perfectly inside the grid squares.

3. Choose the items you’d like to include in your Etsy mini by right-clicking on the image and choosing Copy (or right-click and press C). In Paint Shop Pro, paste the image (clicking Ctrl and V usually does this quicker). Do this for each item until you have enough to fill your grid. You may want to think about saving them individually to a folder in case your graphics program or computer crashes before you can finish, or you make a mistake (I speak from experience here!).

4. At this point it’s a good idea to rearrange the images into the order you want as once they’ve been pasted into position you wont be able to move them around the grid.

5. In Etsy, select one of the images and click Copy (or right-click and press C). Switch to your graphics program, click on the grid to select it and then on the toolbar click Edit > Paste >  As a New Selection (or Ctrl and E), pasting the image where you want it to appear on the grid. Do this for each image until you’ve filled up the grid. I’ve left a little space under the grid for you to add text if you want to, maybe Click Here To Visit or just your shop name. If you don’t want the extra space you can crop the image to suit. You can also crop some of the grid if you want to show fewer columns or rows.

6. Save the finished grid as a GIF  file (CompuServe Graphics Interchange). When prompted to reduce the image to a maximum of 256 colours click YES.

Now to add the image to your blog and make it a clickable link to your shop.

7. Sign in to your WordPress account. At the top where it says My Blog, choose Dashboard from the dropdown menu.

8. On the left hand side, under Media, click Add New. Click on Select Files and find your customised Etsy mini to upload.

9. When it has uploaded you’ll see File URL at the bottom of the info box. This is the URL address of the image in your WordPress Media Library. Highlight the entire URL, right-click on it and choose Copy. I recommend pasting this URL into a Notepad file and saving it just in case you lose it later! If you do happen to lose it you can find it in your Media Library, click Edit to fnd the URL.

10. Again on the left hand side, under Appearance, click Widgets. Find the Text widget (it also says Arbitrary text and HTML) and drag it over to your widget bar on the right hand side, placing it where you’d like your Etsy mini to appear.

11. Copy and paste this text into the box…


IMPORTANT: To make the code work, you’ll need to remove the three stars that I’ve added and make sure you do not replace them with spaces. Replace YOUR ETSY SHOP with the URL/address of your shop and replace YOUR WORDPRESS FILE URL with the URL that you copied from your image upload earlier. Make sure you keep the inverted commas on either side of your URLs.

12. Add a title, something like My Etsy Shop or Find Me On Etsy. Click the Save button and then click Close. View your blog to check that it’s working and you should now have a customised Etsy Mini in your sidebar!

About these ads

Posted on April 7, 2011, in tutorial and tagged . Bookmark the permalink. 10 Comments.

  1. Many thanks for this tutorial. It works! Great!

  2. Hi, I found you by looking into etsy as a way to sell my postcards and i do want it to link back to my wordpress blog. This tutorial seems very clear and i shall print it for a reference if that is alright.. but where is yours, i do not see it on your sidebar? c

  3. Hi Ceciliag, yes that’s fine :) My new Etsy Mini will be up soon, most of the items I’d included have been sold so I want to update it!

  4. Thank you! Whilst I could have probably worked this out myself (if I could get my brain going) having your clear instructions helped hugely! :)

  5. My pleasure, I’m glad you found the post helpful!

  6. THANK YOU! This worked perfectly for my blog, easy to follow directions, no problems,
    Bless you!

  7. My pleasure belleofbaseball, I’m pleased to hear that you found it easy to follow!

  8. I followed your instructions and it worked great! Am building a new blog that will be up soon, thanks so much for sharing this.

  9. I got what you intend, appreciate it for posting .Woh I am lucky to find this website through google. I was walking down the street wearing glasses when the prescription ran out. by Steven Wright. dgddakdcegae

Leave a Reply

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

You are commenting using your 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


Get every new post delivered to your Inbox.

Join 229 other followers

%d bloggers like this: