How-tos for authors and developers
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.
How-tos for authors
Section titled “How-tos 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.
How-tos for developers
Section titled “How-tos 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. |