Getting Started - Page Designer GA 081319
Getting Started - Page Designer GA 081319
Revised 8/13/19
Page Designer For B2C Commerce
Build commerce experiences faster
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 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!
requirements:
● Page Types Product Banner
○ Can also be considered “templates” (promo
page, landing page, content page). Product
available: Banner
2. Assign an image 1
3. Create Heading & 2
2
Subheading
4. Align text either left or
center
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.
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 -
1. Image 1
2. Heading
3. Subheading
3
The display in the Starter Repo is the
same as the Product Tile - but what
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
1
Content Tile 2
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
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
Web Merchant
1 2 3
● 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
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
● Page Types
○ Can also be considered “templates”
(promo page, landing page, content page). Product Product Product
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)
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)