Clothing Store Sample Most Recent Publish:  August 15, 2011 10:04 AM

Help

Seller Central Help: Amazon Webstore Help: Mobile Optimized Webstore: Customizing Your Mobile Site

Customizing Your Mobile Site

When you add mobile to your Webstore, some of your desktop customizations will carry over to the mobile view, whileothers will not. To understand how different configurations will appear, the following are best practices when designingyour mobile site.

Default Mobile LogoUpdating Your Mobile LogoMobile Home PageProduct Detail PageCart and Checkout PagesMy Webstore Master PageHeader and Footer LinksThemesCustom CSSJavaScript Customizations for the Thank You PageSite Features

Default Mobile Logo

When you enable mobile, we provide a default mobile version of your current logo. When you publish your site, thislogo will appear on all mobile pages. The same mobile logo file will be used if you switch themes.

To locate the default mobile logo:

1.  From Seller Central, click Store Design, and then click File Library.2.  On the left side panel, under Site Files, click Merchandising Files.3.  Click Images and locate the logo_phone.png file.

Example mobile logo

Updating Your Mobile Logo

If you want to change your mobile logo, you can upload a new image using the same file name. When you upload anew logo image, the image will be automatically scaled to fit the mobile header.

To replace the default mobile logo:

1.  From Seller Central, click Store Design, and then click File Library.2.  On the left side panel, under Site Files, click Merchandising Files.3.  Click Images and then click Upload Files.4.  Select your file. The file must have the same file name: logo_phone.png. We recommend that your logo

image be approximately 80 pixels tall and 340 pixels wide.

Was this page helpful?

 Yes No

Related Topics

Customizing Your MobileSiteAnalytics Data for the MobileThank You PageMobile Optimized WebstoreFAQ

More ways to get help

Visit our Seller Forums to gethelp from other sellers.

Or get help from Amazon:Contact Seller Support

Searchclothingstoresample.webstorepowered.com

INVENTORY ORDERS ADVERTISING STORE DESIGN REPORTS PERFORMANCE

Messages Help Settings

5.  On the Overwrite Existing Files message, click Yes.6.  When the file is uploaded, click Finish.7.  Preview your Webstore to see how your logo appears.8.  Publish your Webstore to make your new logo appear on your live site.

Mobile Home page

When you add mobile to your site, please note that the following apply for your mobile Home page:

Image Widgets:

If you have an Image widget with the image carousel on your desktop Home page, the widget will appear on yourmobile Home page. If you have multiple image carousels, the image carousels will be stacked on top of each other. Youcan enter a title and add a link to each image in the carousel.

If you do not have any Image widget carousels or if the Image widget displays a single image, no image will appear onyour Mobile Home page.

To learn more about using the Image widget and adding an image carousel for your mobile pages, see the ImageWidget help topic.

Notes:

The Hotspots option for the Image widget are only supported on desktop and will not appear on your mobilepages.Images displayed via JavaScript or custom HTML are not supported for your mobile pages.

This is an example Image widget configuration:

This is an example of two Image widgets with carousels that appear on the Home page:

Upsell widgets

The mobile Home page supports the following upsell widgets. These widgets will appear in mobile if the widgets are alsoavailable on the desktop Home page.

Recently Viewed Products widget Learn moreBest Sellers widget Learn moreNew Releases widget Learn more

Note: The widget conditions also must be met in order to appear on your site. For example, if a customer is a firsttime visitor to your site, the customer will not see the Recently Viewed widget because the customer has notviewed any products yet. When the widget conditions are met (products are viewed or purchased), the widgets willappear automatically on the page.

In this example, the Recently Viewed widget appears on the mobile Home page:

Product Detail Page

By default, multiple product images will appear in a carousel. Customers can swipe to see the next image.

Any promotions that you have for the product will appear for your mobile Product Detail pages.Product information and reviews appear below.The Social widget will appear in mobile if the widget is also available on the desktop Product Detail page. Learnmore

Example Product Detail page:

By default, the mobile Product Detail page supports the following upsell widgets. These widgets will automaticallyappear on your mobile Product Detail page, regardless if the widgets are available on desktop or not.

Guests Who Viewed Also Viewed widget Learn moreGuests Who Bought Also Bought widget Learn moreRecently Viewed widget Learn moreProduct Accessories widget Learn more

Note: The widget conditions also must be met in order to appear on your site. For example, if a customer is a firsttime visitor to your site, the customer will not see the Recently Viewed widget because the customer has notviewed any products yet. When the widget conditions are met (products are viewed or purchased), the widgets willappear automatically on the page.

Example upsell widgets on the Product Detail page:

If you have the Customer Reviews Site Feature enabled, the Reviews tab appears next to the Product Info tab. Pleasenote that writing customer reviews on mobile pages is not supported at this time.

Example customer reviews on the Product Detail page:

Cart and Checkout Pages

On the Cart Summary page, the Shipping and Tax Estimation widget will appear in mobile if the widget is alsoavailable on the desktop Cart Summary page. Learn moreGift options during checkout are not supported at this time.Amazon.com, SellerBranded, and Guest Checkout are all supported for mobile.

My Webstore Master Page

The My Webstore Master page supports the following widgets. These widgets will appear in mobile if the widgets arealso available on the desktop My Webstore master page..

Site Navigation widget Learn moreLinks footer widget Learn moreService Provided by Amazon Learn more

Header and Footer Links

By default, the mobile header will display the following on your mobile pages:

1.  Menu icon2.  Logo3.  Search icon4.  Cart icon

Example mobile header:

On the top left corner is the menu icon. The menu icon will contain links to all other pages on your site, including:

My AccountTrack OrderCategory pages (Men, Women, Kids, Sale, etc.)All other pages that you have in the Links footer widget on your desktop pages. Learn more

Example mobile menu:

By default, the following links will appear in the footer on your mobile pages:

Sign in and outTerms and ConditionsPrivacyContact UsView Full Site

Example mobile footer:

Themes

By default, your desktop and mobile views will share the same theme. For example, if you selected the Inspirationtheme with a blue background for your desktop, your mobile suite will share the same blue background.

You can use the Themes & Customizations tool in Seller Central to customize your theme. Your changes will appear onyour desktop and mobile pages.

To use the Themes & Customizations tool:

1.  From Seller Central, click Store Design, and then click Themes & Design.2.  On the Themes & Customization page, click Webstore Themes or My Themes.3.  Select your theme and click Customize Theme.4.  If you want to customize a new theme, you need to name and save it.5.  Make your changes to the theme.6.  Click Apply to my Webstore.7.  Click Preview Webstore to view how your pages will appear with your changes. We recommend that you

preview your desktop and mobile pages.8.  When you’re done, click Save Changes.9.  Publish your Webstore to make your new theme appear on your live site

When using the Themes & Customization tool, please note the following options will apply only to your desktop pages,but will not apply to your mobile pages:

Logo Margin BottomImage File Width and HeightMinicart Flyout: Text Color and Background ColorNav Bar Background HeightSite Background Image Position

Custom CSS

If you are using your own customized CSS files for your Webstore, your mobile pages will not inherit the same CSSstyles. You will need to customize the CSS files for your mobile pages separately, otherwise your mobile view willdisplay the default style of your selected Theme.

We provide you a mobile CSS file named phone_overrides.css. This file will only apply to your mobile pages.

Note: We also add the file phone.css and some JavaScript files that begin with ws.mobile to your File Library. You donot need to change or edit these files.

Example scenario:

You have the Inspiration theme, and choose a green background.The desktop and mobile pages share the same Inspiration theme, and both have green backgrounds.You use the phone_overrides.css file and add your CSS to change the background to yellow.The desktop pages will continue to have the green background.The mobile pages will now have the yellow background.

Each theme will have a separate phone_overrides.css file. If you switch to a new theme, you will need to updatethe phone_overrides.css file for that theme.

To locate the phone_overrides.css file:

1.  From Seller Central, click Store Design, and then click File Library.2.  On the left side panel, under Site Files, click Theme Files.3.  Select your Theme, and click the CSS folder.4.  Select the phone_overrides.css file and then click Edit File.5.  Enter your custom CSS in the text editor.6.  Click Validate File to check for any errors.7.  Click Save.8.  Preview your Webstore to see how our mobile pages will appear.9.  Publish your Webstore to make your CSS appear on your live site

JavaScript Customizations for the Thank You Page

The Thank You page appears after a customer places an order. You can use the Thank You page for affiliate tracking.

Note: Currently, JavaScript is only supported for the Thank You page. All other mobile pages will not supportJavaScript. If you have JavaScript on the Thank You page on your desktop page, (for example, affiliate tracking),that JavaScript will not apply to your mobile Thank You page.

We provide you a mobile JS file named thank_you_phone.js. Using this file, you will need to add your JavaScript forthe mobile Thank You page.

Rate this page   |   Contact Seller Support Clothing Store Sample  © 19992015, Amazon.com, Inc. or its affiliates

Example scenario:

1.  You have JavaScript for the desktop Thank You page.2.  You add mobile to your Webstore.3.  Your JavaScript will continue to work for your desktop page, but will not work for your mobile page.4.  You add your custom JavaScript to the thank_you_phone.js file. The mobile JavaScript file will apply when

customers place orders on their phones.5.  If you switch themes, you will use the same thank_you_phone.js file.

Note: If you make any changes to your JavaScript for your desktop Thank You page, the changes will not transferto your mobile page. You will need to update the JavaScript separately for your desktop and mobile Thank You page.

To customize the mobile Thank You JavaScript file:

1.  From Seller Central, click Store Design, and then click File Library.2.  Under Merchandising Files, click JS.3.  Select the thank_you_phone.js file and then click Edit File.4.  Enter your custom JavaScript in the text editor.5.  Click Save.6.  Publish your Webstore to enable your JavaScript on your live site.

To learn more about using custom JavaScript for the Thank You page, see Analytics Data for the Mobile Thank YouPage.

Site Features

Mobile Optimized Webstore supports the following Site Features:

Amazon.com CheckoutSellerBranded CheckoutGuest Checkout (for SellerBranded Checkout)Prime on your SiteCustomer Reviews (Please note that customers can only view customer reviews on your mobile pages.Writing customer reviews on the mobile Product Detail page is not supported at this time.)

All other Site Features are not supported for your mobile pages at this time.

Return to top