Flat_box_horizontal

On this page, ASA’s managed template “Flat_box_horizontal” is used. It is designed to work with any kind of product. It comes with many options to customize its appearance without having to change the code.

Main features

  • General purpose template
  • Responsive design
  • Adjustable via options without programming skills
  • Flat design

Example

This first example is built with the following shortcode:

Customization

On ASA 2’s admin page “Templates” you can customize the general options of template “Flat_box_horizontal“. These settings will effect every usage of this template.

Shortcode options

Besides the general settings, it is possible to overwrite template options per shortcode.

Example “button_color”

For example, to use a custom button color, this shortcode would make the difference::

Example “savings_bg_color”

To set a custom background color to the savings ribbon, use option “savings_bg_color”::

All available options:

Following you find a list of all available shortcode options for template “Flat_box_horizontal”:

Option Type Values Description
width string custom text Width, like 50% or 200px (Default: 100%)
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)
img_link_to_shop_page bool "yes" / "no" Image links to shop page
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
title_font_css string custom text Title font style. Utilizes the CSS font property.
title_length int 0 between 999 Title max length. Limits the title to a maximum length of characters. 0 for unlimited
price_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Price color
price_font_css string custom text Price font style. Utilizes the CSS font property.
show_savings bool "yes" / "no" Show savings ribbon
savings_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Savings ribbon font color
savings_bg_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Savings ribbon background color
savings_font_css string custom text Savings ribbon font style. Utilizes the CSS font property.
savings_text_style string
  • "short" (Short version (percentage only))
  • "long" (Long version (percentage and text))
Savings text style
button_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Button color
button_color_hover string CSS compatible color value, like hex values (#ff0000) or color names (red) Button color hover
button_font_css string custom text Button font style. Utilizes the CSS font property.
button_target string
  • "shop" (Shop page)
  • "buy" (Buy page)
Button target
show_features bool "yes" / "no" Show product features (if available)
features_font_size int 1 between 100 Features font size (in percent)
features_length int 0 between 99 How many feature items to show before the "Show more" link (0 = no limit)
show_description bool "yes" / "no" Show product description (if available)
description_font_size int 1 between 100 Description font size (in percent)
description_length int 0 between 1000 Description length (in letters, 0 = no limit)
hide_price bool "yes" / "no" Hide price(s)
show_last_update bool "yes" / "no" Show date of last item update
last_update_format string custom text Last item update date format (supports format of PHP date function)
show_price_disclaimer bool "yes" / "no" Show price disclaimer ("Details" link next to date of last update)
box_hover_effect string
  • "none" (None)
  • "scale" (Scale)
Box hover effect
disclaimer string
  • "none" (None)
  • "asterisk_only" (Asterisk in title link and button. No disclaimer text.)
  • "asterisk_and_text" (Asterisk in title link and button. Disclaimer text in each template.)
Disclaimer

More examples

Show features and description:

  • A Lush Post-Apocalyptic World - How have machines dominated this world, and what is their purpose? What happened to the civilization here before? Scour every corner of a realm filled with ancient relics and mysterious buildings in order to uncover your past and unearth the many secrets of a forgotten land.
  • Nature and Machines Collide - Horizon Zero Dawn juxtaposes two contrasting elements, taking a vibrant world rich with beautiful nature and filling it with awe-inspiring highly advanced technology. This marriage creates a dynamic combination for both exploration and gameplay.
  • Defy Overwhelming Odds - The foundation of combat in Horizon Zero Dawn is built upon the speed and cunning of Aloy versus the raw strength and size of the machines. In order to overcome a much larger and technologically superior enemy, Aloy must use every ounce of her knowledge, intelligence, and agility to survive each encounter.
  • Cutting Edge Open World Tech - Stunningly detailed forests, imposing mountains, and atmospheric ruins of a bygone civilization meld together in a landscape that is alive with changing weather systems and a full day/night cycle.
Take on the role of skilled hunter Aloy as you explore a lush world inhabited by mysterious mechanized creatures in an exhilarating new Action/RPG exclusively for the PlayStation4 System.

Using a custom price font CSS and long style savings ribbon text:


Using “price_font_css” for a custom price font style and “savings_bg_color” for a custom savings ribbon background color.