Setting Up a Shop Page on Your Blog

If you have more than one shop, displaying your shops on your blog or hosted site can help show off your shops and bring them traffic. Having a centralized page for all of them really looks professional.

I’ll show you how to do this for Blogger and for a self hosted WordPress blog (not WordPress.com blogs). I’ll provide a few tips for a self hosted web page and WordPress.com blogs – but not in detail.

Setting up the Shop Page on Blogger

  • Go to Posting->Edit Pages-> New Page
  • * Fill in your title. (Go ahead and be Captain Obvious here and call it “Shops” or something people will figure out right away.)
  • * In the main text box you may want to give it a title like, “Selections from (shop name) on Etsy”.
  • * To help draw attention to it in search engines you may want to click on the “Edit in HTML” tab and put <h2 title=”Selections from (shop name) on Etsy”> in front of the title and </h2> at the end. This code tells search engines basically that this part of the page is important, aka a heading. The title part of it is picked up by search engines.
  • * Set up a title for each shop you have with a few lines in between each title.

Find the widgets you’d like to use for your page.

* For your Etsy shop you’ll likely want to use an Etsy Mini.

  • Go to your Etsy shop under “Your Etsy”->”Etsy Mini” in the Promote section of the left side bar.
  • Click the options you want. (Most likely you’ll want “Items from my shop”, “Gallery (155px by 125px)” and a large layout say 3-5 columns and 3-5 rows long.)
  • Copy the JavaScript version of the code.

Etsy Mini - Copy Javascript Code

Etsy Mini - Copy Javascript Code

  • Paste your shop code from your Etsy Mini widget into the Blogger Page you started under the Etsy Shop line.

Etsy Mini - Paste Javascript Code

Etsy Mini - Paste Javascript Code

* If you have an Artfire shop, you’ll likely want to use the “Shop Window”

  • Login to your Artfire shop and go to My Tools->Shop Window.
  • You’ll likely want the largest widget. Pick the one you’d like and copy the code.
  • Paste your shop code from your Artfire Shop Window widget into the Blogger Page you started under your Artfire Shop line.

* If you have an eBay shop, you’ll likely want to use the “Shop Window”

  • eBay doesn’t have a pretty widget solution anymore since the eBay to Go widget stopped working. But you can setup a feed on Feedburner and have the latest items you listed be shown on your shop page. Setup your shop feed as described in “How To Integrate Your eBay Store in WordPress Blog”, but stop after step 2. Copy the BuzzBoost JavaScript code.
  • Paste the BuzzBoost JavaScript code into the Blogger Page you started under your eBay Shop line.

Once you save your page, you’ll be asked how you’d like the Pages Gadget to appear on your page. You can choose from a blog sidebar, blog tabs near the top, and no gadget at all. I’d recommend having the widget in an easy to find place. If you use the sidebar – place it near the top of your page. If you use the tabs – it will be placed at the top automatically.

When you go to view your shop page it should show up something like my test setup blog in the image below. (I chose the blog tabs option, so note the “Home” and “Shops” tab links in grey on the left.)

Shops Page - Blogger

Shops Page Example on Blogger

If you don’t have a “sandbox” blog where you test out changes to your real blog (say for reworking your blog design), I’d recommend having one. Blogger lets you have more than one blog and you don’t ever have to let people know about the test case one.

Self Hosted WordPress Blogs

If you have your own hosted website and use WordPress on your hosted site, there’s a particularly spiffy plug-in called PageView that lets you embed another web page into your WordPress blog posts and pages. Using it to embed your Etsy shop page will look like the image below.

PageView WordPress Plug-In with Ojamiya Etsy Shop Embedded in Shop Page

PageView WordPress Plug-In with Ojamiya Etsy Shop Embedded in Shop Page

Now this is my caveat – the documentation on this plug-in is pretty sparse. To use the plug-in put the following in your blog post or page.

[pageview url "some title" description]

So to put my Etsy shop in my blog’s “Shop Page” I’d type:

[pageview http://www.etsy.com/shop/ojami "Ojamiya on Etsy" Bento Lunch Box Sets Sashiko Supplies Japan Inspired]

You’ll likely want to make one change to the plug-in. By default it shows a dinky section of the page, to show more of your embedded page at once edit the height in the CSS file.

To do this, go to Plugins > Editor. Then select the “Page View” plug-in on the upper left and click “Select”. Click on the PageView.css file and find this the line that starts with: div.pageview iframe It should look like this

div.pageview iframe
{
border-top: 1px solid #999999;
border-right: 1px solid #999999;
width: 100%;
height: 200px;
}

Edit your iframe properties. I changed mine to this with changes in the brown colored font.

div.pageview iframe
{
border-top:
1px solid #999999;
border-right:
1px solid #999999;
width: 100%;
height: 700px;
}

700px seems to show a good amount of my shop on my page.

When you’ve made the change click “Update File” and you’re ready to go. Just add a “[pageview url "some title" description]” line for each shop you want to display on your shop page.

Self Hosted Pages and WordPress.com Notes

If you have your own hosted web page and no Blogger or WordPress blog, you can create your own web page for your shops with the *ed lines from the Blogger shop page setting and creating your own link to your new page on your website.

WordPress.com blogs aren’t friendly to this kind of thing (scripts and external code). But you can create a separate page elsewhere (a blogger blog, a hosted page, a google website, etc.) and link to that page from your WordPress.com blog. Or take a screenshot of your shops and link to your shops with your screen shot on your WordPress.com blog.


I hope this tutorial is a help in bringing people to your shops from your blogs and websites! Enjoy!

**Ojamiya is a Japan inspired shop on Etsy that carries bento boxes and sashiko supplies. The owner of the shop, Amy, is the resident graphics ninja for Eco Etsy team. Thanks for the great post Amy!!

This post was written by

Ojamiya – who has written posts on Eco Etsy.

Email

Comments

  1. Hi,

    I really would love to utilize your etsy badge but I need CSS or javascript code to use with my rapidweaver site. Is there any way you can help me out?

    Thanks,
    Signe

  2. Thank you!! Worked like a charm!

  3. I’m glad the article is helpful! A pat on the back of you all for working on a more advanced topic!!!

  4. Thank-you so much! I learned a lot and have added my Etsy shops as pages to my blog.

  5. Amy, you are so awesome! This is the second time I’ve been wowed by your knowledge of all things internet! Thank you!

  6. wow! this is an informative post! thanks so much:)