Page History
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 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 that when not acceptable for various reasons appropriate for the target usage. All of our products displayed on a PDP page will load a unique name ( slug) representing the exact model. 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 used on url ( see example below for previous AEM instance and new one – ex:R1 slug is highlighted).
image 13