2.1.16. Icon component

Owned by Karol Schönsee
Last updated: Mar 10, 2022
4 min read

With the Icon Component you can add e.g. your shop USPs on CMS pages, category pages or product detail pages.

 


When setting up the component you firstly have to select a TEASER WIDTH, DESKTOP, TABLET LAYOUT, MOBILE LAYOUT and the TEXT POSITIONING.

 

CONTENT WIDTH: The image teaser area is limited by the container width.

 

MOBILE LAYOUT: On mobile devices only two icons will be displayed. There is a slider functionality which allows rotation of further icon images.

 

The TEXT POSITIONING: BELOW IMAGE will display your text underneath icon images.

 

DESKTOP LAYOUT AND TABLET LAYOUT provides different number of images per row:

 

·       5 IN A ROW: Four image teaser per row will be displayed in the image teaser area. In case more image teasers are included in the component they can be accessed using the slider functionality.

·       6 IN A ROW: Six image teaser per row will be displayed in the image teaser area. In case more image teasers are included in the component they can be accessed using the slider functionality.

·       7 IN A ROW: Eight image teaser per row will be displayed in the image teaser area. In case more image teasers are included in the component they can be accessed using the slider functionality.

·       8 IN A ROW: Eight image teaser per row will be displayed in the image teaser area. In case more image teasers are included in the component they can be accessed using the slider functionality.

 

The MOBILE LAYOUT is fixed to “SLIDER” and TEXT POSITIONING is fixed to “TEXT BELOW IMAGE”.

 

In the next step you can add icons the same way as image teasers. By clicking the “+” icon new images will be added. You may configure your icon images in the CONTENT area. Here following settings can be made:

  1. In the image upload area on the left-hand side you can insert an image using the Magento 2 media explorer. [1] If you already have an image, you can remove it using the “bin” icon. If you have more than one image teaser (added using the the “+” icon) you can move the given image using the “arrow up” and “arrow down” icons. Also by clicking “change” you can change an existing image. Regardless whether you have chosen an image or not there always will be shown a live preview with your slogan and description.

  2. Enter the SLOGAN text which will be the most prominent text element on the image teaser (depending on the styling). Additionally it is possible to insert dynamic content in this text area and any other textfield component, e.g. HEADLINE and DESCRIPTION using Content Constructor Directives. By adding directives it will display your products’ price or a products’ discount percentage to your desired text field.

    1. Fetching a products’ price can be done with this directive:
      {{price sku=”your_product_sku” withCurrency=”true”}}
      When choosing “false” as your parameter there is no currency sign displayed.

    2. If you wish to display a discount percentage of a certain product use following directive:
      {{discountPercentage sku=”your_product_sku”}}

    3. However only an integer value will be shown.

  3. Enter the DESCRIPTION text which will be the text element located underneath the slogan on the image teaser (depending on the styling). Also Constructor Directives can be used here.

  4. Enter a CTA LABEL text in case you want to include a CTA button on the image teaser.

  5. Enter a URL in the CTA TARGET LINK input in case you want to add a link to the CTA button (also the Magento 2 widget types CMS Page Link, Catalog Category Link, Category Product Link, File URL are supported).

 

In the tab STYLE two additional customizations can be made.

 

  1. Choosing TEXT STYLE ‘light’ provides a black box with white font. If ‘dark’ is selected it is the other way around, providing a black text font on a white background. Both coloring changes are in each case applied to slogan and description.

  2. MIRROR IMAGE can be toggled on or off. This feature gives the possibility to flip your image horizontally.

 

 

 

When the changes are done click “SAVE” on the right-hand side in the top area.



[1] It is recommended to use JPG and PNG (RGB format) file types for images