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.
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:
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”.
Select the
TEASER SIZE:
i. 1x1: 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
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
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
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
Select
TEXT COLOR SCHEME, which controls the font color of the text depending on the styling.
Enter the
HEADLINE text which will be the most prominent text element on the image teaser (depending on the styling).
Enter the
SUBHEADLINE text which will be the text element located underneath the headline on the image teaser (depending on the styling).
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
When the settings have been made click SAVE on this page. On the Categories configuration page also click SAVE.
Add Comment