1

Adobe CQ5.6Promotions & Merchandizing

Nick BeljaarsSeamless User Journey – Digital ServicesFebruary, 2015

2

Large

Site text (CQ) already translated for all countries

3

Medium Small Extra Small

4

Promotions & Merchandizing

Promotions homepage template

Promotions overview

Page masthead Filter menu Promoted product cards Promotion cards

Promotions detail page

Promoted products page

Expired promotions page

5

Table of contents

1. Tagging configurations to organize promotions 6 Groups and translations 7 Events 8 Group color configuration 10 Event color configuration 11

2. Start - adding all necessary promotion templates 12

3. Promoted products (PC_05) 22

4. Expired promotions 26

5. Promotions detail page 286. Promotion card (PR_01) 35

7. Additional banner locations for merchandizing 398. Site Admin level configurations (go live preparations) 48

9. Image guidelines 50

6

1. Tagging

• Each promotion can be assigned to one or more groups and/or events. • A promotion can be assigned to e.g. the groups Household and Personal Care and

also to the events Christmas or Valentine’s Day. • Assigning promotions to these groups and events results in the population of the

filter menu on the overview and expired promotions page.• The first visible Group tag is shown as label on the Promotion card.• When only event tags are assigned, then the first event tag will be used as a label.

7

Groups and translations

1. Go to Tagging from welcome screen2. Select ‘global’ underneath – filter – Promotions3. Double click on the groups and add the correct translation for your country in the

localization section4. Click ok and repeat for all groupings

1

2 3

8

Events (skip if you locale is already available)

1. Go to Tagging from welcome screen2. Select ‘locale’ underneath – filter – Promotions3. Create a new locale if not available yet by clicking new4. Add locale code title and name and click ok

1

2 3

9

Create events

1. Select locale in tree navigation2. Click new3. Add event title and name4. Click ok and repeat for other events

10

• Each Promotion card group label can have its own color. The group color is configured on a global level and therefore always the same for all locales.

• A template is available, where the color of the groups can be configured. The template is available at this location: /etc/philips/promotionconfig/promocolor-configpage.html

• Below is a visual of that page. Only a lead author can configure this page on global level.

Group color configurations (do not change!!)

11

• As every country or locale can have its own events, the color configuration for events is on locale level.

• Each locale can decide for itself which color to use for which event label.• Configuration is done in the page properties of the promotion homepage, to be

found in this location:../content/B2C/en_GB/promotions.html

Event color configuration

1. Click page properties2. Click Events color configuration3. Click + to start4. Select CQ path created in tagging5. Select color for your event6. Click ok and repeat for other events

12

3

45

12

2. Start - adding all necessary promotion templates

Promotions homepage template

Promotions overview

Page masthead Filter menu Promoted product cards Promotion cards

Promotions detail page

Promoted products page

Expired promotions page

13

Promotions overview (already created for all SUJ locales!!!)1. Select locale in tree navigation2. Click New3. Select Philips – Promotions HomePage template4. Add Title and Name according to information shared in CQ fundamentals training5. Click ok

1

2

3

14

Promotions homepage template

Promotions overview

Page masthead Filter menu Promoted product cards Promotion cards

Promotions detail page

Promoted products page

Expired promotions page

15

Configure masthead image/title promotions overview1. Open the properties of the GC30 Rendition Container and select general2. Add three Items: overview – products – expired (implement like this, no

translation!!)3. Make top rendition (overview in this example) default. This means 2 things:

a) the masthead you will maintain for the top rendition will be used for the page promotions.html.

b) When products or expired are not mentioned here as renditions, they will be using the same masthead as the top rendition by default.

4. Click ok

2

3

1

4

16

Configure masthead image/title promotions overview1. Add MH01 Sector Masthead to overview, products and expired parsys2. Right click and click Edit3. Click the general tab 3

2

17

Configure masthead image/title promotions overview1. Change the title with the desired title2. Add a tagline in the body text

1

2

1

18

Configure masthead image/title promotions overview3. Click on the background tab4. Click full bleed ‘yes’ – click background ‘style image’ - locate the four images from the DAM. Large breakpoint image: 2000px x 380px

5. Scale image if dimensions of the image are not correct. Default is ‘no’.6. Repeat step 1 -5 for products and expired if ‘no’ is selected in slide #15.

34

4

4

5

19

Promotions homepage template

Promotions overview

Page masthead Filter menu Promoted product cards Promotion cards

Promotions detail page

Promoted products page

Expired promotions page

20

Filter menu

1. The filter menu appears automatically when four or more promotions are created2. Translations will be loaded automaticallyif configurations on slide #7 are finished3. No pagination will appear, but allpromotions will be visible by scrolling thepage.

The filter menu items are displayed in alphabetical order.The custom tags (Father’s day, Christmas, etc.) will be mixed (and alphabetically ordered) with the normal product groups in the menu.

In S/XS viewpoint the filter menu collapses (same behavior as on decision pages).

12

21

Promotions homepage template

Promotions overview

Page masthead Filter menu Promoted product cards Promotion cards

Promotions detail page

Promoted products page

Expired promotions page

22

3. Promoted products

These are simple product cards of a promoted product that belongs to the CL Product group of the promotion card that is shown just before this promoted product card. In below example a promoted product card is displayed on the right.All promoted products are visible via this link (change locale code in the link): ../content/B2C/en_GB/promotions.products.html

Banner, title and filter menu are automatically generated.

23

Promoted products on promotion detail page

If you click ok in the dialog after configuring CTN’s, categories or subcategories product cards will appear on the promotion detail page.

24

Promoted products

• The promoted product cards are shown between the promotion cards (to enable a Pinterest-look grid). The rhythm is two promotions and then one product card (2-1-2-1 etc.).

• L viewpoint: Each third card is a promoted product card. The product that is promoted is the hero product of the group displayed in the previous promotion card

• M viewpoint: The third card is a promoted product card. The product that is promoted is the hero product of the group displayed in the previous promotion cardAfter that each fifth card is a promoted product card. This is to ensure that in Medium not all promoted product cards are clustered together.

• S/XS viewpoint: all cards are displayed in a list view, where each 3rd card is a promoted product card.

• Promoted product cards are not displayed on the expired promotions page.

25

Promotions homepage template

Promotions overview

Page masthead Filter menu Promoted product cards Promotion cards

Promotions detail page

Promoted products page

Expired promotions page

26

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

27

Promotions homepage template

Promotions overview

Page masthead Filter menu Promoted product cards Promotion cards

Promotions detail page

Promoted products page

Expired promotions page

28

5. Creating promotion

1. Click Promotion Home Page (see slide #13) 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

29

Configure promotions detail page

1. Click page properties in the sidekick2. Click General tab and select promotion typeThis will be used to display the appropriate promotion lens on the product cards and banners.3. Add start date and end date of the promotion

A red text (already translated for you) will appear automatically on the masthead title if a Promotion is expired.

2

3

30

Configure 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

31

Configure promotion

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

32

4. Locate Promotions tab by clicking on the arrow5. Select one or more tags by clicking on the grouping or created event underneath locale

Assign the group or event to the promotion. This will be used to populate the filter menu and to display as label on the promotion card.The first grouping label overrules the local event name. Personal care in the example underneath.

Translations will be loaded automatically if configured according to slide #7.

44

5

33

Configure masthead image/title promotions detail page1. Open the properties of the MH01 Sector Masthead and select general2. Change the title with the desired title3. Add a tagline in the body text

1

1

2

3

34

Configure masthead image/title promotions detail page3. Click on the background tab4. Click full bleed ‘yes’ – click background ‘style image’ - locate the four images from the DAM. Large breakpoint image: 2000px x 380px

5. Scale image if dimensions of the image are not correct. Default is ‘no’. 3

4

4

4

5

35

6. Promotion cards

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)

36

Promotion card configuration

1. In CQ author open the banner-overview page of the promotion (these three banner options are automatically generated)

1

37

Promotion card configuration

2. Open the page properties of the PR01 component3. Add a tagline (mandatory)4. Select inverted yes to have white text if you have a dark background.

3

4

2

38

Promotion card configuration

5. Select the background Image tab and drag and drop the images from the DAM– These images will be displayed on the promotions overview page and expired

page as a promotion card– Image

L & M 220px x 360px S & XS 155px x 155px (banner displayed as full gradient + left-

aligned image)5

39

7. Promotional banners for merchandizing

CL Home Product Detail Page

40

Category & Decision Page

Position of the banner on DEC:- Below the filter panel- Underneath the pagination Position of the banner on CAT page:- Above the footer

S/XS L/M

41

Large bannerLarge bannerWill be displayed on CAT, CAT-DEC, DEC and PDP pages– Image

L & M approx. 2000px x 316px S 281px x 281px (banner displayed as full gradient + left-aligned

image) XS 188px x 188px (banner displayed as full gradient + left-aligned

image)– Short text for the Promotion title– Very short text for the tagline

1. Open page2. Configure general tab

1

1 1

22

2

22

2

42

Large banner images

3. Click on the background tab4. Click full bleed ‘yes’ – click background style ‘image’ - locate the four images from the DAM. Image dimensions are provided in slide #415. Click ok 3

4

4

5

43

Small banner

Small bannerWill be displayed on CAT-DEC and DEC below the filter menu– Image

L & M 220px x 360px S & XS 155px x 155px (banner displayed as full gradient + left-

aligned image)– Short text for the Promotion title1. Open page2. Configure general tab

1

1 1

22

2

22

2

44

Small banner images

3. Click on the background tab4. Click full bleed ‘yes’ – click background style ‘image’ - locate the four images from the DAM. Image dimensions are provided in slide #435. Click ok 3

4

4

5

45

CL Homepage

On several pages a banner will be placed to promote a promotion. Placement of the banners will be done partly manual and partly automatic. CL Homepage is manual.

Author adds 1 or more large promotional banners via the page properties dialog of CL Homepage. One random banner is visible each time you visit or refresh the CL homepage.

1. Open properties cl-home2. Locate promotions tab and select banner-large from the desired promotion

1

1

1

2

46

Product detail page

1. Please read slide #30 point 3. Large banner will load always automatically on the related product detail pages underneath the highlight section.

47

Category & Decision Page

1. Please read slide #30 point 3. If selected in the properties. Large and small banner will be used automatically.

48

49

Seamless User JourneyImage guidelines for promotion pages

Digital ServicesDecember 2015

50

Banners promotions overview

Promotions overview bannerLarge: 2000px x 380px (<75 kb)Medium: 960px x 380px (<50 kb)Small: “ ”Extra small: “ ”

Banner promotion cardLarge/medium :220px x 360px (<15 kb)Small/extra small: 155px x 155px (<10 kb)

51

Banners expired overview

Expired overview bannerLarge: 2000px x 380px (<75 kb)Medium: 960px x 380px (<50 kb) Small: “ ”Extra small: “ ”

52

Banners promoted products

Promoted productsLarge: 2000px x 380px (<75 kb)Medium: 960px x 380px (<50 kb)Small: “ ”Extra small: “ ”

53

Medium Small Extra Small

54

Promotional banners for merchandizing

CL Home Product Detail PageLarge: 2000px x 316px Large: 2000px x 316px (<75 kb) (<75 kb)Medium: 960px x 316px Medium: 960px x 316px(<50 kb) (<50 kb)Small: 281px x 281px Small: 281px x 281px(<15 kb) (<15 kb)Extra small: 188px x 188px Extra small: 188px x 188px (<10 kb) (<10 kb)

55

Promotional banners for merchandizing

Decision page banner large 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)

Decision page banner small (filter) Large: 220px x 360px (15 kb)Medium: 220px x 360px (15 kb)Small: 155px x 155px (10 kb)Extra small: 155px x 155px (10 kb)