Ribbons are colored horizontal product labels, and subtitles are short descriptions for products. Adding ribbons and subtitles to products in your Lightspeed eCom (E-Series) online store helps highlight important information and make items stand out.

Adding ribbons to products

After you add a ribbon to a product, it is displayed over the main product image in the product grid in your store and under the price field on the product details page.

Ribbons replace the “On sale” tags displayed for discounted products and the "Pre-order" tags displayed for products available for pre-ordering in your eCom catalog. If the product becomes out of stock, the "Sold Out" tag will appear on the product page instead of your ribbon.

To add a ribbon to a product:

1. Navigate to your eCom Admin Panel.
2. From the side menu, click Catalog > Products and select the product you want to edit.
3. Scroll down to the Add or edit ribbon field and click on it.
4. Fill out the Ribbon text field (up to 30 symbols).

5. Choose ribbon color from the list of predefined options or press the “#” button and click on the eyedropper to use the color chooser tool:

   

   You can enter an existing color code into the Custom Ribbon Color field. Move the color bar (the left one) and/or the opacity bar (the right one) to change ribbon color and opacity.

6. Click Save.

To add ribbons to several products in bulk:

1. Navigate to your eCom Admin Panel.
2. From the side menu, click Catalog > Products and tick the products you want to edit. You can use the Filter tool in the top right corner of the page to make the search faster.

3. Click Mass Update > Promote on Storefront > Manage Ribbons > Add Ribbons to Selected:

   

4. Set ribbon text and color.
5. Click Add.

To manage how ribbons look on product sections on your Instant Site, navigate to Website > Edit Site, click your section in the Homepage Sections list, then go to Design > Ribbon and set ribbon font, color, and visibility.

Adding subtitles to products

After you add a subtitle to a product, it is displayed in the product grid on your storefront, under the product name, and in the special section inside your product details page.

To add a subtitle to a product:

1. Navigate to your eCom Admin Panel.
2. From the side menu, click Catalog > Products and select the product you want to edit.
3. Scroll down to the Add product subtitle field and click on it.

4. Enter the subtitle for your product:

   

5. Click Save. 

To add subtitles to several products in bulk:

1. Navigate to your eCom Admin Panel.
2. From the side menu, click Catalog > Products and tick the products you want to edit. You can use the Filter tool in the top right corner of the page to make the search faster.

3. Click Bulk Edit Selected:

   

4. Add or update your text in the Product subtitle column in the Bulk Product Editor. 

Choosing how to display subtitles on the product list

By default, subtitles are displayed on your product list as fixed, always visible text below product thumbnails. You can choose to display short descriptions only if your customer hovers a mouse over the product picture in the grid. The rest of the time, subtitles will be invisible on your storefront:

To set up how subtitles display on your product list:

1. In Retail POS, navigate to Online > Webstore (or Website) and click Edit Site.
2. In the Page dropdown at the top, select Catalog > Categories & Product Grid > Product card settings.
3. From the Product subtitle dropdown, select Show or Show on mouse hover.
4. Publish the changes.

If you're not using the Lightspeed eCom sitebuilder (Instant Site), go to Online > Webstore (or Website) > Design > Product Card details and layout > Product subtitle drop-down menu to update subtitles display on your product list in eCom.

Choosing where to display subtitles in your store

By default, subtitles are displayed on your product list. Another place where customers see them is your product details page:

You can display subtitles only on the storefront or only on the product details page, if you want to show them only in one place.

To hide subtitles from the product details page:

1. In Retail POS, navigate to Online > Webstore (or Website) and click Edit Site.
2. In the Page dropdown at the top, select Product > Product Details > Sidebar settings.
3. Click Product Subtitle and switch the toggle.
4. Publish the changes.

To hide subtitles from your storefront:

1. In Retail POS, navigate to Online > Webstore (or Website) and click Edit Site.
2. In the Page dropdown at the top, select Catalog > Categories & Product Grid > Product card settings.
3. From the Product subtitle dropdown, select Do not show.
4. Publish the changes.

If you're not using the Lightspeed eCom sitebuilder (Instant Site), go to Online > Webstore (or Website) > Design > Product Page layout > Sidebar and Online > Webstore (or Website) > Design > Product Page layout  > Product Card details and layout  > Product subtitle to update subtitles display on product pages in eCom.

To manage subtitle visibility on product collection sections on your Instant Site, navigate to the site editor, click your section from the Homepage Sections list, then go to Design > Product card settings and switch the Show product subtitle toggle.