Release Notes: Bug Fixes, New Theme, and Category RSS in Beta
Now in Beta: Making Reblog Better

Creative Tip: Integrating Your Etsy Shop on Your TypePad Blog

From personal to business, crafting to causes, and a blend of all those in between, a plethora of bloggers have found their home at TypePad. My name is Brianna. I'm a member of your TypePad One Support team, and I'm a small-business craft blogger.

My blog, The Yarn Side, focuses on my foray into the world of turning my love of dyeing yarn and fiber, for fellow knitters and crocheters, into a real business.

Theyarnsidedotcom
One of the most important features I needed the blog to have, however, was an integration with a storefront. I had already been using Etsy, and knew of the Etsy mini widget, but I needed it to do more than sit in the sidebar. 

As a member of the TypePad One Support team, I have a few tricks up my sleeve. Most noticeably, however, is the display of the Etsy widget between my banner and post content. This makes sure that the small gallery of my shop items, which link to their listings, are one of the first things my visitors see. This is accomplished by using settings mentioned in our Display Content Above Banner article for TypePad Pro.

My favorite thing about integrating my shop and blog is that my visitors can quickly, and easily access my work--first by reading about shop updates, clubs, or how-to's, and then clicking associated shop links so that they can buy the items I discussed.

Are you a craft blogger? Do you sell your work? We'd love to see how you have integrated your shop with your blog! If you haven't done so yet, then you should definitely read more about adding the Etsy mini widget to your blog or setting yourself up as an Etsy seller so you can turn your crafting passion into a business you love!

/ Posted by Brianna, The Yarn Side

PS. Do you know someone who with an Etsy shop? Help them find new customers and take their shop to the next level with a TypePad blog.

Comments

Stephanie Monroe

I currently have an icon in the right-hand column of my blog that links to my store. Other than that I actually haven't tried to ad a mini-storefront to my blog's home page. Is there a mini widget for Big Cartel stores?

Brianna

Hi Stephanie!

It appears Big Cartel doesn't offer widgets at this time, but you can create your own using WidgetBox (http://www.widgetbox.com/). Once signed up, just click to create your own widget.

I believe the steps are as follows:

Go to "Make a Widget", then select "Blog/Feed". You'll then be prompted to enter the URL of your Big Cartel store. Click "Make Widget", and you'll be provided a series of options to choose from.

Once complete, you'll have the code needed to add it to your blog's sidebar. You can use the Notes TypeList to add it, and you can find out how to do that here: http://help.sixapart.com/tp/us/add_typelist.html

You should also let Big Cartel know that you're interested in their developing a widget you can use to promote your shop on your TypePad blog! :)

Stephanie Monroe


Thanks!!!


I will definitely try that.

Stephanie Monroe
www.thehoneypietree.com
thehoneypietree@gmail.com

Sue

This is cool! Can't wait to try it!

Brianna

Hi Sue! I hope you do try it; it's a great addition to any craft blogger's site that sells their work. :) Make sure to come back and leave a comment with a link to your blog so we can check it out when it's all done.

A Passionate Quilter

Help! I really like how you integrated your Etsy link in between your banner and your post. Any special directions for doing this? When I went to the "Display Content Above Banner" article that you recommended it didn't say how to do this specifically. I don't know enough about code to figure it out myself!!
Thanks for any help!
Heather

Account Deleted

Help! I really like how you integrated your Etsy link in between your banner and your post. Any special directions for doing this? When I went to the "Display Content Above Banner" article that you recommended it didn't say how to do this specifically. I don't know enough about code to figure it out myself!!
Thanks for any help!
Heather

serge the concierge

I tried to use your directions in how to add module in header to put an AD Module for 'Six Apart Media' with Code from Adify.

I created the space first but when I put AD Code it did not display right. The AD showed over my Blog Banner.

Is it because I already have some AD Code and other items in the Footer?

Thanks for the clarification

Serge
www.sergetheconcierge.com

Brianna

Hi Serge!

You can have content in the Blog Footer that also appears at the top of your blog. The content you want to display above the banner is wrapped in a DIV tag with CSS that forces it to change position.

Because it's much easier to see what's going on, as well as provide specific support to you and your blog, I've gone ahead and opened a ticket for you so that the whole team can be available to help.

Brianna

Hi Heather--

The article I linked to focuses on displaying content above the banner, but you can use similar code to display code below it as well. Because the exact code needed may differ for your design, I've gone ahead and opened a ticket for you. This will allow us to take a much closer look and provide you specific, detailed support.

A Passionate Quilter

Love my new Etsy banner, thanks for all of your help!! :)

Brianna

It looks great, Heather! :)

Brianna

Serge,

Just wanted to let you know that I saw the ad on your blog, and I'm so glad we were able to help you out with that! Hope you've had a great weekend.

Women of a Certain Age

Hi Brianna, the article you referenced shows how to put the content about the banner. How do I put the content beneath the banner as you did? You have a great look on your page, by the way. :)

Renee'

Brianna

Renee!

Thanks so much for the compliment on my site. :)

You can use similar code to place the content beneath the banner, by pushing your navigation bar down and changing the "top" reference in the code that goes in the blog footer.

For example, I would suggesting using a jumping off point of:

#nav { margin-top: 100px !important; }

then, in the code for the blog footer:

div style="position: absolute; top: 300px;"

(Make sure to use the less-than and more-than signs, surrounding the above DIV code. I removed it so that it wouldn't break this comment. :D)

Change the 100px associated with #nav (your navigation bar) until you have enough room for your content. Change the 300px associated with the DIV tag until it's in the exact place you want it to be.

Hope that helps! If you need anything more specific, let us know and we'll open a ticket for you. :)

The comments to this entry are closed.