Reference information - content Item widgets templates

Edit on GitHub

This topic contains the reference information you need to know when selecting a template for a content item widget in the Pages > Edit Placeholders and Blocks > Edit Placeholder sections.

When adding a content item widget to a page or block, you can select a template that will define how your content is displayed in your online store.

The following templates are used to set up a Banner content item widget:

Bottom title

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

Top title

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

Big banner w/middle title and subtitle

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

Big banner left title, subtitle and button

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 templates

The following templates are used to set up an Abstract Product List content item widget:

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

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

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 APL product category info

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

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

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 templates

The following templates are used to set up a Product Set content item widget:

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

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

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 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

The following templates are used to set up a File List content item widget:

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 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