2.10. CC Components on product overview pages & Image Teaser in Product grid

Owned by Adnan Krzavic
Last updated: Apr 14, 2022 by Duy Pham
2 min read

 

MageSuite does allow adding CC components on Magento product overview pages. All CC components from section 2.1 can be used here. Additionally you can add Image Teasers into the Product Grid. Including CMS content to product overview pages is a great way to boost SEO performance on one side. On the other side you can provide the customer with further information and references using e.g. Text Paragraphs. Furthermore Image Teasers in the Product grid might be used to inform the customer about cross-selling products as well as marketing campaigns.

 

In order to access the Content Constructor section for categories navigate to CATALOG / INVENTORY / CATEGORIES. Now scroll down and expand the CONTENT CONSTRUCTOR section. Here you can choose the visibility of CC components for MOBILE, DESKTOP or make it NOT VISIBLE. You can add all CC components from section 2.1.

 

Figure 79 Content Constructor on Categories configuration (admin panel)

 

 

 

Also there is an CC component called MAGENTO PRODUCT-GRID-TEASERS which cannot be removed. This component is actually the Magento Product grid on product overview pages.

You can move this component up by clicking the “ARROW UP” button and move it down by clicking the “ARROW DOWN” button. Using this component you can add Image Teasers to the product grid. In order to do so click the “EDIT” button.

 

On the next page you are able to add Image Teasers by clicking the “+” button. Here the 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.

29 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 you can change the existing image by clicking “CHANGE”.

  1. Select the 

TEASER SIZE:

i. x1: The Image Teaser will fit into one row and one column entry (it has the same dimensions as a product tile)

ii. 1x2: The Image Teaser will fit into one row and two column entries

iii. 2x1: The Image Teaser will fit into two rows and one column entry

iv. 2x2: The Image Teaser will fit into two rows and two column entries

  1. Select the 

POSITION:

i. Left: The Image Teaser will be located on the very left column of the Product Grid

ii. Center: The Image Teaser will be located in the middle column of the Product Grid

iii. Right: The Image Teaser will be located on the very right column of the Product Grid

  1. Select the 

ROW:

i. 1: The Image Teaser will be located in the first row in the Product Grid

ii. 2: The Image Teaser will be located in the second row in the Product Grid

iii. 3: The Image Teaser will be located in the third row in the Product Grid

iv. As last: The Image Teaser will be located in the last row in the Product Grid

  1. Select the 

DISPLAY VARIANT, which controls the text location on the image teaser. Depending on the styling of the Magento 2 instance, the options are

i. Text vertically centered on the left

ii. Text on the bottom, left corner

iii. Text vertically centered in the middle

iv. Text on the bottom – centered

  1. Select 

TEXT COLOR SCHEME, which controls the font color of the text depending on the styling.

  1. Enter the 

HEADLINE text which will be the most prominent text element on the image teaser (depending on the styling).

  1. Enter the 

SUBHEADLINE text which will be the text element located underneath the headline on the image teaser (depending on the styling).

  1. Enter the 

PARAGRAPH text which will be the text element located underneath the subheadline on the image teaser (depending on the styling).

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

11. 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).

 

 

_________________________________________  

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

 

 

Figure 80 Image Teaser in Product grid configuration on Categories (admin panel)

 

 

 

When the settings have been made click SAVE on this page. On the Categories configuration page also click SAVE.