Commerce Cloud : Customize the Storefront User Experience

Customize the Storefront User Experience

My Account Page: can show following information
  • Show Account, Contact, and User Information on the My Account Page
  • Allow a Buyer to Change Their Storefront Password from the My Account Page
  • Allow a Buyer to Manage Shipping and Billing Addresses on the My Account Page
  • Specify Default Pagination Options for All Sections of the My Account Page
  • Filter Information in the My Account Page by Effective Account
Product List Page : 
  • Configure layout options such as number of products to show on a page at once.
  • Whether to show products in grid or list view.
  • Configure the Sort Options Available for the Product List Page
    • For search results, you can specify the following sort options:
    • Sequence 
    • Relevance 
    • Name 
    • Newest 
    • Price 
  • Can set buffer size to include extra products for retrieve and sorting over an above page size.
  • Can show the Total Number of Products on the Product List Page
  • Can show Subcategory Details on the Product List Page
  • Can configure Product Tile Details and Options on the Product List Page
  • Can customize the Search Results Text on the Product List Page

Product Detail Page :

  • To show more product data on the Product Detail page—product specifications, related products, documentation, and so on—create CC Page Section records
  • can show a Product's Long Description on the Product Detail Page
  • can show Related Products on the Product Detail Page
  • can show Product Specs on the Product Detail Page
  • can make Documentation Available on the Product Detail Page
  • can show Custom Document Types on the Product Detail Page
  • can show Shipping Information on the Product Detail Page
  • can show Custom Content on the Product Detail Page

Shopping Cart Page :

  • Configure Product Info and Options on the Shopping Cart Page
  • Allow a Buyer to Email the Contents of the Shopping Cart Page
  • Allow a Buyer to Request a Quote for the Contents of the Shopping Cart
  • Allow a Buyer to Change a Product's Quantity to Zero on the Shopping Cart Page
  • Show Related Products on the Shopping Cart Page
  • Optimize How Frequently the Shopping Cart Page Calls Price Logic

Site Login Page :

  • Redirect a Guest Buyer from the Site Login Page to the Site Register Page
  • Specify the Navigation Experience After a Buyer Logs In

Site Register Page :

  • Show Company Information Fields on the Site Register Page
  • Show Time Zone Fields on the Site Register Page
  • Skip Email Verification for Self-Registration and Immediately Log In a New Buyer

Modify the Column Layout of a Storefront Page

  • Configuration settings of Storefront, select template module and change the template for required page.

Add Widgets to Storefront Pages with Visualforce Components :

  • Show the Breadcrumb Widget : show the path through the storefront's category taxonomy
  • Show the Category Tree Widget
  • Show the Effective Account Selector
  • Show the Feature Filtering Widget
  • Show the Locale Switcher Widget
  • Show the Reorder Widget
  • Show Spotlight Products and Featured Products

Customize Storefront Headings and Text with Page Labels

  • To edit page labels, In Storefront general settings, enable "Display Page Label Names". On the CC Page Labels tab in your org, find a record that you want to edit. When you've finished updating page labels, disable "Display Page Label Names"
  • Localize Page Labels for an Internationalized Storefront
  • Cache Page Label Data for Improved Performance

Provide Intuitive Storefront Navigation with Menus

  • In Storefront configuration settings, In "Top Menu" module, ensure that "Enabled" configuration is set to TRUE.
  • Create a record in "CC Menu" tab.
  • If you selected None for the menu's Link Type, create one or more CC Menu Item records to nest within the menu.

Style Your Storefront with a Theme

B2B Commerce for Visualforce installs the following storefront theme static resources in your org.

CC_Theme_Capricorn
A fully styled override of the default Bootstrap 3 styles with images and colors to complement the Capricorn Coffee demo storefront data. This theme static resource is useful for training, demonstrations, and reference.
CC_Theme_Minimum
A starter theme using only the default Bootstrap 3 styles. This theme static resource is a good starting point for developing your own theme.
CC_Theme_Capricorn_Classic
A full styled override of the default Bootstrap 2 styles with images and colors to complement the Capricorn Coffee demo storefront data.
For more information please visit : 
https://help.salesforce.com/articleView?id=b2b_commerce_theme.htm&type=5

Source Options for Storefront Media

Reference a file from a media server or repository, such as content delivery network (CDN), using a uniform resource identifier (URI)
Reference a source file included with a static resource
Attach the source file directly to a record from the Notes & Attachments related list

Adjust Criteria for Ranking Storefront Search Results

To specify the importance of each piece of criteria, update the Catalog Search Ranking settings in CC Admin
SearchRank_ExactProductNum
Weight if the search term matches the product SKU exactly. The default value is 700.
SearchRank_inProdNum
Weight if the search term matches a portion of the product SKU. The default value is 100.
SearchRank_inDisplayName
Weight if the search term matches a portion of the product name. The default value is 200.
SearchRank_ShortDesc
Weight if the search term matches a portion of the product short description. The default value is 50.Provide Autocomplete Suggestions in Storefront Search and Quick Order

Provide Autocomplete Suggestions in Storefront Search and Quick Order


Allow Only One Country, Territory, or State in Address Picklists

Create page labels for the country, territory, or state you want to specify

Update storefront configuration settings to restrict the options available in address picklists to just the country or state you created page labels for

Find the Skip getCountries  configuration, and make sure that its value is TRUE.

Find the Skip getStates configuration, and make sure that its value is TRUE.

Setup VSCode with Salesforce

Step by Step guide to setup VSCode with Salesforce Install vscode Install Salesforce CLI (developer.salesforce.com/tools/sfdxcli) Perform fo...