• Tutorials
  • Ikea Hacks
  • Free Printables
  • Holiday
  • Handmade Gifts
  • Etsy Business

EverythingEtsy.com

Etsy Blog | Selling on Etsy | Etsy Banners | Giveaways & Creative Stuff

You are here: Home / Running Your Etsy Business / Blogging / Customizable Etsy Widget for WordPress {Tutorial}

Customizable Etsy Widget for WordPress {Tutorial}

By Tim Layton 19 Comments

This post is a little on the techy side – if it helps you, great! If it bores you to tears, blame Tim (he wrote it)! ~ Kim

This widget is fully customizable for your creative enjoyment!

If you’re an Etsy Seller with a self-hosted WordPress blog, then you might be interested in a neat new plugin for displaying your Etsy shop items in your blog sidebar.

I’ve been playing around with the Customizable Etsy Widget plugin to see just how customizable it is and I’ve taken a few screenshots along the way to show you what I’ve done and how you can do the same thing on your WordPress blog.

The Problem With Etsy Mini’s

Is that they all look the same.  That’s why the CraftCult Widget is so popular.  It’s great if you like one of the available options.  But what if you’re all into the exact colors matching?  What if you’re totally neurotic about using your logo in everything you do?  What if you’re just a control freak. (not that I would know anything about any of these)

For whatever reason, you may want to be able to automatically display your Etsy products on your blog or WordPress website and have it look exactly the way you want it to.  Then this is the widget for you.

You can see the current rendition of the “test dummy” widget I’ve been working on for this post to the right.  It’s also live at the bottom of the right sidebar here at EverythingEtsy.com.  Just scroll down the page to see it.

I’m not totally satisfied with this.  I don’t love the black border or the grey background, but I ran out of time!  The beauty of something like this is that once you know how and where to do the customizations, you can change any time you like with ease.

At the risk of getting way too technical for this blog, I’m going to explain the steps involved in what I’ve done.

Step One: Install the Plugin

Installing plugins in WordPress couldn’t be any easier.

  1. In the WordPress Dashboard, look to the left side and find “Plugins”
  2. If you need to, click the little dropdown arrow to expose the options, click “Add New”
  3. In the box on the next page, type in “Customizable Etsy Widget” and hit search.
  4. On the following page, you should see something like this:
  5. Since you haven’t installed the plugin yet, you’ll be able to click “install now”.
  6. Then just go through the next couple of screens until you have activated the plugin.
  7. That’s it – plugin is installed

A word of advice:  whenever you install a plugin, check your website before continuing to make sure you didn’t just break it.  Rarely, a plugin will conflict with some other aspect of your site set-up and things won’t work.  If that happens you usually just delete the plugin you just installed and go back to life without it!

Step Two: Install A New Widget

This plugin creates a new “widget” available in your WordPress Widget’s panel.  You reach that by looking on the left side of the WordPress Dashboard for the section titled “Appearance” and the choice under that called “widgets”.  When you click on that, you see a screen like this:

Click to add the Customizable Etsy Widget.  (it’s possible your screen will look slightly different.  I have the drag-and-drop widget arrangements disabled.  You may be able to just click and drag the widget into the sidebar where you want it)

Once you’ve placed the widget in a sidebar, you can adjust a few settings:

That’s it for the initial set-up.  Once you save the widget, it should be live on your site.  When you check it, it will be there, but look plain!

This is where the really techy stuff starts….

If you have experience with CSS (Customizable Style Sheets) then this will be nothing new to you.  If you don’t, this might be a good item to start with.

Step Three: Modify the CSS

Before you can get started with modifying the CSS coding for this widget, you need to know which file to modify.  With many themes, you can follow this path to find the right place… Dashboard > Appearance > Editor >Select Theme to Edit (top right) > Styles > style.css

Then you can go about the process of figuring out which CSS Elements you want to change.  For this tutorial, I used the “inspect element” feature in Google Chrome, which is reached by right clicking over an object when using the Chrome browser.

If you enlarge the photo above, which you can do by clicking on it, you’ll see that I’ve highlighted the CSS elements we want to change.

I want to change the font of the Shop Title, and add a background image behind it.

Here is the CSS code related to the shop title:

/*Customizable Etsy Widget Customization*/

.widget_customizableetsywidget h3{
font-family: 'Irish Growler', serif;
font-size:19pt;
text-shadow: 2px 2px 2px #aaa;
color: #D57373;
background: url(/images/widgetheaderbackground.png) no-repeat;
height: 60px;
margin-bottom: 0;
padding-left: 45px;
text-align:right;}

The first line: .widget_customizableetsywidget h3 tells the browser that we’re only modifying the Etsy Widget and of that, only the H3 (heading three) portion.

After that we include a font from the Google Font Directory. There are some extra steps involved in this which are explained at the Google site.

Following the font options, we include a custom background image behind the title and set the height of the area large enough so that the whole image displays (60px).  We override the default white space below the image with margin-bottom: 0;

Finally, we make sure that the words don’t appear on-top of the fish in the background image using padding-left: 45px; and text-align:right;.

Then we modify the lower portion of the widget surrounding the pictures using the following bit of code:

.etsyItemTable {
margin: 0 auto;
background: #e9e9e9;
border: 2px dashed black;
padding: 5px 5px;
}

In the future, I’ll modify this further with a background image and some customizations around the pictures themselves by adding some rules to .etsyItemTable img

Watch Out For Internet Explorer Issues

When you’re making design changes like this, you want to be sure they work in all browsers.  When I first thought I was done, I looked in Internet Explorer and this is what I saw.

I had to go back into the CSS and play around with the font size to get it to fit on one line without going over the fish.

You’ll also notice that in Internet Explorer, the dashed line is different and there is no shadow around the letters as there is in the other pictures.  It all depends on which version and which browser, but it’s good to check your customizations in a few when you finish.

Infinite Options

This is just a quick example of the basic customizations available to you using this Widget and CSS.

If you’re still reading, and thinking… “I really need a WordPress blog to help promote my Etsy Shop“,  we can actually help you with that!  The company that Kim and I run together, Crazy Tree Media, can register your domain name, provide hosting, and set-up your WordPress installation for you.

WordPress sites are really incredibly powerful and plugins like the Customizable Etsy Widget are just an example of why we love WordPress.

Related posts:

  1. Free Etsy Banners from Everything Etsy!
  2. 20 Tips for Selling on Etsy
  3. Are You Being Yourself Online?
  4. Instagram–15 Quick Tips to Get You Started

Filed Under: Blogging, Creative Tools, Running Your Etsy Business, Tips & Tools Tagged With: Etsy blogs, etsy business, shop, Tutorial, widget, wordpress

Comments

  1. Meagan Paullin says

    February 22, 2011 at 1:32 pm

    I have a brand new WordPress blog (its just a week and a half old little baby right now, lol) and am hoping to soon open an Etsy shop, so this is such a great tool to learn about… Thanks for sharing!

    Another thing to remember, is that this will work on WordPress.org blogs, but if you have a free blog on WordPress.com, you can’t use plug-ins.

    Thanks for the easy (well, as easy as tech-y stuff can be!) explanation on how to set this up! You rock my socks 🙂

    Reply
  2. Everything Etsy says

    February 22, 2011 at 2:26 pm

    @Meagan – Good point on the WordPress.com! I’ve gone back in and added “self-hosted WordPress blog” at the beginning of the post. Hope that avoids confusion.

    You’ll love your new blog and we wish you the best success on Etsy!

    Reply
  3. Sondra says

    February 22, 2011 at 8:35 pm

    Great post, Tim. I will use this info in the future. Much appreciated.
    Sondra

    Reply
  4. Jen says

    February 23, 2011 at 6:22 am

    This is amazing work Tim! This is one more reason for me to be jealous of wordpress bloggers!

    Reply
  5. Lynn M Minney says

    February 23, 2011 at 9:13 am

    Just another reason for me to make the switch from wordpress.com to wordpress.org!!! Thanks for sharing 🙂

    Reply
  6. MCatherine says

    February 24, 2011 at 9:13 pm

    All the great stuff is avialble for the wordpress.org and not .com….how come WordPress?

    Reply
  7. jackie says

    April 6, 2011 at 10:25 pm

    Hi folks,
    I’m new to WordPress. I think I have successfully activated the etsy widget but my site says “no items listed”. I’ve missed something, but I don’t know what. Can you help?
    Thanks!

    Reply
  8. Anonymous says

    July 11, 2011 at 12:04 pm

    Very useful, thanks!

    Reply
  9. toze baiao says

    August 11, 2011 at 11:08 am

    Hi Kim, this is a great post.
    I have figured how to change the image size, but these come out very blurry. Do you know how to get it with a clean look.
    I am using self hosted wordpress.
    Rgds
    TZ

    Reply
  10. Heather G says

    September 10, 2011 at 2:31 pm

    I do like the ease of the ‘Craft Cult’ Etsy gadget but I’m frustrated with the mandatory branding graphics. Is there any possible code for this Word Press widget that can be used on a regular website or on “Blogger” blogs?
    .-= Heather G´s last blog ..Small Crossbody Bag: Red and Blue Flourish =-.

    Reply
  11. Heather G says

    September 10, 2011 at 2:34 pm

    Back again- I forgot to check follow-up by email button !

    Reply
  12. Louise says

    October 2, 2011 at 8:37 pm

    Hi! I am new to blogging and have a self hosted WordPress.org site that I am now trying to customize. Thank you for your clear instructions. For a newbie it makes customizing less scary!

    Cheers,
    Louise

    Reply
  13. Sarah says

    February 14, 2012 at 8:55 pm

    Thank you for this info, it was really helpful! I now have my widget up and running, though it’s really plain right now as I have some CSS learning to do! But to me plain is better than a cheesy pre-made template anyway 😉

    Reply
  14. adorablebannerco says

    March 21, 2012 at 4:47 pm

    I just added this widget. I came over here to find what I needed. I knew you would know!

    Reply
  15. Vaike says

    June 21, 2012 at 7:30 pm

    Thank you! I have been working on putting up a site for hours now and my brain was about to shut off and I was about to give up when I found your help. (I had my info entered incorrectly until I saw this.)

    Thanks!
    Vaike

    Reply
  16. City Gal says

    August 13, 2012 at 1:18 pm

    Thanks for the great tips. I plan to expand into an Etsy shop in the future and was looking to find an easy widget to install on my WordPress.org site!

    Reply
  17. Laly says

    May 19, 2013 at 6:21 am

    Thank you so much for this tutorial!
    The only thing I haven’t managed to do is change the default black border around the thumbnails to white. Could you tell me how please? Thank you!!

    Reply
  18. golu dolls says

    August 14, 2018 at 5:44 am

    looking good

    Reply
  19. kanchipuram sarees says

    August 14, 2018 at 5:44 am

    nice post

    Reply
Previous Post A Few Friends!
Next Post Bari J. Ackerman & Pattern Giveaway

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Bloglovin
  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Never miss a post:

Enter your email address:

Sell doTERRAEssential Oils How to Start a Blog for Your Etsy Business

 


 

 

 


follow EverythingEtsy on Pinterest


Disclosure: Various posts and pages on this site include affiliate links. We could earn a referral fee if you make a purchase through those links. Your purchase won't cost you more because you followed our link and we only refer you to sources we can personally recommend.

RSS Now at HandmadeandCraft.com

  • 12 DIY Kitchen Ideas
  • 15 Easter Cupcake Recipes
  • Organize with a Chalkboard Wall Calendar!

RSS Now at KimberlyLayton.com

  • St. Patrick’s Day Crochet Shamrock Pattern & Video Tutorial
  • Printable Coloring Pages for St. Patrick’s Day
  • How to Get Your Business Featured on Blogs

[footer_backtotop]

Copyright © 2025 EverythingEtsy.com · All Rights Reserved · Privacy Policy ·


The term "Etsy" is a registered trademark of Etsy, Inc. - This site is not affiliated w/ Etsy, Inc.
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT