Create a new template¶
Table of contents
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.
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.
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.
For more details check Surrounding container.
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.