Explore the Structure
The storefront project is a collection of blocks (Content components, widgets, and dropins), scripts, and styles designed for amazing performance, easy customizations, and rapid content development.
Big picture
The file structure of the storefront boilerplate is shown here. Detailed descriptions are scheduled to be added before our April release.
Directoryblocks/ — Content and Commerce blocks
Directorycards/ — Content block
- cards.css — CSS classes
- cards.js — JavaScript decorator
Directorycolumns/ — Content block
- columns.css — CSS classes
- columns.js — JavaScript decorator
Directorycommerce-account/ — Commerce block
- commerce-account.css — CSS classes
- commerce-account.js — JavaScript decorator
Directorycommerce-cart/ — Commerce block
- commerce-cart.css — CSS classes
- commerce-cart.js — JavaScript decorator
Directorycommerce-checkout/ — Commerce block
- commerce-checkout.css — CSS classes
- commerce-checkout.js — JavaScript decorator
Directorycommerce-login/ — Commerce block
- commerce-login.css — CSS classes
- commerce-login.js — JavaScript decorator
Directorycommerce-order-confirmation/ — Commerce block
- commerce-order-confirmation.css — CSS classes
- commerce-order-confirmation.js — JavaScript decorator
Directoryfooter/ — Content block
- footer.css — CSS classes
- footer.js — JavaScript decorator
Directoryfragment/ — Content block
- fragment.css — CSS classes
- fragment.js — JavaScript decorator
Directoryheader/ — Content block
- header.css — CSS classes
- header.js — JavaScript decorator
Directoryhero/ — Content block
- hero.css — CSS classes
- hero.js — JavaScript decorator
Directoryproduct-details/ — Commerce block
- product-details.css — CSS classes
- product-details.js — JavaScript decorator
Directoryproduct-list-page/ — Commerce block
- product-list-page.css — CSS classes
- product-list-page.js — JavaScript decorator
Directoryproduct-teaser/ — Commerce block
- product-teaser.css — CSS classes
- product-teaser.js — JavaScript decorator
Directoryfonts/ — Default fonts
- roboto-bold.woff2
- roboto-regular.woff2
Directoryicons/ — SVG icons
- caret-down-fill.svg
- more…
Directoryscripts/ — JavaScript files that provide core site functions and connections to Commerce backend services
Directory__dropins__ — Imported dropins
Directorystorefront-cart/ — minified/optimized dropin code
- …
Directorystorefront-checkout/ — minified/optimized dropin code
- …
Directorystorefront-order-confirmation/ — minified/optimized dropin code
- …
Directorystorefront-pdp/ — minified/optimized dropin code
- …
Directorywidgets/ — Imported widgets
- LiveSearchAutocomplete.js — For site search field in nav bar
- search.js — For Product List Page
- aem.js — AEM site functions
- commerce.js — Commerce backend GraphQL queries
- dropins.js — Dropin endpoints and initializers/loaders
- scripts.js — Loads blocks, fonts, and lazy-styles
- others…
Directorystyles/ — CSS files for dropin design tokens, fonts, deferred styles
- fonts.css — Default font styles
- lazy-styles.css — Global styles loaded post LCP
- styles.css — Global site design tokens and styles
Directorytools/ — Commerce Picker code and Sidekick configuration file
Directorypicker/ — Picker project code
- project-files… — Contains Catalog Services GraphQL queries for categories and products
Directorysidekick/ — Sidekick configuration
- config.json — Configuration settings for Commerce Picker, including Picker button title
- fstab.yaml — Connects the code to the content using the URL and ID to your Google Drive or SharePoint folder
- head.html — Includes @dropin importmap, aem.js, scripts.js, and styles.css
- helix-query.yaml — Defines the path and properties for your enrichment blocks
- package.json — Includes aem-cli, @dropins/tools, and the currently integrated dropins
Vocabulary
Commerce dropins
Full-featured shopping components that turn websites into storefronts. Dropins are not primitive components, like Carousels and Galleries. They provide the entire storefront shopping experience for a website using pages and other commerce features.
Commerce blocks
The integration of Commerce dropins into the Edge Delivery Services architecture of JavaScript blocks and document-based authoring.
Content blocks
The Edge Delivery components that provide the content and layout for non-commerce pages in the storefront. These include Cards, Columns, Headers, Footers, and many more. Visit the Adobe Experience Manager Block Collection section for the details.
Start exploring
Run your storefront locally using the npm start command and use the table below see how each boilerplate page has a corresponding Commerce block which wraps the dropin (or widget) that provides the block with its features and functions.
Relationship between the Commerce blocks and dropins
In the following table, the first column of links won’t resolve unless you have your storefront running locally on port 3000. The second column links to the Commerce block code in the boilerplate repository, and the third column links to the dropin/widget code that powers the block.
*Dropins marked as In Development have placeholders in the current Commerce boilerplate.