Project Overview
Open the Magnolia AdminCentral running locally at port 8080. You are presented by the Apps overview.
E-commerce App#
One of the apps available is the E-commerce app. The E-commerce app shows all the catalogs and products from the connected SFCC. You can browse through your catalogs and products right in the E-commerce app.
info
SFCC data is not duplicated to the Magnolia instance.
Pages App#
In the Pages app you can create new pages for your website and manage the content.
Open the existing page in the Pages app to see a demo of Magnolia features mixed with the SFCC functionality. The Pages app provides a visual preview of the front-end served directly from the Salesforce Composable Storefront.
Content editors can add products directly from the SFCC catalogs to the content. They still get all the advantages of the WYSIWYG editor when editing and adding components.
info
Please refer to the Salesforce Composable Storefront for details about the PWA app structure.
Template Project Page#
Several components are already available. Take a look at the homepage or add a new component to the Main Area and explore them.
Edit and style all of these components inside the /app/components folder in the project.
tip
Learn more about creating new components with HA CLI.
Hero Component#
One of the first components on the page is the Hero component. When you edit the component, you can see all the properties that can be changed for the component. Among the properties is the Category field.
Click on the Select new button and you will see an overview of the catalogs from the connected SFCC sandbox. Select any category or subcategory. After saving the changes, the modified Hero component contains a link to the category page you selected.
info
Composable Storefront (PWA) gets data, content, and references to the SFCC products and catalogs from Magnolia. References are created by the content editors when creating the components.
Composable Storefront retrieves all the data from the SFCC based on the references and displays it.
Product Component#
To add a new product component, the content editor chooses a product from the SFCC catalog. The component itself then displays the product image and information about the product.
The template page contains multiple product components. Right from the jumpstart, product components display just product skeletons. To connect a product to the component, edit the product component and select a product from the connected Salesforce catalog.
tip
Content editor can create multiple variants of the Product component based on the targeted audience.
Refer to the Personalization section of the Magnolia documentation for more information.
Recommended Products Component#
The Composable Storefront app displays product recommendations throughout the website, such as the product details page or the cart page. With this template project, the content editor can add product recommendations to any editorial page.
You can add the Recommended Products Wrapper component to your page and choose the type of Einstein recommender you want. Based on the type of the recommender you choose, you can select one or more products that determine what the recommender returns.
The recommendations configuration is setup in the Einstein configurator.
Personalization#
Try personalization of the content directly in the Magnolia AdminCentral. Find the specialOffer component on the home page. There are multiple variants of the component available already. The correct variant is displayed based on the personalization rules present.
To create a new variant, click on the specialOffer component and select Add component variant in the action bar. Select the personalization rules for the new variant in the Choose audience option in the action bar.
Toggle through the options to see how the specialOffer component changes. Predefined variants use the utm_campaign trait rule for personalization.
Try personalization of the specialOffer component by adding utm_campaign to the pathname of your web application running at port 3000.
http://localhost:3000/?utm_campaign=winter
You can create new variants for any component you like. Even for the whole page!
info
Refer to the Personalization section of the Magnolia documentation for more information.
Focal hotspots#
Focal hotspots provide additional functionality to Magnolia DAM and allow editors to define points in images that are linked to products. Marketers can use images to inspire customers and promote products.
The hotspot component displays an image with focal hotspots linked to selected products from the SFCC catalog. After clicking on the point in the image, the customer will see additional information about the product.
Clicking on a point in the image in the hotspot component on the template page opens the product skeleton. This is because no product is associated with this particular spot.
Use the Assets app to attach products to images. Open the selected image in the Assets app and go to the Focal hotspots tab. There you can choose the exact place to place the hotspot and link it to the product from the connected Salesforce catalog.
Navigation Header#
The navigation header of the template page is defined in the Navigation app.
Go to the Navigation app in the AdminCentral. Navigation for each site is defined in the corresponding folder. To add site navigation, create a new folder with the site name. Subspages have the same navigation as the page.
Add the new item to the navigation folder. The label (or name if the label is not set) defines the displayed label of the navigation link. You can define the type of navigation link that will appear in the navigation header:
- E-commerce category - displays the selected category and all the subcategories header
- Link - link to internal or external page
E-Commerce category#
You can type a category key or select a category from the connected Salesforce catalog. You are not limited to the main categories - select any category or subcategory you want to display in the navigation header.
In order to select a category, you must sync the e-commerce categories in the E-commerce Categories app. Go to the E-Commerce Categories app and click the "Sync Categories" button in the action bar on the right. If the categories are properly synchronized, you should be able to browse through the categories and subcategories directly in the E-Commerce Categories app.
Link#
Choose the type of link you want in the header - internal or external.
When the selected type is internal, you can select a new page from the list of all pages defined in Magnolia.
For an external link, enter the URL of the page, including "https: //".
Enhancing the Navigation Header#
Items in the navigation header are displayed based on the Navigation app. Subcategories are automatically returned from the connected SFCC and displayed in the subnavigation. You can enhance this subnavigation with editorial content and add a banner with additional information or a call-to-action buttom.
To enhance the subnavigation, go to the E-Commerce Categories app and select the category or subcategory you want to enhance. Edit the Navigation Banner tab for the selected category. After saving, you can see a banner enhancing the category in the subnavigation.
Subnavigation displays the banner of the main category, unless the subcategory has a banner defined.
Enhancing the Product-list Page#
The product-list page shows all products in the selected category. Products are automatically returned from the connected Salesforce catalog based on the category ID.
To enhance this category page with a call-to-action banner, go to the E-Commerce Categories app. Edit the Product-List Banner tab for the selected category. Once saved, you can see the category page enhanced by the banner.
Campaign Manager#
We may also use content specified by the dates to promote new products or events. Create a campaign and display it either on editorial pages or product-list pages.
Open the Campaign app in the AdminCentral Apps dashboard. The app allows you to create and manage the campaigns.
In the Campaigns tab, you can see a Buy one get one promo campaign created. Click the Edit campaign schedule button in the right action bar to edit scheduling of the campaign.
You can create a new campaign item (creative) or edit the existing one. When editing the creative, you can see the visual preview of the campaign item.
info
When adding a new campaign creative, you need to select a campaign slot. Click on the Slots tab in the Campaigns app to manage the slots.
Campaign Managed Component#
Go to the Pages app and select the home page. Add a new Campaign Managed Component and select a slot for your campaign. The component contains content based on the dates of each campaign creative associated with the selected slot.
Enhancing the Product-list Page#
The product-list page automatically shows all the products in the selected category. You can enhance this page with a campaign managed component. Go to the E-Commerce Categories app, select the category by ID and select a campaign slot in the Campaign Managed Banner tab.
SEO app#
The SEO app allows you to check the page title, keywords, etc on the editorial pages. After checking the selected audits, you can proceed to the detailed audit and view the results.
Go to the Pages app and open the page. In the right action bar, click the Edit page properties button and add window title, page description and keywords.