Create a new template

To create a new collection, select the section “Templates” from the ASA 2 main menu:

ASA 2 Templates menu

On the templates main page click the button “Create new template”. The template editing page will be loaded.

ASA 2 create template

Template name

ASA 2 template name

A template must have a name. Only alphanumeric characters and underscore are allowed for the template name.

Note

Templates can be referenced by ID or name in shortcodes. See title and tplid

Default HTML

ASA 2 template default html

The “Default HTML” text box is where you put the HTML code for rendering your Amazon products.

Note

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.

Default CSS

ASA 2 template default css

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.

Note

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 logo

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”.

AMP contents

Note

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.

Surrounding container

ASA 2 template surrounding container

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.

Comment

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.

ASA 2 template comment

Tempalte comments will be shown when you hover over the template name in the list of templates.

ASA 2 template comment

Snippet

ASA 2 template snippet option

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:

ASA 2 template snippet option

Image layout

ASA 2 template image option

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:

ASA 2 template image icon

Save

After you filled the template form fields, click the “Save template” button to save the template.

ASA 2 template save button

It will now be listed in the templates list:

Template list

Learn how to Using a template to render a product.