Creating and managing banners on product pages

On the new version of the website, promotional banners can be added to product pages by using the Experience Fragments components. See on image below how those banners will be displayed ( max of 3).

image 1

PDP banners created as Experience Fragments

Experience Fragments are a grouped set of components that when combined, creates an experience that can be re-used throughout the website. Our product pages (PDP1) can use a pre-defined template of an Experience Fragment to easily create the banners showed on image 1.

A banner created with this template (For Owners PDP Card XF Template) can be configured to appear on any of our units on the properties of the Experience Fragment. This section let you configure a Slug2 identifying the exact Model & Year where this banner will be showed.

YME rolled-out some banners that can be use on your website. This Experience Fragments are already configured to be displayed on several unit pages and can be found on location below: https://author-p56507-e508685.adobeaemcloud.com/aem/experience-fragments.html/content/experience-fragments/yme/eu/en/promotions/unit_banners

Orange text should be changed to your own country and language code

Creating banner using Experience Fragment

Create the experience fragment

On AEM start page, click Experience fragments


image 2

Browse to the location below on your own language folder
https://author-p56507-e508685.adobeaemcloud.com/aem/experience-fragments.html/content/experience-fragments/yme/eu/en/promotions/unit_banners

On the Unit banner page, click the create button on top right and click again the Experience fragment


image 3

Select For Owners PDP Card XF Template

image 4

Click Next to continue and load the properties section to add a title to your experience fragment.

image 5

Add title click Create and a message will appear to confirm that Experience fragment was created and. See image below showing that so you can now click done to go back to Experiences fragments chosen location or click Open to configure your banner (For Owners PDP Card).


image 6

Now that banner is created, you will need to add content to banner and configured where it will be displayed!

Adding content to banner

Open the variation of banner directly by clicking Open on message show on image 7 or go back to the location where you created your experience fragment and open the variation of this banner:

image 7

Make sure you are on edit mode, click the "For owner PDP card" and click the wrench icon to start adding content


image 8

Add image, title, description and link as showed on image below and click done when ready.


image 9

Your banner is now ready with content and needs to be configured on the properties of this page.

Configuring Slug to make banner displayed on units pages

Now that content of banner is completed, you can access the properties of this page and configure the location where to you need banner to appear on the YME properties tab.

image 10

Under Product settings, The Slug2  can be added as showed on the image below. 

image 11

 Click Add button to enter the slug of your product and use the card priority field to manage the order of display of the banner. You can add as many units (Slugs) as you want. Click Save & Close.

Using a banner(Experience Fragment) created by YME


Like any other pages on AEM, Experience Fragments must have the inheritance canceled in order to apply modifications (translations, url etc..).


To cancel the inheritance, edit the variations of the banner you which to use, make sure you are in edit mode, click the For Owner PDP card and click and click the cancel inheritance icon (linkage  icon) to get access to the content setting ( wrench icon) as showed on image 12


image 12

Publishing banner(Experience Fragment)


Like any other pages on AEM, Experience Fragments need to be published in order to be visible on website. Until a page is not published, it is only visible on the preview mode ( view as published).


If you have any questions regarding this, please reach to digital.marketing@yamaha-motor.eu



1: PDP = Product Display Page

2: Slug is used as an alternative name appropriate for the target usage. All of our products displayed on a PDP page will load a unique name ( slug) representing the exact model (and/or year). Slugs used for our units can be found in different ways ( CT, website url etc..).
When visiting any of our units on the website, you can see the slug written on the product page url ( see example below for previous AEM instance and new one – example below show the slug used for the 2022 R1 slug highlighted in yellow).


image 13


  • No labels