Vertical_box
Table of Contents
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.
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" /]
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" /]
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 | |||
---|---|---|---|
Option | Type | Values | Description |
align | string |
|
Align |
Image | |||
Option | Type | Values | Description |
image_effect | string |
|
Image effect |
Title | |||
Option | Type | Values | Description |
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 | |||
Option | Type | Values | Description |
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 | |||
Option | Type | Values | Description |
button_target | string |
|
Button target. Decides whether the button should link to the product page or the buy page. |
Misc | |||
Option | Type | Values | Description |
disclaimer | string |
|
Disclaimer. Shows a disclaimer text. |
structured_data | string |
|
Structured Data. Include structured data at the end of the template |
custom_css | string |
|
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. |