AMP: Accelerated Mobile Pages /
Configuration
Configuration
Product Page Settings
Product Display: text, custom fields, colors, and other settings
Custom field settings: enter custom field codes separated by spaces. Using custom fields you can drastically increase the amount of product information on the AMP page. AMP page HTML is somewhat restricted so you can't always use the default product description, especially if there are images, javascript, or inline CSS, all of which are invalid in AMP pages.
There are three special custom fields.
- product:header - displays content from the default product header
- product:footer - displays content from the default product footer
- product:description - displays content from the default product description
These fields also have optional custom headers/labels and will be displayed just above the content in most cases. The setting for this are ust below the custom field settings in this section.
Product content varies from store to store so you must set this up manually.
Custom fields to display directly above product image(s): Display information from a custom field above the product images. Product images will be displayed in a slider/carousel.
Custom fields to display directly under product image(s): Display information from a custom field directly below the product images carousel.
Custom fields to display in different "touch to open" content areas at the bottom: Display content from a custom field in a "click to open" accordion style display under the product image carousel (and the custom field setting above). Each custom field code will have it's own "click to open" section titled the name of the custom field.
Custom fields to display in one "touch to open" content area under sharing buttons: Same idea as above except all of these custom fields will share one "click to open" area.
product:footer accordion header: This is used as a heading in the case that product:header special field is being used. This is optional.
product:footer accordion footer: Same as above, but for the product:footer.
Product name color: Font color for the product name which is linked to the regular product page.
Product Image Dimensions: The AMP product carousel is set at a predetermined image size. Images will be stretched to fit this space so choose something close to your image sizes. Size is based on pixels. Do not enter a px suffix: 512 (yes!) 512px (no!)
Action Button: This is the "add to cart" button. If you have prices turned on (see below) this button will add the product to the regular Miva Merchant shopping cart. If prices are turned off, this button takes the customer to the item's product page. Turn price on/off and customize the button labels below.
Product Video: A lot of people store video URL's in a custom product field. If you practice this then enter the custom field code here. If you use a custom field to store the video ID, enter that custom field in the space below, and, choose the video provider. AMP will build embed code for the video.
Category Page Settings
Colors: The category has a product carousel at the top of the display. The product name is displayed on the bottom of the product image. A transparent background is nice here.
Bottom Slider: The bottom slider is a small product carousel. Enter a category code to create a bottom slider. It will default to the category name but you can customize that here.
Carousel Image Dimensions: This helps you adjust the size of the product carousel to more closely match the image dimensions of your products. Same rules as above- based in pixels, numbers only.
Copyright Settings
Use © to display the copyright symbol. Use $year$ to display the current year.
Site Analytics
Enter your Google Analytics site ID number here.
Social Sharing
If you have social sharing already setup in your ReadyTheme, AMP will use that information. If you don't or if you want to customize any of the links, enter them here.
The AMP protocol doesn't yet support a lot of social networks. The AMP module will be updated as new features are added.
Sidebar Flyout Menu
This is a category list that opens via hamburger button. Contents can be entered manually in the textarea or they can be loaded from a ReadTheme navigation set.
To make a new navigation set, go to MENU > READYTHEME > NAVIGATION SETS then add a navigation set.
Use the code amp and name it Accelerated Mobile Pages.
Disregard layout and replace the template code with the code below.
<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems"> <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems"> <h4 class="category">&mvt:navigationitem:link;</h4> </mvt:foreach> </mvt:if>
Custom CSS
Override any AMP CSS here.
updated November 15, 2016
