Enablement and Configuration for Lightning Store

Overview

This page will walk you through how to create and configure a Lightning Store for your association.

Prerequisites

  • A Community Hub site.
  • Upgrade your Community Hub community to a Lightning Community.


Pre-requisite

Prerequisite: Upgrade Community Hub to a Lightning Community

Skip this step if your Community Hub has already been upgraded to a Lightning template. Administrators can verify if the upgrade has been successful by going to Communities - All Communities and checking that Builder appears as a link next to Community Hub.

As this is a large change we recommend that you test this change in your staging environment for Community Hub first, and check that everything continues to function as expected before implementing this in a production environment.

  1. Navigate to Setup > All Sites.

  2. Locate your Community Hub in the list.

  3. Click workspaces next to the Community Hub.

  4. Select Administration.

  5. Select "Change Template" and select yes to dismiss the warning message as it's not applicable.

  6. Select the "Build your own" lighting template.

  7. This will update your Community Hub to use the new Lightning functionality.

Get Started with Creating and Configuring a Lightning Store


Terms to Understand

Product Grid

  • Displays the products in your store.

Product Details

  • Displays specific details about the selected product

Product Grid Filter

  • Displays the available category filters for the product grid on the same page. It works with the product grid Lightning Web Component (LWC), and cannot be on its own.

Please ensure you are logged in to Community Hub as a system administrator to access Builder Functionality. Please also ensure you have at least 1 product in your organization that you can populate in the store. You can easily change this later on, update or replace it. This is to allow you to see in real time the product grid functionality.


Overview

Association administrators can create an online store using Drag and Drop functionality in Community Builder. Combining the Product Grid and Product Details components will enable a customer workflow for browsing products, making selections, and purchases.


1. Set Permission Sets and Profiles

Uncheck Send Welcome Emails

Please uncheck 'Send Welcome Emails' on the Emails tab from Administration in Community Builder before setting permissions, otherwise an email will be sent out to all Community Hub Login Users.

In Community Builder, under Administration → Members you will need to select the profiles under Customer for Community Hub Login User to allow access to the Lightning Store.


Fig 1.0

2. Ensure Permission Sets are assigned to Guest Users

Perform the following settings for Lightning Community so that, the guest users are able to access products on the Lightning Store:

  1. From Setup, enter All Sites in the Quick Find box, then select All Sites.

  2. Click Workspaces next to the Lightning Community. 

  3. Click Administration.

  4. In the left navigation, click Members.

  5. In Search, select All.

  6. Move the Community Hub Guest permission to Selected Permission Sets column.

  7. Click Save.

  8. From the left navigation, click Pages.

  9. Click Go to Force.com.

  10. On the Site Detail page, click Public Access Settings.

  11. On the profile page, click Assigned Users.

  12. Click on the Site Guest User record.

  13. Click on the Permission Sets Assignments related list.

  14. Click Edit Assignments.

  15. Move Community Hub Guest to Enabled Permission Sets column.

  16. Click Save.

If using visual force community, ensure permission sets are assigned to users for viewing or managing the Record Tags on the products, events, or membership types. Assign below permission sets to a single user (external) or assign a permission set to multiple users (external):

  • Community Hub Guest: This permission set will allow guests on Lightning Community or Community Hub to view products on lightning store without logging in. However, to purchase products, guest users must log in to Lightning Community or Community Hub. They can do that from the Product Details page by selecting Login and Add to Cart.

3. Configure products to appear in the Product Grid Component

Data Source

By default, you are provided with a Data Source "Lightning Store Data Source". You will not need to modify this for a basic store.

Navigate to the Merchandise app > Products tab in Staff View.

Select and edit your chosen product. This product will be configured to appear in the Lightning Web Store.

Verify your product has the following selections (this will enable the logic to include this product in the default Data Source). Verify your product has the following fields available on the page layout if not already available.


Product Record Field

Value

Reason

Status

Active

Field is set to active.

Self-Service Enabled

True

Allows products to show up on the Lightning Store page.

Entity

Matches your Community Hub Entity

This field allows the Lightning Store to sell products through the primary entity for your Community Hub.

Can Not Be Sold Separately

Checked/Not Checked

Depending on the choice a product can be sold separately on its own in addition to being a product variant or it can be suppressed from being sold on its own. If checked the product will not appear on its own in the Lightning Store. 

4. Create the Lightning Store


  • Setup - All Communities.

  • Navigate to your Community Hub.

  • Click Builder to open the Builder console.

  • FroBuilder, open the components module on the Home Page (Click on Components), and select the Product Grid item. Drag this to your page.


You may encounter a CSP error. CSP errors are standard anytime a user links to a source outside of SF. In this case, the grid contained products that had images hosted on an external server. The error message is SF generated, letting the user know that they are linking to an external source and need to add that site to the CSP trusted sites list before proceeding.

  • From Builder, open the components module (Click on Components), and select a Product Grid Filter item. Drag this to your page to display the available category filters for the product grid on the same page.
    (Optional).

Flexible Page Layout

If you are using a standard page layout you should update to the flexible layout to provide maximum flexibility in designing your page's look and feel.


Result

You will now have the basic structure created for a Lightning store.

5. Configure the Product Grid Component

The configuration for the Product Grid will appear on the right-hand side of the site in Community Builder.

  • Set Data Source: LightningStoreDataSource will automatically populate in the DataSource field of the component.

When you select a Data Source, any products configured for that source will appear in the grid. By default, the LightningStoreDataSource will display any merchandise product set with self-serve enabled = TRUE.

  • Set Items Per Page

By default, Items Per Page is 12. If you would like a smaller or larger grid, change this value.

  • Set Product Details URL  by copying the URL from the product details component, once that has been created. 

6. Configure the Product Grid Filter Component

Categories that are displayed in this Lightning Web Component (LWC) are fed from the categories assigned to the products in the grid. There is one configuration element in community builder - the label for the header (e.g. Category) which can be changed if desired. 

The Product Filter will appear embedded in the left column.

7. Configure the Product Details Component

By default, the Product Details component is configured to use a checkout URL of "nc__checkout" in the Checkout URL field of the component.

You should update this field to the following URL: "/communityhub/nc__checkout" to successfully use the Lightning Store to checkout products.


The product details page will contain the Product Details Component.

When a user clicks an item in the Product Grid, they will be shown the Product Detail page with corresponding product information. By default, the Product Details component is configured to direct the user to the default Community Hub checkout and login pages. If your org uses a customization, please verify that the URLs are configured correctly for your specific implementation.

  • Go to Page Properties under the Home dropdown.

  • Create New Blank Page - Standard Page - Format (Flexible Page Layout) - Name new page (e.g Product Details - the auto-generated url below the name will act as your URL on the Product Grid Configuration).

  • Click on Components

  • Select Product Details.

  • Drag and drop onto Content Grid.

After adding a Product Details component on to your page, the configuration module will open. Here, you can configure various warning labels and thresholds using the fields on the component to show information to your customers regarding the items current stock levels and availability.

Gut-Check

Once you have completed the setup of the Products, Product Grid and the Product Details Pages, you should preview your community and verify that it looks and functions correctly.

Reminder

Remember to set up profiles and permissions for the Community before publishing. You can access documentation about setting up Communities here (external).

Configuring product description in Rich Text

Rich text field support has been added to the Product description in the Lightning Store. You can add the new field to the product layout and update the product description in Rich Text (bold values, images, etc.) for each product separately.

Modify any necessary Profile and Permission Set for Community Hub Users with the following:
• On the NU_Productc object grant access to the NUDescriptionRichText_c field

To configure Rich Text Description, follow the steps below:

  1. From Setup > Object Manager, enter Product in the Quick Find box, then select Product.

  2. From left navigation, select Page Layout.

  3. Enter Product in the Quick Find box, then select Product.

  4. Find Description (Rich Text) in the Quick Find box, then drag and drop to the layout section.

  5. Click Save.

Expected Result
Product description should now display in Rich Text (bold values, images, etc.) on lightening store page.

Lightning Cross Sell

Displaying relevant product or service suggestions to constituents when they browse for products on the lightning store, is a great way to help them find what they need. Also, you can increase sales and improve the customer experience by offering alternate product or service suggestions. 

Lightning Carousel, being a mutually beneficial feature, will enhance member engagement, as well as profits for your organization. 

Configuration

Please note this feature is in Pilot. For more information on enabling the feature please reach out to our Customer Success Team through a support case.

Publishing the Site

  • First Preview the site by clicking on Preview.

  • Then Publish the site using Publish.

By default, the Lightning Store will be accessible behind a login. To change this you can click the gear in the left menu for Settings, General, and check the Public can Access community checkbox in Community Builder.

Please note the site is in a preview status until it moves to active on the status page in All Communities. You can still copy and paste the URL to view it in preview.

A communities status is set to Active once it is published. To activate, go to workspace administration in Community Builder.

Customer Experience: What a storefront may look like

  • A site storefront with the ability to purchase merchandise and parent products will be available when logged in (Fig 1.2)

  • Members can view item details, add them to their cart and proceed to checkout in Community Hub. (Fig 1.3)

Fig 1.2 A representation of a base storefront.




Fig 1.3 Adding items to a cart and going seamlessly from the Product Details page to the Checkout page.

WCAG Compliance in Communities

We recommend following the WCAG guidelines while creating new communities or pages to make content more accessible to a wider range of constituents, who have disabilities, or age related issues in accessing the communities. Web Content Accessibility Guidelines WCAG 2.1 (external) define how to make Web content more accessible to people with disabilities.

Related Links

Lightning Store

Product Variants

Enablement Steps and Configuration for Product Variants