WebStore by Amazon 3.5.1: Merchant Manual
33
Advanced Customizations: Tips and Tricks
Using Tips and Tricks
You can use the tips and tricks below to get started developing an interesting and
unique WebStore. We provide these tips and tricks to get you started, but you can
experiment and invent your own methods to develop a site that suits the needs of
your business.
Change the Layout of Your WebStore
WebStore by Amazon offers several out-of-the-box themes for the layout of your
WebStore, but you can also create your own layout. To create and insert a custom
WebStore layout, you need to override the existing cascading style sheet (CSS) for
the theme you’ve chosen in the setup wizard.
Embed a New Cascading Style Sheet
CSS controls formatting such as font color and size, and background colors and
images. The following are instructions on how to insert a customized CSS onto your
site.
Download the Default Style Sheet
• Download the default style sheet and view the source of any page on your
store front. Click view>source in your browser to view the source code.
• In the source code you will find a line like this: <link
href="/themes/natural/variations/sky/styles/natural.css"rel="stylesheet"
type="text/css">
• Paste the “href” path into your browser after your site URL. For example,
http://www.yoursite.com/themes/natural/variations/sky/styles/natural.css.
Save the CSS file to your computer by clicking File> Save As > Web Page,
Complete.
• After the CSS file is saved, you can view styles associated with particular site
elements and customize those elements by overriding the existing style
sheet.
Override the Existing Style Sheet
The following is an example of overriding the default CSS is the top navigation link
bar. In the Template Manager tool, create a top link bar using the link bar widget.
Paste the following CSS into the topmost red (global) widget holder. Pasting into the
global widget holder applies the styles across the entire site:
<style type="text/css"> body td p{ font-family: Trebuchet MS, Verdana, Arial,
Helvetica, sans-serif; font-size: small; color:#182c6b; } /* topnav*/ .navDots{
width:1px; background-image: none; background-color:#5f534c; }
a.topNav:link,a.topNav:visited {color:#333; font-size:xx-small; } a.topNav {
display:block; text-decoration:none; color: #333; font-weight:bolder; font-size:x-
small; padding:3px 4px; border-top: 1px #182c6b solid; border-bottom: 0;
