Create a Lightning Store Experience

Quick Links

Make a Lightning Store

Nimble AMS introduces the ability to create a state-of-the-art e-commerce store using Lightning Web Components for an improved user experience and more flexibility on how associations can sell their products.

Built using new Lightning Web Component (LWC) technology Nimble AMS customers are now able to use the power of Community Builder (external) to easily design an experience for members to find, configure and purchase products. Theming and RichText capabilities mean even more customization for your community.

The user experience has been improved to take more advantage of desktop screen space to show more products, while still preserving the mobile and tablet experiences. And new capabilities allow selling other product types through the store interface with custom DataSources. Contact your Customer Success representative for more information.

What is Community Builder?

Community Builder and community templates for self-service let you create, brand, and publish a custom community that looks great on any device! Choose a template to quickly start your community, and then style the pages to match your company’s branding.


Key

1 Components 2 Theme 3 Page Structure 4 Settings 5 Builder Dropdown 6 Template Header 7 Refresh Page 8 Help 9 Preview 10 Publish


Community Builder Interface

Training needed

Please go through the Trailhead Learning for Community Builder (external) and read the Community Builder Overview (external) and Product Variants documentation before attempting to create a Lightning Store using the Product Grid and Product Details LWC components.

We recommend that you review the documentation for the new Lightning Web Component Library.

Create a Store using Product Grid, Product Details and Product Filter components

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.


Product Grid - Displays the products in your store.

Product Details - Displays specific details about the selected product. 

Product Filter Displays the available category filters for the product grid on the same page. It works with the product grid LWC, and cannot be on its own.

There will be a default DataSource provided in managed versions of Nimble AMS for basic store functionality. To extend functionality and create a custom store please contact your Customer Success representative.

Pre-requisites

  • Please ensure you are logged in to Community Hub.
  • Create a community workspace.
  • Map profiles and permissions for the community in Nimble AMS Setup or Community Builder Setup Administration.
  • You will need a Community Hub Cart so products can be checked out.
  • 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.

Permission Sets and Profiles

Uncheck Welcome Email Box

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


Permission Profiles Setup

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

Configure products to appear in the Product Grid Component

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 Merchandise > Products

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):

SettingValue
Self-Service EnabledTrue/Selected
EntityMatches your Community Hub Entity
StatusActive

Enablement Steps for a Lightning Web Store using Community Builder

Note: You will firstly be creating a new Community Workspace

  1. From Setup, enter Communities and click "All Communities"
  2. Click New Community and choose a template. For this help guide, we have chosen a "Build Your Own" approach
    1. Click Get Started
  3. Choose a name (ex: "webstore") and a URL 
  4. Click Create
  5. Open Builder


Making the site public

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


Note

If you are not familiar with Community Builder, please review the following before continuing: Community Builder (external link)


6. From Builder, open the components module (Click on Components), and select a Product Grid item. Drag this to your page.

7. From Builder, open the components module (Click on Components), and select a Product Filter item. Drag this to your page. (Optional).

 Builder Dropdown

Builder Dropdown


Product Grid Configuration

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

  • Set Data Source: LightningStoreDataSource (Please note currently this is a manual step but is expected to be automated in a milestone release version).

When you select the Data Source, any products setup correctly in the previous section will appear.

  • 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 (see instructions below for determining your URL)
 What the Online Store may look like

Visual of Online Store

Product Filter Configuration

Categories that are displayed in this LWC must be self service enabled in order to show up. There is one configuration element in community builder - the label for the header (e.g. Category) which can be amended if desired. 

In the classic experience the Product Filter is hardcoded into the template and will appear embedded in the left column.

Product Details Configuration

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

  • Go to Page Properties
  • Create New Page - Standard Page - Format - Name new page (e.g Product Details but you can name it anything - 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 module to your page, the configuration module will open. Here, you can configure various warning labels and thresholds to show information to your customers regarding the items current stock levels and availability.

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

Publishing the Site

  • First Preview the site by clicking on Preview.
  • Then Publish the site using Publish.

In Staff View

Staff View Communities

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

What should happen if it's correctly enabled?

  • A site storefront with the ability to purchase merchandise and parent products will be available when logged in.
  • Members can view item details, add them to their cart and proceed to checkout in Community Hub.

Customizing the Store: What else can I do?

Using the Nimble AMS Lightning Web Component Library allows for extended flexibility with your online community presence. Combining these new responsive elements with the power of the Salesforce platform allows for almost endless customization.


  1. Create a featured products display as a page banner -
    1. Use a narrow 3 item Product Grid linked to a secondary Data Source. As an example, you can use SOQL queries to populate this data source with specifically tagged products that are a subset of your product offering.

2. Extend the functionality of your Product Details page by using Tabs and Rich Text components. You can add sections for additional information regarding the product as well as standard information for all variations of a product.

What if I want to stick with my current setup?

Associations can experience a store on Nimble AMS in three ways:


Classic Store

The original Community Hub store developed in VisualForce. Configured through Community Hub Setup.

Classic LWC Store

The same end user experience as the new Lightning Store, powered by Lightning Web Components, with more options. Still configured through Community Hub Setup with limited configuration options. 

Lightning Store

The new Community Hub store powered by Lightning Web Components with an improved user experience and more flexible configuration options. Configured through Community Builder. 


Those who choose to move fully to the Lightning Store can take advantage of increasingly flexible configuration options. You can also choose to stay with your existing configuration or try a combination approach. We advise that you reach out to Customer Success so they can best advise on any custom solutions that you may need for your association.

Classic LWC Store Configuration

For those who wish to work within Community Hub and still take advantage of Lightning Web Component functionality, these configuration steps are provided.


 Configuration through Community Hub

Note

By default, pages for LightningStore, Lightning Product Grid, and Lightning Product Details as well as a default Datasource will be provided within Community Hub Setup under the Pages tab. For custom vendor solutions you will need to contact the Customer Success team.


The Lightning Store page has the Lightning Store Product Grid card on it.

The Lightning Product Details page has the Lightning Product Details card and the Product Details Carousel on it.

Clicking Edit next to the Lightning Store Product Grid or Lightning Product Details cards will open the new Lightning Card Configuration, where it has a mirrored setup experience to Community Builder.


  1. Go to App Launcher and click on Community Hub Setup.
  2. Select LightningStore Page to configure.

Card View Lightning Store

3. Click on LightningStoreProduct Grid. This will show a preview of the store and you can configure details with most of the configuration of the Lightning Store. By default it will point the DataSource to the default Datasource which encompasses all merchandise and parent products.