Brightspot Content Types Guide

Product List module


You can create a module promoting a list of products.

For a wire frame example of what this content type can look like on your site, see Product List design.

To create a Product List module:

  1. In the header, click add.
  2. From the Create list, select Product List Module.
  3. Using the following tables as a reference, complete the fields as needed.
  4. Click Save.

Product List module fields

Click each tab below to see a description of the associated fields.

FieldDescription
Internal NameIn the Internal Name field, enter an internal name. Brightspot uses this name in selection fields.
TitleEnter a title. The title is visible to the visitors to your site.
DescriptionEnter a description. This description is visible to the visitors to your site.
Items

Select one of the following:

  • Basic—Adds products to the list. A rendered basic list includes promos of the underlying products, and you cannot override the promos' text or image.
  • Advanced—Adds products' promos to the list. You can customize the promos' text and image. Your customizations remain even if a product's promo changes. See Product Promo module for more details on these fields.
  • Dynamic—Adds products' promos to a list that dynamically updates according to the settings you select. See Understanding dynamic list settings for more information on these settings.
Call To ActionThe destination when a visitor clicks the call to action button. Select None, Internal or External.
  • None—No call to action button is displayed.
  • Internal—A call to action button is displayed that links to an internal asset.
  • External—A call to action button is displayed that links to an external URL.
Call To Action Button TextIn the Call To Action Button Text, enter text appearing on the call-to-action button. This text is visible to the visitors to your site.

FieldDescription
AnchorModify the anchor to something that would make sense when appearing in an Anchor field's drop-down menu on another asset. This allows you to directly link to this module in another asset. Being specific makes it easier to identify in a list of other anchors.

Advanced



FieldDescription
Hide DescriptionsToggle on to hide the descriptions of the assets contained in the list module. For example, toggling on this setting displays the Headline of an article, but hides the Description of an article contained in the list module.
Hide ImagesToggle on to hide the images included on the assets contained in the list module.
Hide PricesToggle on to suppress the display of product prices in this module.

Product List Styles


FieldDescription
TemplateSelect the template of this module from the list of options. Templates are visual presentation presets that differ depending on the type of module.
PresetSelect one of the following:
  • None—Applies styling from the site's theme.
  • Custom—Opens a form to customize the site's theme for this asset.
  • (Various)—Aside from None or Custom, there may be additional options in this list depending on the value selected in the Template field. If the selected template has presets, then those presets are able to be selected in this list and applied. For information about configuring template presets, see Creating a template preset.
List Title SizeOverrides the default text size of the list's Title as specified in your theme's CSS file.
List Description SizeOverrides the default text size of the list's Description as specified in your theme's CSS file.
Choose How Many Columns You Would LikeSelect the number of columns to use when laying out this list module.
Choose a Background ColorEnter the hexadecimal value of a background color for this module. For instance, entering #000888 provides a dark blue background.
Change Primary Text Color to Primary Inverse Text Color (Set in Theme Colors)Toggle on to convert the primary color of the text in the module to the inverse color of the text set in the theme.
Choose an Item Background ColorOpen the color picker to override the default background color for the items included on the asset.
Choose an Item Border ColorSelect the color for borders around a product's featured image.
Change the item Primary Text Color to Primary Inverse Text Color (Set in Theme Colors)Toggle on to apply use the theme's inverse text color (instead of the primary text color). For information about configuring a theme's colors, see Customizing a theme.
Item Display StyleOverrides the default display style of the items included in your list as specified in your theme's CSS file.
Item Background ImageOverrides the default background image for each item included on the asset. You can open the content selector to choose a background image or create a new one if needed.
Item Text ColorOpen the color picker to override the default text color for the items included on the asset.
Item Image Aspect RatioOverrides the default size and shape of the image next to the items in the asset as specified in your theme's CSS file.

FieldDescription
LocaleSets the content's locale. This setting can also be used to auto-localize content based on the users requested locale.

Previous Topic
Podcast Episode List module
Next Topic
Quote list module
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News