You’re offline. This is a read only version of the page.
Thank you for your feedback
Please let us know how this article can be improved.
Choose all that apply.*
Report a bad link
Out of date (instructions or screenshots)
Missing detail
Other
Need help getting started? Check out our crash course video for an overview of the mobile storefront.
Note: On April 21, 2015, Google revised its search ranking algorithm to include mobile-friendliness as a factor in ranking mobile search results. We recommend that you enable the mobile storefront in your Store Control Panel, or confirm that your existing custom site is mobile-friendly to Google.
Using a Theme Manager template? These templates have a mobile version built right in, and activating Mobile Storefront will interfere with the proper display of your store. We recommend that you don't activate Mobile Storefront while using Theme Manager.
Look for these new variables on the Variables page in your Store Editor.
| Variable | Description |
|---|---|
| Mobile-template | Name of the currently active mobile template. The default template is named mobile. To activate a custom mobile template that you 've created, enter the name of that template in this field. |
| Mobile-add-to-cart-image | Image for the button to add an item to the shopping cart. |
| Mobile-back-to-top | Image for the button to return a shopper to the top of the page. |
| Mobile-cart-icon | Image for the shopping cart icon at the upper-right corner of the page. |
| Mobile-long-caption-cutoff |
Approximate* number of characters to display in item descriptions when the total description is at least twice this length. When applicable, a Read More... link is displayed. If the total description isn't at least twice this length, the entire description is displayed (no Read More link). For example, let's say this variable is 200 characters:
*To prevent HTML tags in your item descriptions from being truncated, the number of characters is treated as an approximate cutoff. |
| Mobile-menu-icon | Image for the navigation menu icon at the upper-left corner of the page. |
| Mobile-name-image |
Image for your company logo. The logo will appear at the top of your pages. If you don't upload an image, the image from the Name-image variable will be used, if it exists. Image sizing: If your image is larger than 270 pixels (width) x 50 pixels (height), it will automatically be resized to fit the mobile template using the same aspect ratio as the original image. |
| Mobile-page-next | Image for the next icon in image carousels. |
| Mobile-page-prev | Image for the previous icon in image carousels. |
| Mobile-page-size | Number of items to display per page on Section pages. |
| Mobile-remove-html-tags | Remove existing HTML markup in product descriptions. |
| Mobile-search-go | Image for the search icon at the top of the page. |
| Mobile-head-tags | HTML or JavaScript to appear in the HEAD section of your mobile pages. (Putting tracking code in the HEAD section can make your pages load slowly. It's best to put tracking code in the Mobile-scripts-bottom variable instead.) |
| Mobile-scripts-bottom | HTML or JavaScript to appear at the bottom of your mobile pages. |
| Mobile-contact-us-phone | Phone number to display at the bottom of your mobile pages. |
| Mobile-menu-title | Title for the navigation menu that appears at the bottom of your mobile pages. The default menu title is CATEGORIES. |
| Mobile-default-product-image | Image to be displayed on items that don't already have an image. |
Variables that contain images
Mobile-cart-icon and Mobile-name-image are examples of variables that contain images. These variables have default images, but those default images won't display on the Variables page in your Store Editor. An image will only display on the Variables page if you upload your own image. If you delete a custom image, your mobile storefront will revert to the default image.
Control other aspects of your mobile storefront by setting up the these custom fields.
| Field | Description |
|---|---|
| Mobile-caption |
Item or Section page description shown to mobile shoppers. To use this field, create a custom attribute (formatted as a text field) called Mobile-caption in your product tables. When populated, mobile shoppers see the Mobile-caption instead of the Caption. When empty, mobile shoppers see the Caption. Desktop shoppers always see the Caption, even if the Mobile-caption is populated. |
| Mobile-message |
Message shown to mobile shoppers on your Home page, directly above the lower navigation menu. To use this field, create a custom property called Mobile-message on the Home page in your Store Editor. When populated, mobile shoppers see the Mobile-message instead of the Message. When empty, mobile shoppers see the Message. Desktop shoppers always see the Message, even if the Mobile-message is populated. |
As you review and update your mobile storefront settings, you can see what your mobile storefront looks like using the currently active Mobile-template variable, without having to publish your changes.
By default, the preview is sized to iPhone dimensions. You can resize it by clicking and dragging the bottom-right corner of the preview.