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.
1 Components 2 Theme 3 Page Structure 4 Settings 5 Builder Dropdown 6 Template Header 7 Refresh Page 8 Help 9 Preview 10 Publish
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.
- 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.
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):
|Entity||Matches your Community Hub Entity|
Enablement Steps for a Lightning Web Store using Community Builder
Note: You will firstly be creating a new Community Workspace
- From Setup, enter Communities and click "All Communities"
- Click New Community and choose a template. For this help guide, we have chosen a "Build Your Own" approach
- Click Get Started
- Choose a name (ex: "webstore") and a URL
- Click Create
- 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.
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 , and select a Product Grid item. Drag this to your page. Components)
7. From Builder, open the components module (Click on , and select a Product Filter item. Drag this to your page. (Optional). Components)
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)
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.
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
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.
- Create a featured products display as a page banner -
- 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:
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.
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.
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.
- Go to App Launcher and click on Community Hub Setup.
- Select LightningStore Page to configure.
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.