Explore the Structure
The storefront project is a collection of blocks (Content components, widgets, and drop-in components), 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 drop-in components
Directorystorefront-cart/ — minified/optimized drop-in code
- …
Directorystorefront-checkout/ — minified/optimized drop-in code
- …
Directorystorefront-order-confirmation/ — minified/optimized drop-in code
- …
Directorystorefront-pdp/ — minified/optimized drop-in 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 — Drop-in endpoints and initializers/loaders
- scripts.js — Loads blocks, fonts, and lazy-styles
- others…
Directorystyles/ — CSS files for drop-in 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 drop-in components
Vocabulary
Commerce drop-in components
Full-featured shopping components that turn websites into storefronts. [Drop-in components](/discovery/architecture/#drop-in components-and-widgets) 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 drop-in components into the Edge Delivery Services architecture of JavaScript blocks and document-based authoring. Commerce blocks are the components that provide the content and layout for commerce pages in the storefront.
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 to see how each boilerplate page has a corresponding Commerce block, which wraps the drop-in (or widget) that provides the block with its features and functions.
Relationship between the Commerce blocks and drop-in components
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 drop-in/widget code that powers the block.