Home / Product Templates / Vertical_box

Vertical_box

The Vertical_Box template in ASA2 is designed for WordPress users who want a sleek and structured way to present Amazon products. Its vertical layout makes it ideal for showcasing individual products with essential details in a compact, visually appealing format.

With a clean design and customizable options, Vertical_Box seamlessly adapts to your website’s style. It provides an efficient way to display product images, descriptions, and pricing while maintaining a professional look.

Enhance your Amazon Affiliate store with this template and create an engaging shopping experience for your visitors.

Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence
Apple iPhone 16 Pro 256 GB: 5G... *
£1,049.00
As of: March 19, 2025 02:00 - Details
×
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.
View on Amazon *

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 "Vertical_box" template.

This video shows how to use ASA2's Classic Editor Button to embed products into your website using the "Vertical_box" 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.

[asa2 tpl="Vertical_box" 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' => 'Vertical_box'
]);

Customization

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

 

Customization Examples

This example uses the options title_color and title_font_css to customize the title text style.

[asa2 tpl="Vertical_box" id="123" title_color="#007808" title_font_css="italic bold 20px/30px Verdana, sans-serif" /]
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence
Apple iPhone 16 Pro 256 GB: 5G... *
£1,049.00
As of: March 19, 2025 02:00 - Details
×
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.
View on Amazon *

This example uses the options price_font_css and price_color to customize the price text style.

[asa2 tpl="Vertical_box" id="123" price_font_css="bold 24px/30px Verdana, sans-serif" price_color="red" /]
Apple iPhone 16 Pro 256 GB: 5G Mobile phone with Apple Intelligence
Apple iPhone 16 Pro 256 GB: 5G... *
£1,049.00
As of: March 19, 2025 02:00 - Details
×
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.
View on Amazon *

Options

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

Layout
OptionTypeValuesDescription
align string
  • "none" (None)
  • "left" (Left)
  • "center" (Center)
  • "right" (Right)
 Align
Image
OptionTypeValuesDescription
image_effect string
  • "0" (None, no linking at all)
  • "lightbox" (Add lightbox tag and link to large version)
  • "imgpreview" (Image preview to large version on mouse hover)
  • "link_to_shoppage" (Image links to shop page)
 Image effect
Title
OptionTypeValuesDescription
title_font_css string custom text Title font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
title_link_to_shop_page bool "yes" / "no" Title links to shop page
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_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;"
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
Button
OptionTypeValuesDescription
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.
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.