How to Create your own Custom Etsy Mini

Do you want to change the order of your items in your Etsy mini without having to move your featured items around? Do you want to change the background color? Then these directions will help you with that! Please note that there is a handful of code that you will need to write in order for this to happen. Also, this will not automatically update like the "real" Etsy Mini's do. When you want to add new items you will have to edit the code yourself.

Please note that some of these instructions are specific to Blogger Blogs.

If you feel that it is just too much for you to do I am willing to write the code for you (you can get information on how at the bottom of this post)

To build this Etsy mini you are going to be writing html code. A great tool to see what your code will look like can be found here: HTML editor

When coding in html we use tags. An open tag looks like this: < > and a closed tag looks like this: </ >

To start we are going to create a table with one row and two columns. The code is as follows:

<table border="1">
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
</table>

Copy the code and paste it into the editor so you can see what it looks like. When you want to create a new row you use the <tr> tag and when you want to create a new column you use the <td> tag. Every time you open a tag you must close the tag somewhere in your code.

Okay, so now lets put some information from our shops into the code. You will need to get the web address of each listing, along with the corresponding picture link. Instructions for finding the picture links are given below

1. Go to the listing
2. Right-click on the thumbnail you would like to use
   
3. Choose "View image"
4. Copy the address
   

Please note that you can choose any thumbnail you want, it does not have to be the first picture like in the "real" Etsy mini.

If you would like to use gallery images, the process is the same. Just right-click on the gallery images instead of the thumbnail images.

<table border="1">
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=24561867"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.69143953.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25272803"><img border="1" vspace="1" hspace="1" src="http://ny-image2.etsy.com/il_75x75.71480754.jpg" align="center"/></a>
</td>
</tr>
</table>

The red text shows you where I put my listing links, and the blue text shows you where I put the image links. The vspace and hspace code is used to create space between each item. If you want no space you can set them to "0" if you would like more space then increase the number. Copy the code above into the editor and paste in your own listings and images to see what you get.

The background color will automatically match the theme of your blog, so you do not need to worry about colors. If you would like to remove the black border you should use <table border="0"> instead of <table border="1">.

The next step is to add your shop name at the bottom of your table. To do this add the following code at the bottom, replacing your shop name and shop address with mine.

<a href="http://magnetgames.etsy.com/">
<span style="font-size:78%;">
<center>MagnetGames</center>
</span>
</a>
span style="font-style:italic;">

Please note that if you add this code into the HTML editor it will look a bit weird, it will not look this way when you add it to your Blogger Blog.

To make your etsy bigger or smaller, you need to add more rows and columns, below you will find the code for my 4x2 custom Etsy mini. Feel free to copy it and then paste it into the editor to play around with to create your own.

<table border="1">
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=24561867"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.69143953.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25272803"><img border="1" vspace="1" hspace="1" src="http://ny-image2.etsy.com/il_75x75.71480754.jpg" align="center"/></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25749038"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.73619037.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25749038"><img border="1" vspace="1" hspace="1" src="http://ny-image3.etsy.com/il_75x75.73076879.jpg" align="center"/></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25598963"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.72575901.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25564652"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.72462929.jpg" align="center"/></a>
</td>
</tr>
</table>
<a href="http://magnetgames.etsy.com/">
<span style="font-size:78%;">
<center>MagnetGames</center>
</span>
</a>


Remember, that learning anything new takes time. The more html practice you get the more you will understand!

If you do not remember how to add your Etsy mini to your blog there are instructions here: How to Add an Etsy Mini to a Blogspot Blog



At the top of this post I mentioned that I would be willing to make you your own custom Etsy Mini. I have created a new shop along with a new listing. I will build 1 custom Etsy mini for you for the price of $3. Please remember that all the information to create this on your own is available here for free. You can find the listing here: Custom Etsy Mini


Don't understand something I wrote about? Have a related question? Post a comment and I will be sure to answer it. Have an unrelated question? E-mail me, and I will feature it on my blog!

xoxo
susan.

Etsy Mini Questions

Originally inspired by: papillonjewelry

Question #1: What is an Etsy Mini and what can I use it for?

Etsy Mini is functionality that Etsy added to their website to make it easier for you to share your items or your favorites on a personal website or blog. This is also a tool that you can use to advertise. If you complete the steps to make an Etsy Mini you will end up with some code that you can post on your website or blog.

Question #2: How do I get the code for an Etsy Mini?

1. Log in to Etsy
2. Under Promote, click on Etsy Mini (see picture)
3. Choose either "Items from my shop" or "Items from my favorites" If you choose items from your shop it will show your featured items first before the rest of your items.
4. Choose "Thumbnail" or "Gallery" (thumbnails are small, galleries are bigger)
5. Choose the number of rows and columns

Now you should be able to see what it will look like. You can play with the settings until you get what you want.

If you scroll down the page you will see two boxes containing code. The top box has Javascript code, which you can use for your personal website or a blog. The lower box has Flash code, which can be used on social networking sites.

Question #3: How do I add the code to my blogspot blog?

1. Follow the steps above and copy the Javascript code
2. Log in to your blog
3. Click "Layout"
4. Click "Add a Gadget" in the section you would like to add it to
5. Choose "HTML/Javascript"
6. Paste the code into the "Content" box
7. Click the "SAVE" button


Don't understand something I wrote about? Have a related question? Post a comment and I will be sure to answer it. Have an unrelated question? Submit it here and I will feature it on my blog!

xoxo
susan.