Home / Product Templates / Image_Layout_1

Image_Layout_1

Welcome to the demo of Image_Layout_1, an elegant and visually appealing ASA2 template designed to showcase Amazon products in a clean, structured layout. This template focuses on high-quality product images, ensuring that your affiliate store captivates visitors and enhances conversions.

With Image_Layout_1, you can present your products in a modern and engaging way, emphasizing visuals while maintaining a sleek and user-friendly design. The template is fully responsive, making sure your listings look great on any device.

Explore the features and see how ASA2 helps you create a stunning Amazon affiliate store with ease!

Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence
View on Amazon * £1,049.00
As of: March 25, 2025 02:00 - Details
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence *
View on Amazon *
(* = affiliate link / image source: Amazon partner program)
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

Integration

There are several ways how an ASA2 product template can be integrated into a website.

This video shows how to use ASA2's Gutenberg Block to embed a products into your website using the "Image_Layout_1" template.

This video shows how to use ASA2's Classic Editor Button to embed products into your website using the "Image_Layout_1" template.

Wherever you can work with WordPress shortcodes, you can also embed products with ASA2 shortcodes. The template to be used can be defined with the tpl option. Otherwise, the template defined as the default is used.

Please note that the shortcode asa2_img should be used for the optimized display of individual images.

[asa2_img tpl="Image_Layout_1" id="123" /]

If you want to render this product template directly from PHP, e.g. in an individual page template, you can do this with the function asa2_render_product.

<?php
echo asa2_render_product(123, [
    'tpl' => 'Image_Layout_1'
]);

Customization

On ASA2’s admin page Templates you can customize the general options of template Image_Layout_1. These settings will effect the display of this template on a global scope.

 

Customization Examples

This example uses the options border_width, border_radius, border_color and background_color to customize the border and background.

[asa2_img tpl="Image_Layout_1" border_width="4" border_radius="10" border_color="#efa005" background_color="#fff7ea" id="123" /]
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence
View on Amazon * £1,049.00
As of: March 25, 2025 02:00 - Details
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence *
View on Amazon *
(* = affiliate link / image source: Amazon partner program)
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

This example uses the options image_size and image_max_width to customize the title text style.

[asa2_img tpl="Image_Layout_1" image_size="large" image_max_width="450" id="123" /]
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence
View on Amazon * £1,049.00
As of: March 25, 2025 02:00 - Details
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence *
View on Amazon *
(* = affiliate link / image source: Amazon partner program)
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

This example uses the option img to display an image other than the default image, provided that several images are supplied by the product API.

[asa2_img tpl="Image_Layout_1" img="4" id="123" /]
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence
View on Amazon * £1,049.00
As of: March 25, 2025 02:00 - Details
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence *
View on Amazon *
(* = affiliate link / image source: Amazon partner program)
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

Options

This list contains all the options that are available for ASA2's product template Image_Layout_1, including examples of how they can be used in conjunction with shortcode.

Layout
OptionTypeValuesDescription
is_image_hover bool "yes" / "no" Use image hover effect. Price and ratings are displayed over the image during mouse over, on AMP pages below the image.
min_width int 0 between 9999 Min width. Minimum width of the outer dimensions of the template in pixels.
background_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Background color
border_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Border color
border_width int 0 between 99 Border width. In pixels. 0 for no border.
border_radius int 0 between 99 Border radius. In pixels. > 0 for rounded corners.
padding int 0 between 999 Padding. Padding in pixels
Image
OptionTypeValuesDescription
image_size string
  • "small" (Small)
  • "medium" (Medium)
  • "large" (Large)
 Image size
image_max_width int 0 between 999 Image max width. In pixels. 0 - 999. 0 for none.
Title
OptionTypeValuesDescription
show_title bool "yes" / "no" Show title
title_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Title color. No default. The title will be displayed in the default text color of your page, if none is set here.
title_font_css string custom text Title font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
title_length int 0 between 999 Title max length. Limits the title to a maximum length of characters. 0 for unlimited.
title_auto_height bool "yes" / "no" Title auto height. Applies some CSS rules to achieve the same height for all titles.
max_title_lines int 1 between 10 Title max lines. Number of lines. Works only in conjunction with option "Title auto height".
Price
OptionTypeValuesDescription
price_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Price color. The color in which the price text is displayed.
price_font_css string custom text Price font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
hide_price bool "yes" / "no" Hide price(s)
show_price_disclaimer bool "yes" / "no" Show price disclaimer. "Details" link next to date of last update.
last_update_format string custom text Last item update date format. Used in price disclaimer. Supports PHP date function format. Example: d.m.Y H:i:s
show_merchant bool "yes" / "no" Show product merchant (if available)
Button
OptionTypeValuesDescription
show_button bool "yes" / "no" Show button
button_target string
  • "shop" (Shop page)
  • "buy" (Buy page)
 Button target. Decides whether the button should link to the product page or the buy page.
button_max_width string custom text Button max width. CSS value like "50%" or "250px".
Misc
OptionTypeValuesDescription
disclaimer string
  • "none" (None)
  • "asterisk_and_text" (Asterisk in title link and button. Disclaimer text in each template.)
  • "asterisk_only" (Asterisk in title link and button. No disclaimer text.)
 Disclaimer. Shows a disclaimer text.
structured_data string
  • "none" (None)
  • "json_ld" (JSON-LD format)
 Structured Data. Include structured data at the end of the template
custom_css string
  • "none" (None)
  • "json_ld" (JSON-LD format)
 Custom CSS. Custom CSS that is applied to all occurrences of this template on a page and is only included once in the source code.