Create a new template¶
To create a new collection, select the section “Templates” from the ASA 2 main menu:
On the templates main page click the button “Create new template”. The template editing page will be loaded.
A template must have a name. Only alphanumeric characters and underscore are allowed for the template name.
The “Default HTML” text box is where you put the HTML code for rendering your Amazon products.
The default HTML is used under default conditions, for example, when the page is accessed from a desktop browser.
To place product information use Placeholders. Also check out ASA2 extensive Template Syntax. For example you can use Conditions, Loops and placeholder filters (see Default Filters) to completely customize the output of your templates.
For each template you can define default CSS. This will only be loaded once even if the template is used multiple times on a page.
The default CSS is used under default conditions, for example, when the page is accessed from a desktop browser.
HTML and CSS for AMP (Accelerated Mobile Pages)¶
AMP stands for “Accelerated Mobile Pages”. It is an open-source library with the aim to improve the performance of web content. The project is led by Google.
Find out more about AMP on the AMP project homepage.
To adjust your ASA2 templates for the use on AMP pages, you can create customized HTML and CSS contents for this purpose. Use the text fields below the tabs “HTML AMP” and “CSS AMP”.
The managed templates included in ASA2 are already prepared for AMP.
If you leave the AMP content empty, the default content will always be used.
Compatible WP AMP plugins¶
With WordPress it is easy to prepare your website for AMP. Typically, a plugin does all the work for it.
ASA2 is currently compatible with the following AMP plugins:
If you have problems with another AMP plugin, please let us know.
The sourrounding container is optional. It can be used for Collections and smart collections (see [asa2_smart_collection]) to place HTML code around the list of items.
For more details check Surrounding container.
Optionally you can enter a comment for a template. This is useful for additional notes about the template. For example if you want to share your tempalte, you can write about the intention of the template or how to use it. Comments support some HTML tags. See the form field description.
Tempalte comments will be shown when you hover over the template name in the list of templates.
With ASA2 you can include one template in another. For more details see: Include other tempates. This makes it possible to prevent template code duplication. For example, you can create the template code for a lightbox image gallery, store it in one template and use this in every other template where you want to have this kind of gallery.
Such pieces of reusable code are called “snippets”. You should check this option, if the template is a snippet. This will keep the temlpate handling cleaner because snippets do not appear in template selection menus like in the product picker.
Template snippets will be labeled in the template overview list:
Select this option if the template is designed for the single image function of ASA2.
Image templates can be identified by a picture icon in the overview:
After you filled the template form fields, click the “Save template” button to save the template.
It will now be listed in the templates list:
Learn how to Using a template to render a product.