Add content items to CMS pages

Last updated:
Edit on GitHub

This document describes how to add content items to Storefront pages using the Back Office.

Prerequisites

Add content items to a page

  1. Go to Content > Pages.
  2. On the Overview of CMS Pages page, next to the page you want to add a content item to, click Edit > Placeholders.
  3. On the Edit Placeholders: CMS Page [Name] page, click the tab of the placeholder you want to add the content item to.
  4. Click the locale you want to add the content item to.
  5. In the WYSIWYG editor, place your cursor where you want to insert the content item.
  6. In the editor toolbar, click Content Item and select the content item type you want to add.

Content item menu page

The Insert a Content Item pop-up window opens.

Insert content item window

  1. Select a content item and its template, and click Insert. This closes the pop-up window. The selected content item is displayed as a widget in the editor. Widget UI element

  2. Optional: Add the content item to other placeholders or locales.

  3. Optional: Add other content items to needed placeholders and locales.

  4. Click Save. The page refreshes with a success message displayed. If the page is published and active, the added content items are displayed on the Storefront.

Tips and tricks

To edit a content item widget, select the widget and click Edit Widget. To preview the changes on the Storefront, click Preview.

Reference information: Add content items to CMS pages

Content item widget template defines how a content item looks on the Storefront. The following templates are available by default. If you need a different template, a developer can create it by following HowTo: Create a content item widget template.

Displays a title and a subtitle of the banner at the bottom of the image. Clicking any element of the banner will redirect your shop visitors to the target page.

For B2B:

Displays a title and a subtitle of the banner, and the Shop Now button at the bottom of the image.

See how the Bottom title template looks like on Yves:

  • White Label Banner bottom title white label

  • B2B Shop Banner bottom title B2B

  • B2C Shop Banner bottom title B2C

Displays a title and a subtitle of the banner in the upper part of the image. Clicking any element of the banner will redirect your shop visitors to the target page.

For B2B:

Displays a title and a subtitle of the banner, and the Shop Now button in the upper part of the image.

See how the Top Title template looks like on Yves:

  • White Label

Banner top title white label

  • B2B Shop Banner top-title B2B

  • B2C Shop Banner top title B2C

Displays a title and a subtitle of the banner in the middle of the image. Clicking any element of the banner will redirect your shop visitors to the target page.

See how the Big Banner w/Middle Title and Subtitle template looks like on Yves:

  • B2C Shop Big banner w/middle title and subtitle

Displays a title and a subtitle of the banner in the middle of the image and makes it non-clickable.

See how the Big Banner w/Middle Title and Subtitle without link template looks like on Yves:

  • B2C Shop
    Banner without link

Displays a title, a subtitle, and a Shop Now button on the left of the banner. Clicking any element of the banner will redirect your shop visitors to the target page.

See how the Big Banner Left Title, Subtitle and Button template looks like on Yves:

  • B2B Shop Big banner left title, subtitle and button

Abstract product list content item widget template: Bottom title

Displays a product name under the product image. Each product contains an image, a Product Group (if it exists), a name, and a price. Clicking any of the product elements will redirect your shop visitors to the product detail page.

For White Label:

There is a clickable View button under the product price.

See how the Bottom title template looks like on Yves:

  • White Label APL bottom title

  • B2B Shop APL bottom title B2B

  • B2C Shop APL bottom title B2C

Abstract product list content item widget template: Top title

Displays a product name above the product image. Each product contains an image, a Product Group (if it exists), a name, and a price. Clicking any of the product elements will redirect your shop visitors to the product detail page.

For White Label:

There is a clickable View button under the product image.

See how the Top Title template looks like on Yves:

  • White Label APL top title white label

  • B2B Shop APL top title B2B

  • B2C Shop APL top title B2C

Abstract product list content item widget template: Product category info

Displays products where each of them contains an image, a product name, a Product Group (if it exists) and a price. Clicking any of the product elements will redirect your shop visitors to the product detail page.

See how the Product category info template looks like on Yves:

  • B2C Shop

Abstract product list content item widget template: Product category info and button

Displays products where each of them contains an image, a product name, a Product Group (if it exists), a price, and a clickable Add to Cart button at the bottom. Clicking this button will add a product to cart. Clicking any of the product elements will redirect your shop visitors to the product detail page.

See how the Product category info and button template looks like on Yves:

  • B2C Shop Product category info and button

Abstract product list content item widget template: Product category info no product groups

Displays abstract products without their Product Groups. Each product contains a product name, a price, and an image. Clicking any of the product elements will redirect your shop visitors to the product detail page.

See how the Product category info no Product Groups template looks like on Yves:

  • B2C Shop APL no product group

Abstract product list content item widget template: Product slider for store/landing pages

Displays products as a slider on a store or a landing page. Clicking any of the product elements will redirect your shop visitors to the product detail page.

See how the Product Slider for store/landing pages template looks like on Yves:

  • B2B Shop APL Product slider for store landing pages

Product set content item widget template: Add all to cart button top

Shows an Add all to Cart button in the top right corner of the widget. Clicking Add all to Cart will add all product set items to the cart and redirect your customers to the Cart page. The Product Set content item widget includes a product set name, a general description, a slider with Product Set images, and products. Each product contains an image, a Product Group (if it exists), a name, a price, and a clickable Add to Cart button that will add this specific product to the cart and redirect you to the Cart page.

See how the Add all to Cart Button Top template looks like on Yves:

  • White Label Product Set Add All to Cart Button Top

  • B2B Shop Product set Add all to cart button top B2B

  • B2C Shop Product Set Add all to cart button top B2C

Product set content item widget template: Add all to cart button bottom

Displays an Add all to Cart button at the bottom of the widget. Clicking Add all to Cart will add all product set items to the cart and redirect your customers to the Cart page. The Product Set content item widget includes a product set name, a general description, a slider with Product Set images, and products. Each product contains an image, a Product Group (if it exists), a name, a price, and a clickable Add to Cart button that will add this specific product to the cart and redirect you to the Cart page.

See how the Add all to Cart Button Bottom template looks like on Yves:

  • White Label Product Set add all to cart button bottom white label

  • B2B Shop Product set add all to cart button bottom B2B

  • B2C Shop Product set add all to cart button bottom B2C

Product set content item widget template: Images left side, products right side and only add all button

Displays products and a clickable Add all to Cart button to the right of the product set image. Clicking Add all to Cart will add all product set items to the cart and redirect your customers to the Cart page. The Product Set content item widget includes a product set name, a general description, a slider with Product Set images, and products. Each product contains an image, a Product Group (if it exists), a name, a price, and a clickable Add to Cart button that will add this specific product to the cart and redirect you to the Cart page.

See how the Images left side, products right side and only add all button template looks like on Yves:

  • B2C Shop Product set images left B2C

Product set content item widget template: Product set for landing pages

Displays a banner of a Product Set on the top, a clickable Add all to Cart button in the middle and a set of products. Clicking Add all to Cart will add all product set items to the cart and redirect your customers to the Cart page. Each product contains an image, a Product Group (if it exists), a name, a price, and a clickable Add to Cart button. Clicking Add to Cart will add this product to the cart. All product set elements are clickable and will redirect your shop visitors to a PDP page of that specific product.

See how the Product Set for landing pages template looks like on Yves:

  • B2B Shop Product set for landing pages B2B

File list content item widget template: Text link

Displays a file name as a link your shop visitors can click to download a file.

See how the Text link template looks like on Yves:

  • White Label File list text link

  • B2B Shop Text link B2B

  • B2C Shop Text link B2C

File list content item widget template: File with icon & size

Displays a file name, a file icon, and file size as a link your shop visitors can click to download a file.

See how the File with Icon & Size template looks like on Yves:

  • White Label File list file with icon and size

  • B2B Shop File and size B2B

  • B2C Shop File icon size B2C