"Help! My aStore is cut off on the right! How do I make it narrower?" This question is very common on the Amazon affiliates discussion board. The answer is to take advantage of Amazon's option for adding your own "overriding CSS" to the aStore style sheet.
To do this, edit your aStore. In step 2, Color & Design, click Edit CSS. Then enter your own CSS in the big empty box on the left side of the screen. A quick and painless way to remove 48px from the width of the aStore is to enter the following CSS in the Global style sheet:
body {margin: 0;}This style removes the default 24px margin from the aStore <body> tag, moving the content flush top and left in the <iframe> container.
To make a narrow aStore, some CSS styles have to be changed or added in each tab of the CSS sheet editor. You can do it yourself by starting with the Global tab and working your way through the tabs for Category, Detail Page, Listmania, Reviews, and Shopping Cart, or you can take the easy way out and start with a Shared Theme.
On the Color & Design page, click Shared Themes. Unfortunately, there is no way to search the themes, but you can browse through them, and preview any that have the word narrow or skinny in their titles. As a learning exercise, I posted three shared themes, Narrow Earth, Narrow Blue Centered, and Narrow Red Centered. These themes are each 680px wide, so they will fit in the center column of many web pages.
Remember to jot down your color preferences (or take a screenshot) before you apply a shared theme so that you reselect them afterwards. You can also reselect a previous color scheme from the dropdown list without affecting CSS in the shared template. The same thing is true for font styling (found in some templates) that is unrelated to adjustments for element widths, padding, and margins.
If you later decide to go back to a standard theme, you can. Just remember to select "Edit CSS" again and manually delete all user-added styles in the CSS tabs.
As noted in one of the comments, if you use a sidebar search widget with Amazon categories, it needs to be about 10px narrower to avoid cutting off the arrow next to the dropdown category selection box. I will update my Narrow templates to add the CSS for that. I overlooked the search widget because I use hand-picked products instead of Amazon categories.
There are alternatives to the aStore if space is tight. The "My Favorites" widget can be made narrow enough to fit in a sidebar and is automatically paged. Likewise, the "Recommended Products" widget can be vertically oriented. The aStore widget can be made long and narrow or wide and narrow. It displays items from the aStore's first category, so control over the contents is indirect.
I hope this tip saves you some time getting your aStore integrated into your web site. In turn, if you make a great theme, you might want to allow it to be shared, too.
6 comments:
Thanks for posting this. I had been struggling with getting an Astore to fit in a 690px column. It looks like I now have a solution!
Thanks - this was very useful. I used the Narrow Earth and changed the colors to match my site. I also adjusted the search box: select.searchwidget {width:163px;}
Now I just need to fill up my store!
MRDPE
http://theprofessionalengineer.com/shopping-portal/
This sounds too complicated for me. I will try anyway, because I really will prefer to add my astore to Blogger.
If you're unsure of the outcome, I'd suggest duplicating your aStore so that you can practice on a copy without disturbing the actual store. The procedure sounds more complex than it is. If your blogger template is narrow, the aStore still may not fit unless you add it to a Google Page, and conditionally hide the sidebar(s). Best of luck!
Many, Many thanks........ this is exactly what I needed to do!
You're welcome, and thanks for letting me know the info was useful!
Post a Comment