craftevolution

I sometimes write for The {NewNew} blog where we highlight different Etsy vendors from our street team. Etsy provides some generated code that either shows products from your store like the mini to the left of this post or products that you have highlighted as favorites. For my post I needed to create a clickable Etsy Mini that shows products and provides links to different Etsy vendors without using my favorites list. Since I know everyone has been waiting for the answer to this quandary here it is:

What is an Etsy Mini

Featuring upcycled bags and accessories

This is my Etsy mini that is auto-generated by Etsy. It shows four items in my shop with a direct link to the store. For Etsy to auto-generate this code for you, you need an Etsy account and then follow this path: Your Etsy -> Etsy Mini, which will take you to this screen:

Here you find precise instructions on how to generate a mini from either your favorites, or your store. Favorites can change and I plan to showcase a permanent list of vendors independent of the whimsy of my favorites, so I have to tweak the code.

Step 1: Creating the Table

I like the table format for minis. You can either write your code from scratch or auto-generate a table with the appropriate rows and columns using the 2create a website table generator.

You’ll get this code:

<table border=”1″ bordercolor=”ffffff” width=”200″ bgcolor=”ffffff”>
<tr>
<td> row 1, column 1 </td>
<td> row 1, column 2 </td>
</tr>
<tr>
<td> row 2, column 1 </td>
<td> row 2, column 2 </td>
</tr>
</table>

Which will look like this

Step 2: Insert the Vendors or Products

Log into Etsy and generate a 1 column by 1 row Etsy mini thumbnail. The java script generated will look something like this

<script type=’text/javascript’ src=’http://www.etsy.com/etsy_mini.js’></script><script type=’text/javascript’>new EtsyNameSpace.Mini(5059326, ’shop’,'thumbnail’,1,1).renderIframe();</script>

The number I highlighted in bold 5059326 is my user id.

If I insert this code in my table replacing “row 1, column 1″

<table border=”1″ bordercolor=”ffffff” width=”200″ bgcolor=”ffffff”>
<tr>
<td> <script type=’text/javascript’ src=’http://www.etsy.com/etsy_mini.js’></script><script type=’text/javascript’>new EtsyNameSpace.Mini(5059326, ’shop’,'thumbnail’,1,1).renderIframe();</script> </td>
<td> row 1, column 2 </td>
</tr>
<tr>
<td> row 2, column 1 </td>
<td> row 2, column 2 </td>
</tr>
</table>

it will display the latest item in my shop with a direct link to the store.

To add some other Etsy sellers to the table, I paste the same code into the next cell, but I need to change the shop user ID to that of the next seller. You can find this id on the seller’s profile page on the right side in the seller’s info box under user ID.

The second vendor in my table will be Wabisabi Brooklyn. Her user id is 5160480. I’m copying the same script into the second cell of the table, but I’m changing the user ID from 5059326 to 5160480 to point to her store.

<table border=”1″ bordercolor=”ffffff” width=”200″ bgcolor=”ffffff”>
<tr>
<td> <script type=’text/javascript’ src=’http://www.etsy.com/etsy_mini.js’></script><script type=’text/javascript’>new EtsyNameSpace.Mini(5059326, ’shop’,'thumbnail’,1,1).renderIframe();</script> </td>
<td>> <script type=’text/javascript’ src=’http://www.etsy.com/etsy_mini.js’></script><script type=’text/javascript’>new EtsyNameSpace.Mini(5160480, ’shop’,'thumbnail’,1,1).renderIframe();</script> </td>
</tr>
<tr>
<td> row 2, column 1 </td>
<td> row 2, column 2 </td>
</tr>
</table>

The rendered code looks like this.

To complete the table I repeat the process with two other sellers; in each instance copying the java script and replacing the id with the seller’s user id.

This process creates a table that directly links to the sellers you select and displays their most recent product. When sellers update their shops their products may change, but the links to the stores will always remain.