Product Detail Carousel - component detail

This page serves as a guide to understanding the Product Detail Carousel and the options you are given to modify the componet and how it functions.

BACK TO ALL COMPONENTS

This is the Product Detail Carousel component

Here is an example of the a subheadline being used within the component

This area can be used to describe the product with many options for different levels of text, bullet points and an optional CTA.

Bullet one
Bullet two
Bullet three: Bullets are best used when they are a brief, single line and contain facts, specs and features, but are able to go to multiple lines if there is a need

Specifications for the Product Detail Carousel

The Product Detail Carousel component will replace the standard Hero Component at the top of a Product Detail page (which uses the Product Detail Template). It features a carousel of product images, multiple levels of text, bullets, optional social share links and an optional CTA.

Specifications for the Product Detail Carousel: 1) H1 headline (50-80 characters 1/2 lines recommended) 2) Sub headline (optional: (50-80 characters 1/2 lines recommended) 3) Paragraph text (150 - 380 Characters - 1-4 Lines) 4) Optional bullets 5) Optional CTA 6) Social share links

Authoring Experience: Product Detail Carousel component

Below are screenshots and authoring notes regarding the authoring of The Hero Banner component. Authoring notes are found in red text on the screenshots and below images as captions.

This screen shows how and where you select Product images for the Product Detail Carousel and dragging the up/down icons to reorder images after they've been placed

Adding text to the Headline and description dialogue. Different levels of text can be modified within the description dialogue box. EX: "Heading 3" can be used in the RTE to include a sub headline.

Adding the CTA button label, destination for the CTA, and how the link will behave. CTA open options: open in same tab, new tab and in a modal.

Adding a title to the Social Share links and using the check marks to add Social Share links

Product Carousel: Paintbrush Styles Options

There are no Paintbrush Styles included in the Product Detail Carousel component. This component has deftault styles for every instance of it so that there is consistency on all Product pages.

Live component examples

This component can be found at the top of the page. For viewing only.

Looking for other components?

Follow the link below to return to all components.

< BACK TO ALL COMPONENTS