Storefront how-tos
Create commerce pages, update storefront content, or customize shopper features. Choose an author task to work with content and settings, or a developer task to change storefront code.
For authors
Section titled “For authors”Start here when your task involves authoring storefront content rather than changing code.
Pages and blocks
Section titled “Pages and blocks”| How-to | Result |
|---|---|
| Create a commerce page | Build a category page with commerce blocks and metadata. |
| Build a category page manually | Author a category page and its search engine optimization metadata. |
| Add a block to a page | Place and configure a supported Commerce or content block. |
| Add page metadata | Set the page’s title, description, and other page-level properties. |
| Apply section styling | Apply a supported style to the section around your blocks. |
Products and campaigns
Section titled “Products and campaigns”| How-to | Result |
|---|---|
| Preview a product | View live product data in the shared template and check a real product URL. |
| Feature a product on a campaign page | Display one product’s shopping controls on a campaign page. |
| Add supporting content to product pages | Place headings, images, or companion blocks around the shared product template. |
| Show enrichment content | Show supporting content only for selected products or categories. |
| Show targeted content | Show content to selected customer groups, segments, or cart-rule audiences. |
| Add product recommendations | Display a recommendation unit on a storefront page. |
Labels and experiments
Section titled “Labels and experiments”| How-to | Result |
|---|---|
| Change labels and placeholders | Update the words shoppers see in commerce blocks. |
| Create a page experiment | Connect an alternate page to the original and compare versions in preview. |
| Test alternate storefront labels | Give one experiment variant different labels without changing the original. |
Publishing and translation
Section titled “Publishing and translation”| How-to | Result |
|---|---|
| Copy content between projects | Copy storefront content to another Document Authoring project, then preview and publish it. |
| Translate storefront content | Translate documents into another language and hand off Commerce-specific checks. |
| Submit a storefront sitemap | Submit your sitemap to Google Search Console and check its processing status. |
Checkout agreements
Section titled “Checkout agreements”| How-to | Result |
|---|---|
| Add terms and conditions | Add agreement documents and checkbox labels to checkout. |
For authoring concepts and block settings, see the authoring guide and commerce block reference.
Use the page metadata and section metadata references when configuring page and section settings.
For developers
Section titled “For developers”Start here when your task involves changing storefront code. Each how-to describes the result you’ll build. Check its requirements before you begin.
Product and category pages
Section titled “Product and category pages”| How-to | What you’ll build |
|---|---|
| Add breadcrumbs to product and category pages | Show a breadcrumb trail on category and product pages. |
| Add gift options to a product page | Add gift options to the product page and save them to the cart. |
| Add a Notify Me button | Replace Add to Cart with a Notify Me button when an item is out of stock. |
| Generate category pages programmatically | Create category-page documents with a script and publish them in bulk. |
Cart and checkout
Section titled “Cart and checkout”| How-to | What you’ll build |
|---|---|
| Add a custom payment method | Integrate a third-party payment provider. |
| Add custom product lines to the cart summary | Add custom lines tied to products in the cart summary. |
| Add messages to the mini cart | Show inline feedback when items are added or updated in the mini cart. |
| Add payment buttons to checkout | Show PayPal, Apple Pay, or Google Pay buttons for the selected payment method. |
| Configure buy online, pick up in store | Build a flow that lets shoppers buy online and collect their order in a store. |
| Configure the cart summary | Restyle the cart summary layout and savings display. |
| Customize order summary lines | Change the lines shown in the cart’s order summary. |
| Enable product variation updates in the cart | Let shoppers change product variations from the cart and mini cart. |
| Implement multi-step checkout | Replace the default checkout with a multi-step flow. |
| Integrate address verification | Connect a third-party address verification service. |
| Use saved cards in checkout | Let shoppers pay with a saved card, using the pre-release versions required by this how-to. |
| Validate a shipping address | Confirm a suggested address before the order is placed. |
Accounts and wishlist
Section titled “Accounts and wishlist”| How-to | What you’ll build |
|---|---|
| Add stored payment methods to My Account | Show saved Payment Services cards on the My Account page. |
| Customize the address form layout | Rearrange the fields in the account address form. |
| Display an additional wishlist | Use a reference pattern for a separate list alongside the shopper’s main wishlist, with Save for Later as the example. |
| Validate a saved address | Confirm a suggested address when a shopper saves it. |
Orders
Section titled “Orders”| How-to | What you’ll build |
|---|---|
| Implement order cancellation | Let shoppers cancel an order after placing it. |
Search
Section titled “Search”| How-to | What you’ll build |
|---|---|
| Combine content and product search results | Show content and product results in one search experience. |
| Configure search redirects | Send specific search terms straight to a target page. |
Analytics
Section titled “Analytics”| How-to | What you’ll build |
|---|---|
| Instrument analytics events | Publish Adobe Client Data Layer events when you bypass or replace the drop-ins. |
| Publish an add-to-cart event | Publish an add-to-cart event from a custom add-to-cart action. |
| Publish a product page view event | Publish a product-page-view event from a custom product page. |