1

Adobe CQ5.6Promotion Page Creation

Seda Sahin, Savas Yakut, Nick Beljaars and Angela HeemskerkDigital Services

Last update: December, 2016

2

Promotion Home page

1. Filter menu2. Tags/filters3. Promotion detail page 4. Promotion Banners

1

2

3

3

3. Promotion detail page

1. Click Promotion Home Page in CQ author2. Click New and add Philips – Promotions Page3. Add Title and Name according to information shared in CQ fundamentals training4. Click ok and double click on the new created promotion

1

2

2

3

4

A. Custom creation

4

3. Promotion detail page

1. Choose one of the template which are created by Self Service team2. Copy the selected one and paste it to under promotion home page of requested

locale 3. Change Title and Name according to information shared in CQ fundamentals

training, 4. The banner templates also will be copied automatically.5. Finalize the page configuration: Page properties + Page content

Promotion page templates:

Four different templates are created to prevent any quality or technical issues on promotion pages. Please find their screenshots on next slides, we will be able to share with you the links once we get an approval from BCD.

B. Template usage

5

Template 1

• Masthead• GC15 Button component• Product cards (PC05)• GC11v3 + GC15

6

Template 2

• Masthead• GC08 component (including text + image)• Product cards (PC05)• GC11v3 Text component• GC15 button component

7

Template 3

• Masthead• GC08 component (including text + image)• Pex area

(1.R15 + GC11v3+ GC13v2+ 2.P01v2)• CO4 Product Comparison component• GC11v3 Text component• GC15 button component

12

8

Template 4

• Masthead• Pex area

(G11V2 + G15 + R15 + GC13v2 + P01v2)• Product cards (PC05)• GC11v3 Text component• GC15 Button component

9

Choose Regular type

1. Click Promotion settings tab2. Choose general option. 3. Select regular promotion type.

Add a ribbon text

10

Promotion dates

• Promotion dates should always be set in Page Properties – General and Start/End Date

• Page Properties – Basic - On/Off Time setttings should never be used for Promotion pages!

11

Add a filter

1. Click Promotion settings tab2. Choose promotion details option. For each option that is selected a multi-select field Appears in which 1 or more CTN’s, Subcategories or Category IDs can be added.3. Select event tag

1

2

3

12

Fill the basic tab

1. Click Promotion settings tab2. Choose Basic option. 3. Fill the page title, description and tag

13

If it is external promotion…

1. Click Banner Settings tab2. If this is an external promotion, then the box should be checked. Please type the URL of the external page.

A site website visitor who clicks on the promotion card will be directed to this page, instead of the normal promotional detail page.

3. Each promotion has a large and small banner that can be automatically placed on the Category or Decision page that has a promotion assigned. Please select whether the current promotion also needs to be located on category pages and decision pages. The PDP location is based on the business rule: highest ranked promotion of the product will deliver the promotional banner for the PDP.

2

3

14

Page content

• Masthead Image sizes:L=2000x410 M=960x410 S=700x300XS=450x300• Please add the images into the Promotion folder on DAM:

http://10.128.41.61/damadmin#/content/dam/b2c/promotion-pages

• Content text in GC11v3 component• Buttons into GC15 button component filling with analytic section

• Product section (CTNs)

• Contact us / Terms and conditions

15

4. Promotion Banners

These are cards that are displayed on the overview and expired promotions page and are representing a promotion. Each Promotion card links either to a promotion detail page within the promotion site or to an external promotion.

Promotion cards are visible on the promotions overview page and consist of three parts:• background image (for each breakpoint)• group/event label (top right)• promotional tagline with arrow behind it (call to action)

Promotion banners are used for different pages as below:• Large banner= CL Home page, PDP, Category pages• Small banner= Decision pages, Category pages• Overview banner= Promotion home page

16

Expired promotions

This is the 3rd of 3 landing pages of the promotions site. The page has the same functionality and is visually the same as the promotions overview page.

There are 2 differences:1. On this expired promotions page only the promotions that are already expired are visible.2. Promoted product cards are not displayed on this page

All expired promotions are visible via this link (change locale code in the link):../content/B2C/en_GB/promotions.expired.html

‘Expired’ Banner, title and filter menu are automatically generated.

All expired promotions should be deactivated first and should be moved to Archive folder!

http://10.128.41.61/siteadmin#/content/B2C/en_GB/promotions

17

Seamless User Journey

• Image guidelines for promotion pages

• Checklist

Digital ServicesDecember 2015

18

Promotions overview + small banner

Large/Medium :220px x 360px (<15 kb)

Small/Extra small: 155px x 155px (<10 kb)

Large banner

Large: 2000px x 316px (<75 kb)

Medium: 960px x 316px (<50 kb)

Small: 281px x 281px (<15 kb)

Extra small: 188px x 188px (<10 kb)

Masthead banner

Large: 2000px x 410px

Medium: 960px x 410px

Small: 700px x 300px

Extra small: 450px x 300px

PS: Width size of masthead image should

be stable as above therefore you may

change their height based on text length.

Image guidelines for promotion pages

19

Copy the related promotion template Open the page properties

add filter key regular type ribbon text start-end date fill basic tab (meta description, page title,tag)

Add content into the page Banners image creation + image upload to DAM + content implementationPromotions overview + small bannerL,M :220px x 360px (<15 kb)S,XS: 155px x 155px (<10 kb) Large bannerL:2000px x 316px (<75 kb)M: 960px x 316px (<50 kb)S: 281px x 281px (<15 kb)XS: 188px x 188px (<10 kb)

Spacing alignment SEO rules : page name + description + h1-h2 tags + image alt texts Mobile check Activation : images first + banner(s) + promotion detail page : using workflow

Checklist

20