Related Products Component

Introduction

The Related Products component showcases product cards in a carousel that loops around, offering a brief description and links to the product detail pages. 


Specifications

 

Character Limit/Usage

No set character limits on the title, but discretion should be used so as not to have a title that spans over 3 product cards. This component can be used with or without a title. The title is set to an H2 and cannot be changed. 

This component works by pulling in data from the product content fragments set at the page properties level and based on the page tag(s). 

The carousel can be authored 3 different ways under the product settings tabs:

  • Child Pages: A subcategory branch is set in the Parent Page field and the component pulls in all product series based on pages in that branch that have a product content fragment set in the page properites. The author can select how many levels of children should be pulled in. 
  • Fixed List: This allows you to enter specific page paths that you want to show in the component. 
  • Tags: A subcategory branch is set in the Parent Page field and the component pulls in all product series in that branch that have a product content fragment set in the page properite and based on what tags are chosen. The author sets which tags should be matched, then the author can select if any tags can be matched or all tags should be matched to generat the list.  

Component Tabs:

  • Styles - Allows you to change the background and padding of the container the carousel is in.
  • Product Settings - Author the product list here. 

Image Requirements

This component does not have any image requirements as the images are pulled dynamically.

Video Requirements

This component does not have any video requirements.

Styling

Standard padding for should be set to none by default as this component is best used in a background container. 

You can use the Theme/Color setting to update the background color of the component. Keep in mind the product card will always have a white background regardless of the backgrond selected. 

 


SEO Guidance

Please ensure that if you are using multiple components with text and/or titles on a page, only one of them contains an H1 title. According to SEO best practices, each page should have only one H1 tag. 

The related products component title is set to an H2 and is unable to be changed to any other heading tag. 

The product/series name in this component is a hyperlink. To optimize the link text for SEO, use descriptive and keyword-specific text that clearly indicate the content of the destination page.


Use Cases and Style Variations

Related Products - With Title

Products Set with a Fixed Page List.

Related Products - Without Title

Products Set Using Tags.

Related Products - Without Title

Products Set Using Child Pages


Need Help?

If you need help with a specific use case for the text jumbo component or need guidance with appropriate configuration, please contact the web team.