SFCC Accelerator

1. Style Guide
   • New landing page that offers the ability view global styling as dictated in the client’s style guide. Includes common out of the box site elements. Useful both as a development tool and a reference for the client.
2. Dynamic Imaging Service (DIS)
   • Previously requiring development work to activate this feature, it is included OOTB with the Accelerator instead.
3. Form Labels (Feature Toggle)
   • Provides selection of form label style within Site Preferences. Three options: Standard, Float Labels, and Placeholder Labels. Replaces all form labels on the site.
4. Non-Transactional Site Toggles (Not Responsible for Dev)
   • Useful for sites launching without commerce enabled. Individual Controller pipelines could be disabled simply by selection from select menu in Site Preferences.
5. Enabled Standard Bootstrap Responsive Breakpoints
   • Implemented standard Bootstrap breakpoints for responsive design. Includes: xs, sm, md, lg, xl.
6. Wishlist (Feature Toggle)
   • Code changes required for this feature added so that the Salesforce wishlist feature can be enabled/disabled via site preference after cartridge is uploaded and added to cartridge path.
7. Gift Registry (Feature Toggle)
   • Code changes required for this feature added so that the Salesforce gift registry feature can be enabled/disabled via site preference after cartridge is uploaded and added to cartridge path.
8. Content Slot Templates
   • Product Carousel
     • Used with both Product & Recommendation (Einstein) type slots to render a product carousel.
   • Content Carousel
     • Used with both Content Asset and HTML type slots render a content carousel.

1. Global Header Layout
   • Global Header elements have been added, styled, reformatted, or rearranged in the layout.
2. Header Mega-Menu
   • Enhancements include a full-menu dropdown overlay and the ability to display content within the dropdown overlay.
3. Sticky Header (Feature Toggle)
   • Upgrades the non-sticky global header to a global header that “sticks” to the top of the device’s screen with the option to enable or disable via site preference.
4. Mini-Cart Upgrade
   • Upgraded to display upon the user adding a product to their cart basket and sorted from most recently added to least recently added. Allows the user to see that the product has been successfully added to the cart as well as a peak at all cart contents, prices, sub-total and promotional text (if configured). OOTB only showed toast message, and products were displayed with most recent last.

1. Page Designer Template
   • Homepage defaulted to using Page Designer as source of content.
2. Page Designer Enhancements

Top level of a category hierarchy. Typically uses stronger use of imagery and merchandising.

1. Breadcrumbs added
   • Breadcrumb links added (both mobile & desktop).
2. Page Designer Enhancements

Displays a grid of products based on a category or search query.

1. Breadcrumbs added
   • Breadcrumb links added (both mobile & desktop).
2. Lazy-load Product Images
   • Adds functionality for images to first load a smaller version of an image and then initialize the larger intended image which is intended to contribute to efficiencies in page loading performance and allow more images to be configured to be displayed per page.
3. Page Banner Slots
   • Replaces the hard coded banners using catalog attributes with content slots, which take advantage of merchandising techniques such as schedule and customer groups.
4. Product Badging
   • Allows for the client to use and manage product badging on the product tile and PDP that would otherwise be unavailable out of the box or require a completely custom solution. 4 OOTB basic badges: Sale, New, Best Seller, Custom. COnfigurable hierarchy to allow badges to be displayed in order of importance.
5. Product Compare (Feature Toggle)
   • Code changes required for this feature added so that the Salesforce product compare feature can be enabled/disabled via site preference after cartridge is uploaded and added to cartridge path.
6. Results Pagination (Feature Toggle)
   • Pagination at the bottom of results pages can be toggled within a custom site preference to use one of the following: OOTB “More Results” CTA button, Page Number Links, Infinite Scroll
7. Search Refinements
   • UX Improvements
     • Allow expanding/collapsing of the refinements. "Size" refinement updated to be more visually appealing.
   • Color Refinement Improvement
     • Choosing color refinement changes all product tile variations to match selected color.
   • "Back" History
     • This enhancement also allows the user to make refinement selections, view a PDP, use the device’s “Back” button to return to the results and the refined results remain with the selected refinements saved.
8. Page Designer Enhancements

1. PDP Product Image Gallery
   • Changed to use Swiper.js for thumbnails and main image
2. PDP Product Image Zoom
   • Zoom on hover (large device only) over product image(s) configured.
3. Lazy Load Images
   • Adds functionality for images to first load a smaller version of an image and then initialize the larger intended image which is intended to contribute to efficiencies in page loading performance.
4. Product Badging
   • Product badging feature that offers flexibility for the client to use and manage product badges within Business Manager that will display on the product
5. Page Designer Enhancements

1. Order Confirmation Page Banner Slot
   • Replaces the hard coded banners using catalog attributes with content slots, which take advantage of merchandising techniques such as schedule and customer groups.

1. Page Breadcrumbs
   • Breadcrumbs added to all pages (both mobile & desktop).
2. Page Banner Slot
   • Replaces the hard coded banners with content slots, which take advantage of merchandising techniques such as schedule and customer groups.
3. Wish List & Gift Registry
   • Site preference to enable/disable the Salesforce wish list and gift registry features reflected within My Account.

1. Page Banner Slot
   • Replaces the hard coded banners with content slots, which take advantage of merchandising techniques such as schedule and customer groups.

1. Page Banner Slot
   • Replaces the hard coded banners with content slots, which take advantage of merchandising techniques such as schedule and customer groups.

1. Page Banner Slot
   • Replaces the hard coded banners with content slots, which take advantage of merchandising techniques such as schedule and customer groups.
2. Page Designer Enhancements

1. Type: Component
   • Used to define a component that can be shown on multiple pages. Intention is to be able to create reusable content for use on multiple pages without having to recreate for each page. Once the component is created, the component ID will be called upon in a component-include so that it is has the ability to be referenced for use on other pages
2. Type: Storefront Page
   • Page layout type for rendering a standard page. It is the main template used for generic landing pages. Includes:
     • 1 full-width region, that can be used with nearly all components and layouts
     • full-width components utilize full-width and are stacked vertically
3. Type: Product List Page (PLP)
   • Page layout type for rendering a page that includes the standard product grid, with the addition of defined custom content. Content can be defined for use at a category level, or limited to a single page through the use of a custom naming convention. Includes:
     • 1 region above Product Grid, pre-loaded with Dynamic Category Banner on new pages
     • 1 region containing Product Grid, Product Grid components pre-loaded on new pages
     • 1 region below Product Grid
     • full-width components utilize full-width and are stacked vertically.
4. Type: Product Detail Page (PDP)
   • Page layout type for rendering a page that includes the standard product display page, with the addition of defined custom content. Content can be defined for use at a category level and applied to all products assigned to that category, or limited to a single product's page through the use of a 'pdp-' naming convention. Includes:
     • 3 full-width regions, that can be used with nearly all components and layouts
     • Top region defaults to containing Product Detail layout, Product Detail layout components pre-loaded on new pages
     • full-width components utilize full-width and are stacked vertically

1. 1 Row x 1 Col (Mobile, Desktop) Layout
   • Utilizes 1 row in 1 column for including 1 asset object that spans 100% width.
   • Options added to define anchor ID, designate full-width, and set background color.
2. 2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop) Layout
   • Mobile: utilizes 2 rows in 1 column for including 2 asset objects (1 per row) that each stack to take 100% width on mobile
   • Desktop: utilizes 1 row with 2 columns for including 2 asset objects (1 per column) that each span 50% (or as otherwise selected) width on desktop
   • Options added to define anchor ID, designate full-width, and set background color.
   • Additional option for defining column width split. Default is 50%/50%. Other options include 33%/66%, 66%/33%, 25%/75%, 75%/25%.
3. 2 Row x 2 Col (Mobile), 1 Row x 4 Col (Desktop) Layout
   • Mobile: utilizes 2 rows in 2 columns for including 4 asset objects (2 per row) that each span 50% width on mobile
   • Desktop: utilizes 1 row with 4 columns for including 4 asset objects (1 per column) that each span 25% width on desktop
   • Options added to define anchor ID, designate full-width, and set background color.
4. 2 Row x 3 Col (Mobile), 1 Row x 6 Col (Desktop) Layout
   • Mobile: utilizes 2 rows in 3 columns for including 6 asset objects (3 per row) that each span 33% width on mobile
   • Desktop: utilizes 1 row with 6 columns for including 6 asset objects (1 per column) that each span 16% width on desktop
   • Options added to define anchor ID, designate full-width, and set background color.
5. 3 Row x 1 Col (Mobile), 1 Row x 3 Col (Desktop) Layout
   • Mobile: utilizes 3 rows in 1 column for including 3 asset objects (1 per row) that each span 100% width on mobile
   • Desktop: utilizes 1 row in 3 columns for including 3 asset objects (1 per column) that each span 33% width on desktop
   • Options added to define anchor ID, designate full-width, and set background color.
6. 3 Row x 2 Col (Mobile), 2 Row x 3 Col (Desktop) Layout
   • Mobile: utilizes 3 rows in 2 columns for including 6 asset objects (2 per row, 1 per column) that each span 50% width on mobile
   • Desktop: utilizes 2 rows in 3 columns for including 6 asset objects (3 per row, per column) that each span 33% width on desktop
   • Options added to define anchor ID, designate full-width, and set background color.
7. Carousel
   • Creates a row that natively uses the site's global slider functionality to place any asset objects included within in a carousel/slider utility.
   • Number of slides, arrow visibility, and dots visibility configurable for each breakpoint
   • Slide Edit Mode - disables slider for choosing and editing each slider within PD interface
   • Options added to define anchor ID, designate full-width, and set background color.
8. Image Gallery
   • Organizes a responsive grid of "Image Tile" components.
   • Options added to define anchor ID, designate full-width, gallery title, and number of images per row (desktop).
9. Infinite Row
   • Utilizes 1 row for including an infinite number of asset components. Wraps objects as needed for mobile, otherwise will keep items on the same row. All included asset components will expand evenly to cover the width of the viewport.
   • Options added to define anchor ID, designate full-width, and set background color.
10. Nav Row
    • Layout used with the navigation components: "Anchor Link", "Anchor Link w/Image", "Nav Link", & "Nav Link w/Image" to create a navigation bar.
    • Options added to define tile above nav, anchor ID, designate full-width, and set background color.
11. Popular Categories
    • A layout used to create links to designated categories.
    • Options added to define heading text, anchor ID, designate full-width, and set background color.

1. Commerce Components
   • This is the standard list of Page Designer components. This includes OOTB components as well as custom architected components.
   • Anchor Link
     • Creates an anchor link to another section of the same page and is to be used specifically with the Nav Row layout component.
   • Anchor Link (w/ Image)
     • Creates an anchor link to another section of the same page and is to be used specifically with the Nav Row layout component, and includes the option to include an image.
   • Breadcrumbs
     • Renders manually defined breadcrumbs. Styles are dictated by the site's global breadcrumbs styling
     • "Home" breadcrumb renders by default. Renders up to 4 levels of breadcrumbs
   • Button
     • Basic button component useful for site navigation in all content areas
   • Content Tile
     • Renders a container with a Title and Image and the option to link the content.
     • Options added to define image, title, link, and set order of elements (Image First, Text Second || Text First, Image Second)
     • Sub-region capable of accepting other components. i.e. Button
   • Main Banner
     • Renders a full-width container to display a banner using a defined image, with a block of text and CTA button(s) below - and the flexibility to have text overlay the image and manipulate the placement.
   • Image Tile
     • A simple tile container to hold a linkable image.
   • Image with Text
     • Renders a defined image, with a block of text.
     • With option toggled, text can overlay image, and placement can be manipulated.
     • Includes a sub-region below text capable of accepting other components. i.e. Button
   • Nav Link
     • Creates a navigation link to another page. To be used with "Nav Row" layout specifically.
   • Nav Link (w/ Image)
     • Creates a navigation link to another page. To be used with "Nav Row" layout specifically. Offers the option to include an image.
   • Product Tile
     • Renders a product tile based on defined product ID. Styling matches global product tiles.
   • Spacer
     • Component used to increase the vertical and/or horizontal space between 2 components.
   • Textbox
     • Renders defined text with a container.
2. Dynamic Components
   • These components have a dynamic nature to them, meaning that they are inheriting some of their data from Business Manager attributes, or catalog/product data. Examples: Product Grid, PDP Layout, Category Banner
   • Dynamic Category Banner
     • Renders a category banner, based on defined category ID. Uses category attributes to populate the banner.
     • Allows manual override within component for all attributes.
     • Includes a sub-region below text capable of accepting other components. i.e. Button
   • Dynamic Product Detail Layout
     • Renders the default markup of the designated PDP ID page shopping section. i.e. Product Image Carousel, Name, Price, SKU, Attributes, Add to Cart, etc.
   • Dynamic Product Listing Layout
     • Renders the default product tile grid of the defined category ID.
3. Einstein Components
   • These components populate their data from configured recommenders from within Einstein.
   • Einstein Carousel: Recently Viewed
     • Configurable and flexible recommendation carousel to display the user's most recently viewed products.
   • Einstein Carousel: Category
     • Configurable and flexible recommendation carousel to display a pre-configured Einstein recommender based on category.
   • Einstein Carousel: Product
     • Configurable and flexible recommendation carousel to display a pre-configured Einstein recommender based on a product.