August 10, 2011

Integrating Etsy shop into your Typepad blog

Typepad allows you to easily integrate an online shop into your blog, including your Etsy shop. You can create an Etsy Mini widget which can be added to your blog to display the items for sale in your shop. One click and your blog visitor will be able to review and buy your handmade creations on Etsy.

Within your Etsy account, click the Your Etsy tab. Under the Promote section in the left column, click the Your Etsy Mini link.

Step 1: Items to show. You can select to display items from your Etsy shop or items marked as favorites on Etsy.

Step 2: Choose image size. You can select to display smaller Thumbnail images or larger Gallery images. With the Thumbnail option, you can display images side-by-side in the sidebar.

Etsy Gallery Widget
Etsy Gallery Widget
Etsy Thumbnail Widget
Etsy Thumbnail Widget

Step 3: Choose layout. The number of columns selected will depend on the image size and width of your sidebar column. For most Typepad layouts, we recommend:

  • For Gallery, 1 column layout with any number of rows.
  • For Thumbnail, 2 column layout with any number of rows.

Step 4: Copy the code for the javascript version of your widget.

Step 5: Within your Typepad account, go to the Design section for your blog and click to edit the Content. Then, select the Embed Your Own HTML module from the list and click the Add This Module button. In the pop-up window, paste in the code for your Etsy widget and click OK.

For some themes, you will select to edit the Custom Sidebar and add the code for your Etsy widget directly to the Custom Sidebar field.

Click Save Changes to update your published blog.

Adding an Etsy shop as a Page within your blog

If you want to display more items from your Etsy shop, you may want to add the widget to your blog using a Page. Then, you can select a Gallery layout for your Etsy widget to include 3 columns and 5 rows which will fit most Typepad layouts.

After configuring your Etsy widget as described above and copying the javascript version of your widget, go to Typepad and select your blog from the Blogs menu. From the Compose drop-down menu, select New Page. Click on the HTML tab drop-down menu and select Markdown. Paste in the code provided by Etsy. Finally, click Publish.

A link to the new page can be added to the Navigation Bar below the banner or added to the sidebar with a Links TypeList.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services