0% found this document useful (0 votes)
26 views79 pages

Getting Started - Page Designer GA 081319

Page Designer in sfcc

Uploaded by

rahulastra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
26 views79 pages

Getting Started - Page Designer GA 081319

Page Designer in sfcc

Uploaded by

rahulastra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 79

Getting Started with Page Designer for B2C Commerce

Revised 8/13/19
Page Designer For B2C Commerce
Build commerce experiences faster

Create and manage pages


Business Users can design, schedule and publish
pages quickly
Drag and drop content
A powerful visual editor makes content and layout
changes easy
Preview across all touchpoints
Ensure beautiful experiences with preview by device
type, customer group, schedule and locale
Build with reusable components
Developers leverage open web standards and
provided solution kit to easily create reusable
components
Why did we create Page Designer?

After initial site set up, merchants did not have the ability to easily create and manage
content driven merchandising. Merchants made requests for a tool that would provide the
following:
● Easy visual & responsive design without developer involvement
● Easy integration of commerce features into content
● Simple image & media handling
How does Page Designer address these problems?

Based on merchant feedback, we identified key issues to immediately address. The initial
scope focuses on enabling our clients to quickly create and deliver new pages and
commerce experiences to their customers:
● Inline editing, WYSIWYG and preview
● Batch upload and easy media management
● Personalization with targeting/segmentation and scheduling
Page Designer allows Merchandising and Marketing teams to oversee and implement
updates without ongoing developer involvement, allowing you minimize overhead and save
significant time to market with new online experiences for customers with a high degree of
quality.
Welcome to to Site Genesis B2C
Commerce Page Designer!

With Page Designer, day to day business users can design, schedule, and publish pages in
an easy drag and drop interface, with reusable components built by Developers using open
web standards and a provided reference library for either SFRA or Site Genesis.

As a ecommerce marketing director or merchant, you have started on an exciting journey


to create and define page templates to improve your speed to market with less dependency
on development.

As a developer, you have started on a journey that will enable significant reduction in having
a development dependency for content pages.

The following materials is intended to complement the Page Designer Implementation Guide
as well as the InfoCenter: Page Designer for Developers and Visual Editor Doc.
Getting Started for Developers and Business Users
Let’s get Started!

Developers Ecommerce Marketing Director and


Merchants
See instructions on the following pages to
correctly access GitHub and cartridges, and After your Developer has completed set up,
get them deployed to your site. we’ve provided documentation on what’s
included in the starter repository including
ideas and inspiration as you go through
requirements and definition to build out
your own page layouts and components.
Developers: Getting Set Up
Developer Set Up
Access GitHub and install cartridges

Go to the page-designer reference


GitHub repository and start by
reading the ReadMe file there.
You must be a member of the
Commerce Cloud org to access the
GitHub repository.
If you are not, see these instructions
to join.
What’s in the “Starter Repo”?
Page Designer General Terms
Pages, regions and components

Pages are set up in a hierarchical structure:


● Page
○ The outermost container of the structured
content.
○ Contain regions.
● Region
○ Allow for a hierarchical structuring of
components.
○ Contain components.
● Component
○ Have attributes defining the content asset.
○ Components can also be layouts, which can
contain multiple regions to which merchants can
add more components.
Page Designer Developer Terms
Page types and component types
Banner

At development time, developers create page types


and component types based on project Banner

requirements:
● Page Types Product Banner
○ Can also be considered “templates” (promo
page, landing page, content page). Product

○ Contains set regions with specified components Category


available for use in that region.
● Component Types
Product

○ The type of content available for use in a specific


region (banners, products, categories, layout,
etc).
Banner

Pages and components are instances of


page types and component types.
Pages and Components Promo Page Type

Web Content Manager Banner

Content managers create the page in Business Manager Prod


Tile

and place components in regions based on the page Prod Category


Tile
Tile

type and component types the developer has made Prod


Tile

available: Banner

● They also configure a set of attributes required to render


the component, for example, entering text and selecting
an image to be displayed on a banner component.
● They can use the same page types and component types
to create multiple new pages and won't have to go back to
development until they need changes or new page types
and component types.
TENTS

Helpful Hint: Pages and components are instances


of page types and component types.
Camping Promo Page Hiking Promo Page
Starter Repo
What’s in the Starter Repo?
Before we get started...

The following slides break out the page types,


components and layouts that are a part of the
Starter Repo. They are working examples to get you
started understanding the tool.
The goal is to provide you baseline examples on
how you can extend and customize Page
Designer based on your specific business,
branding and functional requirements.
What’s included in the Starter Repo?
Page Layouts Asset Components Component Layouts
2 Page Layouts
What’s included in the Repository “Starter Repo”
2 Page Layouts
Fixed: specify the entire layout and structure Dynamic: this layout is intended to give
of the page. The only elements that can be merchants the most flexibility in defining
changed are components. their own layout based on need.
5 Components
Components Now is the time to review your brand
guidelines and priorities to write
requirements to decide:
Category Tile ● do you want a component like
this?
● if so, what do you keep?
● What would you change?
● How much flexibility should it
1. Assign a category have? (which fields are required?”

2. Assign an image 1
3. Create Heading & 2
2
Subheading
4. Align text either left or
center

Remember, these are just a


starting point.
Do you want to add a “right” text
alignment?
Remove the subheading? 2
Create your own styling instead of 3
the blue box and font kind?
You control it ALL! 2
4
2
5
Components Notice the different looks. The first two
examples are the same component but
the layout defined for the top is “Portrait”
Product Tile and the 2nd row is “Landscape” - and
notice how it resizes the space?

1. Assign a Product
2. Provide a Product Name
3. Provide Alternative Link
1

2
2
Remember, these are just a starting
point.
● Maybe you want to display price 2
on the tile? Or Product review 3
stars?
● Does the merchandiser want to
be able to write their own call to
action instead of “Shop now”? Or
do you want to hard code in a
different CTA?
● Should it launch a Quick View or
go to PDP?
Components This quick example highlights a one
column vs. a 2 column content page.

Rich Text Component Privacy Policy, About Us, Terms of


Service, FAQ’s - Text heavy pages. And
the open layout allows your
1. Rich Text Component merchandisers to make it scannable and
readable with different layouts
For attributes that you specify using
the rich text editor, you can format 1
text using Heading1, Heading2,
Heading3, Heading4, and Paragraph
tags. When the page is displayed in
the storefront, the text is formatted
as specified by your corresponding
CSS styles.

Remember, these are just a starting


point.
● This is a great starting point to
allow merchants to create 1,
2, 3, 4 column layouts!
● The component can be
dropped into any region and
will adapt to its size.
Building a Content Page
Drag and Drop Flexibility - Preview Mode

Below, are four 1 column layouts Here I took the same page,
I pulled in a 1x2 layout and
- each with their own Rich Text added in a 1x3 column on the
removed the 1 column layout
component. bottom and dragged 3 Rich Text
and then placed one rich text
Breaking it into bite sections Components to change the
component in each.
makes it easy to drag and drop layout of the page.
components on the page.
One Component built correctly can be
leveraged for many different use cases -

Components home page banners, carousels, category


landing pages.
You can also drop this into a 2 or 3

Headline Banner column layout as well.


Key is to gather the use cases and define
the requirements!!!

1. Image 1
2. Heading
3. Subheading

Remember, these are just a starting


point.
● Do you want Image and Heading
as “Required” fields? 2
● Maybe in add in functionality to
display a video?
● Add ability to change text color
in the UI? or do you hard code in
the CSS?

3
The display in the Starter Repo is the
same as the Product Tile - but what

Components would you want to do different here with


this kind of functionality?

Rules Driven Product Tile Maybe instead of “Shop Now” - it’s


“Trending” - which speaks to the dynamic
nature of the component!

1. Sorting Rule - to use


2. Category - to pull product from
3. Product Name: You can input a
title or product name - if you 1
leave blank “Shop Now” displays
4. Link: by default goes to the PDP
2
but you can override that here.

This is an interesting component you can


use in lieu of the Product Tile. 4

It takes the top product based on the


sorting rule from the category you select!
So when you use dynamic rules, this could
change dynamically! This component is another way you
can extend 1:1 PERSONALIZATION
You can take the user directly to that PDP on your landing pages - what if the
or direct them to the actual category itself! sorting rule you choose is one with
Predictive Sort in it?
That means each person will see a
PERSONALIZED product!
You can extend the component

Components to control the carousel timing,


extend an attribute to change
the call to action - whatever fits
Einstein Product Recommendation into your brand strategy &
guidelines.

1. Anchor Product / Category: Define


1
the anchor this recommendation
tile works against
2. Einstein Recommender: define 2
which recommendation strategy to
use. 3
3. Max # of Recommendations:
Choose between 1 & 6 to return.

3
You can leverage this component by
taking advantage of the custom
attribute editor to allow you to deploy
Einstein Recommendations to any
page you build with Page Designer.
1
You can define an anchor category or
anchor product or a global strategy
depending on the strategy you select! 2

3
Custom Attribute Editor

Extend the Capabilities of the Components you Create:


Allows the creation of custom attributes and custom editors for the components you create, to be
used in the Page Designer visual editor when none of the out-of-the-box Page Designer UI controls
meet your needs.

Custom UIs for your needs:


For example, you might want a custom UI control that lets merchants select store locations on a map
or choose a color for the text or background. Or, you might want to let merchants place a Favorite
icon on a product tile or select which Shop Now button to use.

Incorporate 3rd Party Storefront Capabilities:


Structured way to incorporate 3rd party services into your storefront via components to leverage all
the benefits of the Page Designer (visual editing, reuse, drag and drop placement). Where as before,
this capability was limited to injecting completed experiences, via script, locked into content slots.
● incorporate that hotspot image creator, video transformation or customer reviews that you
really value from our partners can be leverage in a more powerful manner.
Localization & Extended Site Preview
19.8 - August, 2019
Page Designer For B2C Commerce
Key Features to be delivered in 19.8
Demo

General Availability, August 19.8 Release


Manage Localized Page Variants
Leverage your local fallback hierarchy to easily
manage localized pages. Define unique localized
content as required at a component level
Improved Preview
Easily preview pages in specific dimensions across
landscape and portrait views.

October 19.10 Release


Integrated Campaign Targeting
Apply the targeting rules created for your
campaigns to pages and components
Layouts
This quick example highlights a one
column vs. a 2 column content page.
Layouts Marketing Pages is a GREAT use case to
start using these for. The open layout
1 x # Column allows your merchandisers to make it
scannable and readable with different
layouts
The 1,2,3 and 4 Column
Layout create the same look
as the rows of the fixed
layout page - supported for 1 Row, 1 Column, Landscape

Landscape and Portrait.

1 Row, 2 Column, Landscape

These are great starting layouts.

Layouts give form to your page: 1 Row, 3 Column, Landscape


you could assign a Category Tile,
Product Tile, Rich Text within
each of these areas - and they
would resize to fit.

1 Row, 4 Column, Portrait


Think through the control

Layouts you want over the carousel -


and make sure you capture
that in your requirements for
Carousel your developer.

The ability to display an


arbitrary number of
subcomponents as slides.

As a merchandiser, maybe you


want additional control of the
carousel:
● speed at which it slides,
● if it reacts to keyboard
events
● if it should pause for on
hover events
Make sure you put that in your
requirements.
Layouts Think about what elements make
sense to display in a 3x2 grid.
3 x 2 Grid Layout

3x2 Grid Layout

It has only one region, that can


contain up to 6 children and lay
them out in a grid layout. 3 wide and
2 high on Desktop, 2 wide and 3 high
on mobile devices. If it contains less
than 6 components, it will still have
the same size and show empty space

For this example you can see


we’ve added different component
types including
● Product Tile
● Rule Driven Product Tile
● Category Tile
Examples & Ideas on new Pages, Layouts & Components
Page Type Ideas
For Inspiration
Page Types

Here are just a few examples of Page Types


you can create.

Define your use cases and business needs


to inform which ones you build out.
Page Types
Home Page

Defining a “fixed layout” for your


home page is something most
brands do. Think of your home
page template now - and where
your content slots are located.
How would that translate to
Page Designer?
Page Types
Category Landing

Define a “fixed layout” for your


category landing pages to
maintain a consistent look and
feel across your site.
Page Types
Copy Layout

For content heavy pages like


Privacy Policy and Terms &
Conditions - a simple fixed
layout with a header banner
and footer banner leaves
flexibility to the business users
to populate the copy body with
1, 2 or 3 columns.
Page Types
FAQ

Similar to a content page, this


page type is specific to a FAQ.
Having said that you can still
achieve this by using the
content template on the
previous slide.
Layout Ideas
For Inspiration
Here are additional controls
Layout Ideas you can surface for a
carousel to give your
business users more control.
Dynamic Carousel
1. Eliminate row padding on top of 1
carousel: Check box
2. Eliminate row padding on bottom 2
of carousel: Check box
3
3. Specify carousel slide interval (in
ms) 4
4. Specify if carousel reacts to
keyboard events: Check Box 5
5. Specify if carousel should pause
on hover-events: Check Box
Component Ideas
For Inspiration
Component Ideas If you leverage video on your
online storefront, work with
your developer to define
Video video support - YouTube,
Vimeo or others.
1. YouTube Video ID: Represents the
YouTube ID of the video (can be
retrieved via the YouTube video’s
url. 1
2. Video Title: Describes the
customer-facing title of the linked
2
YouTube video.
3. YouTube Video Width %: Describes
the playback width of the linked 3
YouTube video.
4. YouTube Video Height %:
4
Describes the playback height of the
linked YouTube video.
5. YouTube Video Maximum Width: 5
Describes the playback maximum
width of the linked YouTube Video.
Component Ideas Think about the design of the
section title - font, formatting,
color.
Section Title Component Should there be a different
look/feel for a marketing
1. Headline Text: Define the page vs. a category page?

headline for the section title


2. Hide the headline text: Use
this checkbox to hide the
headline text from customer 1

view. (allowing you to toggle off


and on without removing)
2

For marketing pages or category


landing pages, creating a
component that allows you to
create natural section titles for
each area.
Component Ideas
HTML Vertical Spacer Component
1. Vertical Space Height:
Represents the height of the
vertical spacer - for the
specified unit type.
2. Spacer Unit Type: Unit type for 1

the vertical space: px, %, em,


rem
2

Similar to a Section Title


Component, provides flexibility in
creating white space on the page
with depth you can control.
Component Ideas
Banner: Full Sized Component
Banner: Thin Full Sized

In this case, the brand has


decided to create two banners -
Full Size and Thin Thin
Full Sized
Notice the different attributes
available for each component -
based off their business needs

And notice the presentation


layer for each one has a
different look & feel and
placement of text. .

As you work through your use Thin


cases, think about where and
how you would utilize different
size banners and what controls
you want to put around them.
Component Ideas
FAQ Item Component
With drag & drop
functionality for each FAQ
item, it makes organizing the
1. FAQ Question: Input the page simple.
1
question here
2. FAQ Answer: Input answer 2
here.
Your merchandising team is
empowered to create and
manage their own content
pages. And with the copy
feature coming soon they can
reuse these components as
needed in other pages.
Component Ideas 1

1
Content Tile 2

1. URL: Set link


2. Image: Select Image
3. Headline Text
4. Headline alignment: Left,
Center, Right 3
5. Body Text: rich text editor 4
6. Editorial Controls
a. Use Placeholder Image 5
b. Disable the “Show More” link
(displays bottom of block)
c. Hide headline text
d. Hide body text
6
Component Ideas
Content Tile
1. Headline Text
1
2. Headline alignment: Left,
Center, Right 2
3. Body Text: rich text editor
3
4. URL: Set link
5. Editorial Controls
a. Use Placeholder Image
b. Disable the “Show More” link
(displays bottom of block)
c. Hide headline text 4
d. Hide body text
5
Component Ideas A component which
supports html can be
HTML Block leveraged in specific use
cases.
Create a component with raw HTML
Component Ideas leveraging
Custom Attribute Editor
For Inspiration
Custom Attribute Editor

Extend the Capabilities of the Components you Create:


Allows the creation of custom attributes and custom editors for the components you create, to be
used in the Page Designer visual editor when none of the out-of-the-box Page Designer UI controls
meet your needs.

Custom UIs for your needs:


For example, you might want a custom UI control that lets merchants select store locations on a map
or choose a color for the text or background. Or, you might want to let merchants place a Favorite
icon on a product tile or select which Shop Now button to use.

Incorporate 3rd Party Storefront Capabilities:


Structured way to incorporate 3rd party services into your storefront via components to leverage all
the benefits of the Page Designer (visual editing, reuse, drag and drop placement). Where as before,
this capability was limited to injecting completed experiences, via script, locked into content slots.
● incorporate that hotspot image creator, video transformation or customer reviews that you
really value from our partners can be leverage in a more powerful manner.
Step by Step
How to Get Started
Recommended pages to start with
Home Page
Fixed Layout
Category Landing
Fixed Layout Content / Marketing
Dynamic Layout
Create a plan to create your Page Designer Pages
The key to success is to take the time to
lay out a plan.
Once your pages & components are
defined & built they can be used over and
over again.

We’ll walk you through the steps in the


next slides.

Identify Page Types


3 5 Develop & Adopt
1 Identify Page(s) and Component Types

2 Identify Team 4 Create Estimates


Members
(internal or partner)
Define your pages and component types for your Site
The Team
For example - Let’s take a look at the
process for defining and designing a
Marketing Landing Page to highlight
your Summer Collection.

Ecommerce Developer Web Merchant In your requirements you call out


Director
the plan to use this page type and
components for additional product
and collection launches.

At a high level, these are the steps...

1 2 3 4 5

Define Page Concepts Component & Development Page Setup & Schedule & Preview
Marketing Page - Page Review Developer creates Administration Content Manager can
Identify components to Meet with your Developer to agreed on pages and Content Manager preview by date,
leverage. discuss & convey Business component types. builds pages with customer group, locale,
Requirements. components, populate and device type - and
content, assign then it goes Live!
products
Example Workflow: Summer Campaign
Campaign Component & Development Page Setup & Schedule &
Concept Page Review Administration Preview

Ecommerce Director

Create Marketing & Design


Assets, Identify Products &
Merchandising assortment
Example Workflow: Summer Campaign
Campaign Component & Development Page Setup & Schedule &
Concept Page Review Administration Preview

The layout should be


dynamic

Display in July & August


only big spender
customers

Include a component
Ecommerce Developer Carousel of top for Einstein
Director categories recommended
products
Convey Business
Requirements, Review
Define format of
library of existing pages text, only allow
layouts and components content changes
Example Workflow: Summer Campaign
Campaign Component & Development Page Setup & Schedule &
Concept Page Review (1) Administration Preview

● Page Types
Define regions and rules (which
components can be selected
based on the region)
Developer ● Components
Define attributes for each
Create any new required components (name,
page or component types
required/optional, type such as
product picker or rich text)
Example Workflow: Summer Campaign
Campaign Component & Development Page Setup & Schedule &
Concept Page Review (2) Administration Preview

Region Definitions /
Attribute Definitions
Developer define the visual editor
experience for the Web
Content Manager
Create any new required
page or component types
Example Workflow: Summer Campaign
Campaign Component & Development Page Setup & Schedule &
Concept Page Review Administration Preview

Web Merchant

Place page components,


populate content,
assign products
Example Workflow: Summer Campaign
Campaign Component & Development Page Setup & Schedule &
Concept Page Review Administration Preview

Header Banner Component

Web Merchant

Preview by date, customer group,


locale, and device type
Create new pages - without developer support!

After the one time planning


and implementation with your
development team, your non-
technical users are empowered
to create multiple pages and
experiences, over and over
again...

1 2 3

Define Page Concepts Page Setup & Schedule & Preview


Marketing Page - Administration Content Manager can
Identify components to Content Manager preview by date,
leverage. builds pages with customer group, locale,
components, populate and device type - and
content, assign then it goes Live!
products
Where to Find Information and How to Share Feedback

● In XChange on the Help & Training > Content and Page Designer various materials are
listed to support your adoption of Page Designer.

● Look for an updated cartridge in the mid-June 2019 timeframe with new components.
Reach out to your Success Manager or Salesforce contact to learn more.

● If you have questions or feedback please share with your Success Manager or Salesforce
contact.
Terminology and How It Works
Page Designer Terms
Pages, Regions and Components

Pages are set up in a hierarchical structure:

Page
The outermost container of the structured content.
Contain regions.

Region
Allow for a hierarchical structuring of components.
Contain components.

Component
Have attributes defining the component content.
Components can also be layouts, which can contain multiple
regions to which merchants can add more components.
Campaign Landing Page
Page Designer Terms
Page & Component Types
Banner

Developers create page types and component types


based on project requirements:
Banner Banner Banner Banner

● Page Types
○ Can also be considered “templates”
(promo page, landing page, content page). Product Product Product

○ Contains set regions with specified components title title title

available for use in that region.


● Component Types Product
title
Product
title
Product
title

○ The type of content available for use in a specific


region (banners, product tiles, category tiles,
layout, etc).
Product Product Product
title title title

Every pages and component has a type!


Banner
Page Designer Code Artifacts
3 Core Elements

● JSON Metadata Definition File


○ Responsible for describing the content attributes that can be managed by the
merchant as well the regions driving the dropzones made available by the Page
Designer UI.
● Javascript Rendering Script
○ Comprised of an exported render function which leverages the content attributes
and assigned components to run business logic on top of it and create a model
ready for markup creation.
● Rendering Template
○ Markup generation can easily be implemented through using a .isml template
which leverages the model as provided by the rendering function.
JSON
Metadata
Definition File
Javascript
Rendering
Function
ISML
Rendering
Template
Availability and Roadmap
Page Designer Roadmap
2019 Delivery Milestones

Business Value: Declarative Page


Management
Reference Components
& EcoSystem
Integrated
Management
Media & Content
Management

Custom Attribute Declarative Link


Open Beta Declarative page management New UI Visual Editor Multi-file upload
Editor Builder
for personalized landing pages
(May) Framework Einstein Product
Component / Page Drag & Drop upload
Association Components Recommendations

Component Editor Reference & Dev New Page Variant for


GA Page Management + File Search
G.A. Formatting Documentation Localization
Additional Features
(August) Ready for the holiday season Custom Component Onboarding Campaigns /
Naming Documentation Promotions

Placeholder Mock Reference & Dev Page Duplication for


Dreamforce Extending Declarative Content Documentation Reuse
Functionality
(November) Onboarding Dynamic Page
Improved Preview Documentation Creation

SFRA Framework
Components
Frequently Asked Questions
Initial Frequently Asked Questions
1. Is there a cost for Page Designer?
There is no cost to use Page Designer in Commerce Cloud. Costs may be incurred for partner
development if development team members are not available within a customer organization.

2. Will Page Designer work with Site Genesis and Storefront Reference Architecture?
Page Designer is reference architecture agnostic and can can be used with Site Genesis or Storefront
Reference Architecture.

3. What pages can be created and managed as part of the Page Designer Open Beta?
We encourage you to start with personalized landing pages; those marketing focused, content heavy
pages your business teams want to stand up quickly and update frequently, without having to depend
on developers to complete their day to day activities. These pages can be created in production. You
can then start to think about other areas of your site you would like to extend the use of Page
Designer, such as dynamic page creation and management, which we will provide more detail and
support for later in 2019.
Initial Frequently Asked Questions (continued)
4. How does Page Designer work with existing Commerce Cloud content slots?
Page Designer, with the capabilities that pages, components, and the visual editor offers can replace
content slots, specifically those intended for use on personalized landing pages. It’s your choice on
how you intend to manage your site, however, we strongly recommend trying out the Page Designer to
see how it works for your team.

5. How does Page Designer work with existing Commerce Cloud content management libraries?
Page Designer links directly to the file library used for your current site for assets. Using the improved
file manager, users can easily reference this file library from within the visual editor to assign files and
images to the components.

6. What is the effort to get Page Designer set up and start to be used by Business Users?
It is estimated it will take two weeks for Developers and Business Users to collaborate on page types
and component types needed based on an agreed upon design, and for development teams to get up
to speed and build necessary page types and component types. At that point Business Users can use
the page types and component types to create pages without developer dependency, until they need
new or updated page types and component types.
Initial Frequently Asked Questions (continued)

8. How does segmentation and scheduling work?


A page and a component type can be segmented by customer groups (pulled in from the Business
Manager) and scheduled to show on a certain date and time or for a specified duration. All
segmentation and scheduling scenarios can be previewed to validate they display correctly.

9. How will partners learn about Page Designer?


Our enablement team for both LINK Technology Partners and Consulting Partners is developing a
communication and training plan to ensure partners are appropriately enabled. This plan includes
regional workshops starting in May, including one at Connections. We also have a dedicated public page
in the Partner Community to support partners (Page Designer for B2C Commerce), which we will add
details to as we approach the release.

10. How do we connect the Page Designer Page to my Commerce Cloud Site?
Rendering of Page Designer managed pages on the storefront is done very similar to how the
Content Assets are rendered today. The basic flow is to initiate page rendering by Page ID with the
use of the page designer API [dw.experience.PageMgr.renderPage(pageID, renderingTemplate)] within
a Storefront Controller.
Initial Frequently Asked Questions (continued)

11. What is Page Designer’s relationship with the Salesforce CMS?


Salesforce CMS (currently in Beta) allows customers to create, manage, schedule and share content to
power all Salesforce experiences across sales, service, communities, marketing and commerce. Later in
2019 we will launch native support for Community Cloud, with Commerce Cloud and Marketing Cloud
support coming in 2020. B2C customers should adopt Page Designer to realize immediate benefits
today and longer-term benefits with CMS integration.

12. How does Page Designer work if I am using a CMS solution/partner?


You can still continue to use a CMS solution as you do today and then determine how you want to
leverage page designer for specific page creation/management. If you use a LINK Technology partner
that provides an impact on your storefront, you can work with them to create a component that can be
used within Page Designer, leverage the visual editor to easily place and reuse across multiple pages.
You can also continue to work with script as you do today, it’s your choice.

13. Does Page Designer support localization?


Yes, with the Open Beta you can localize your pages. With GA efficiencies will be added to improve the
process of creating localized variants of your pages.

You might also like