Etsy Mini Alternative

BellasJardin Etsy Mini Replacement Tool

If you are an Etsy shop owner with a stand-alone website, you may want to link back to your Etsy shop from your website. Etsy has Etsy Mini that provides this functionality, but it has limitations.

etsyminiHere is a screenshot of my Etsy Mini code and preview.  This piece of code returns an iframe containing a page with your listings.  This iframe can be embedded into your website.  Nice… but wait … I don’t like the background, font, font color and gallery layout.  I also don’t like the placement of my shop link.  I want to make changes so that it integrates better with the look and feel of my website.   Well I’m out of luck because Etsy mini does not allow you to customize these features.

If you are a WordPress user, there are plugins that integrate your Etsy shop into your WordPress site, but what if my website is not a WordPress site.  Also some of those plugins do more than I need.  I  just need a simple gallery of my current listings that links back to my Etsy shop without the added bloat of plugin.

Etsylistings: A Replacement for Etsy Mini

I created  etsylistings,  a simple javascript that can be added to any website using standard html. You can see this tool in action by viewing my home page and Etsy Shop page.

minireplace

This is a screen shot of my Etsy listings with thumbnail images on my home page.  I have limited the listings to 15.  Clicking on the image directs you to the listing on Etsy.

minireplace-large

And this a screen shot of my Etsy listings on my dedicated Etsy Shop page.  I kept the layout the same, but this page has all my Etsy listings and the images are larger.

mini-custom
And here is a screenshot with the background and title styled with blue.

Etsylistings: Steps to install ‘Etsy Mini Alternative’ Tool

You do need to self host your website since you need access to the server in order to copy the javascript (.js) file on your website. Beyond that there is little coding skills required, though it is helpful to know some html and css to customize it exactly how you like.

  1. The code and instructions are located here on github.  Select the file: etsyapi.js and click ‘Raw’.  Copy the raw contents into a local file with the same name and save it. You will be updating it later with an api key that you will receive from Etsy.  You can read more details in this README.md but essentially, Etsy requires an api key in order to access its api.  This tool accesses only public data, but an api key is still needed.
  2.  Get your own Etsy Api Key at: https://www.etsy.com/developers/documentation/getting_started/register
  3. Update the .js file you created in step 1 and replace ‘apiKey’ with the value of your api key from step 2.
  4. Deploy the js file on your website server
  5. Create an html doc or embed the code into an existing web page.  The required code will call a function:  function getlistings(shopname, params, limit, imagesz) from the javascript file.  See README.md for further details.  There is a sample html document with a complete example including styling. This is the styling I’m using in my website.

Etsylistings: Example Code for WordPress pages

From the Text Editor (Not Visual Editor) add the required javascript code.  Here is an example:
<style>
div.image {
padding: 10px;
float:left;
margin-right:5px;
}
div.img:hover {
border: 1px solid #777;
}
</style>

<h2 style=”color: #558c89;”>BellasJardin on Etsy

<script // <![CDATA[ src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js”>
// ]]></script>

<script>// <![CDATA[
$.getScript(“http://bellasjardin.com/etsyapi.js”,function(){
getlistings(“bellasjardin”,”title,price,url”,15,”small”);
});
// ]]></script>

<div id=”etsy-images” class=”img”></div>

Breaking it down

The following code is required for calling the javascript function. Everything above it is for styling and you are free to customize to your heart’s content.

<script // <![CDATA[ src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js”>
// ]]></script>

<script>// <![CDATA[
$.getScript(“http://bellasjardin.com/etsyapi.js”,function(){
getlistings(“bellasjardin”,”title,price,url”,15,”small”);
});
// ]]></script>

<div id=”etsy-images” class=”img”></div>

2 thoughts on “Etsy Mini Alternative

  1. Tina Ernspiker

    I tried implementing this into my website since Etsy Mini is no longer available but unfortunately, the code is not working for me 🙁 I am not sure what I am doing wrong, but thanks anyway!

    Reply
    1. [email protected] Post author

      Hi there,
      Sorry for the late response. I had not checked in for a while. I can try to to help you if I get more details. In looking at your website it seems you also have issues with integrating your site with instagram. I had an issue also and found that they shut down an api I was using so I fixed it with an alternative.

      By the way, love your blog posts. I admire you and your family’s courage in going outside the box and living life to the fullest on your own terms.

      Reply

Leave a 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.