How to Remove Sidebar from Blog for an Amazon aStore

Posted by Rochelle in How To... on 04 21st, 2009 | 10 responses

Module 4 in Crowd Mountain (aka CM) Bootcamp that discusses how to properly create and add an Amazon aStore to a blog.  One of the CM members asked how to add the aStore to our blogs by removing the sidebar, so the entire focus is on the aStore.  Since Michelle does not go into this, I figured I would create instructions, as I have done this but it can be tricky.

Create an Amazon aStore

If you are a CM member, follow Michelle’s instructions for creating your aStore.  The only difference will be to not include a store header:

If you are not a CM member, then go ahead and make your store to your satisfaction. 

Modify the look of the aStore to match your site.  When you are given a choice to place the aStore sidebar on the right or left, choose the side that your blog’s sidebar is on:

Choose whatever widget options you like, then click ‘Finish & get link.’  

There are three ways to add the aStore to your blog.  You want to copy the second option, “Embed my store using an inline frame’ and paste it in your Notepad.

Preparing Your Blog for the aStore

Now, you are going to create a new page on your blog.  To do this, open your FTP program and open page.php from the theme your blog is using.

Copy the code from page.php and save it as store.php (or whatever you want to call it).  

Edit the code from store.php to remove the sidebar, using a text editor such as Notepad,  To do this, look for and remove the following snippet of code:

<?php get_sidebar(); ?>

Now, add the following snippet of code to the top of your store.php:

<?php
/*
Template Name: Store
*/
?>

Next, look for the following code:

<div class=”post”>

You will change <div class=”post”> to the following code:

<div class=”post store”>

Upload the new store.php to your blog’s theme.  It will be in the same folder as the page.php file you initially opened.

You will also want to modify the code for your blog theme’s stylesheet.  Open style.css in a text editor, such as Notepad.  Add the following code to the bottom of the page:

/* Begin Amazon aStore */

.store { width:30em; }

/* End Amazon aStore */

Your store’s width may differ than what I put here, so play around until it looks right (you can do this after the next step).

Creating a New Page on Your Blog for the aStore

Log in to your blog’s Admin, and click ‘Pages / Add New.’

Create a new page by calling it Store.

Go back to your Amazon aStore code, copy the code, then return to the page you just created.  Paste the code into the HTML box:

Now, look on the sidebar and find the ‘Attributes’ box (you may need to open it to see the options available here).  Click the ‘Template’ dropdown menu and choose ‘Store’ (or whatever you named your new store template).  If you want to change the order of this page, then enter your chosen order number here.  Publish your page.

I am using WordPress v2.71.  If you are using an earlier version, then the next image, and the wording in your blog’s Admin, may differ, but it will be similar enough that I am confident you can figure out the similar items in your blog:

View your aStore and Tweak it

You will now want to view the Store page you just created.  There is a very good chance you will need to make a few tweaks.

First, you may find that there is a huge amount of white space under your Amazon aStore.  By default, Amazon makes it height=”4000″ and you may be tempted to change this to something shorter.  Be aware, though, that if you do this, you might be cutting off the viewable space for any individual item that takes up more space than the settings will show.  I would leave this alone, as it really doesn’t hurt anything to leave it.

However, there is a very good chance that you will need to change the width of your aStore.  The default value is 90%.  You can change this to any value that allows the store and the sidebar to be visible.  For the store I created for this site, I changed this value  to 150%.  You can change this value within your blog’s Admin by choosing to edit the Store page you created, and changing the width in the Amazon aStore code.

If you still find that you cannot view the entire aStore, then you may need to modify the width of the viewable page by tweaking the code you added to your style.css page.  Open style.css and play around with the width until you are satisfied.

And there you have it.  A somewhat tricky, yet not so bad, way of adding an Amazon aStore to your blog and removing your blog’s sidebar to make viewing the aStore easier. If you want to see an example of what I’ve done here, then click the ‘Store’ link up above. I made a Pokemon aStore, which was prompted by my nine-year-old daughter who is totally into Pokemon right now. Could be a good niche for someone to go into, perhaps…

If you want to make the best possible Amazon aStore for your niche store, then make sure you watch the video in Module 4 in Crowd Mountain.

_{»crosslinked«}

Similar niche store strategies:

1. How to Add External Links Alphabetically to Your Site’s Sidebar
2. How to remove the ‘Contact Us’ link from sidebar and add it to the footer
3. How to Link to Your Blog from Your BANS Site