Getting started

Getting started as an author

Welcome to storefront authoring. Your storefront comes with ready-made Commerce blocks for product details, cart, checkout, and other shopping features. A new storefront can also start with sample pages to build from. Either way, your work goes into making the storefront look and sound like your brand.

Where you work

Your storefront brings together two kinds of work: content from authors and code from developers.

As an author, you work in Experience Workspace to edit the DA.live project, which begins with
starter content. Developers work in their favorite IDE to develop the storefront project, which
begins with starter code. The DA.live project supplies content to your storefront, and the
storefront project supplies code.

Your storefront combines content from the DA.live project with code from the storefront project.

Experience Workspace: Edit text, images, and supported block settings without changing the storefront code. Use the Layout, Content, or Split view to edit the same underlying page content.
Starter content: The sample pages that a new storefront’s content starts from.
DA.live project: Your team’s page content in Document Authoring (DA.live), where you find and manage pages.
Developers: Maintain the code for your storefront’s design and shopping behavior. See Who makes which change for when to ask them.
Your storefront: The brand-specific shopping experience your customers see.

Who makes which change

You make most content changes yourself. For anything that needs code, you work with your team.

You make content changes yourself. Page designers build blocks and layouts, and developers handle drop-ins and the Commerce connection.

Author (you): Content, block choices and settings, metadata, spacing, labels, and scheduling, all without code.
Page designer: Builds and styles blocks and layout options, and can connect an existing drop-in to a new Commerce block. Ask your team when you need a new layout option.
Developer: Adds and customizes drop-ins, changes shopping behavior, and helps connect the storefront to Commerce. Ask a developer when you need new shopping behavior.

See Author and developer tasks for the full list.

What’s on a storefront page

Every storefront page combines text and images you write directly on the page with blocks, reusable pieces that hold layouts and shopping features.

A storefront page contains content blocks, such as accordions, cards, and columns, and Commerce
blocks, such as product lists, cart, and checkout. Content blocks can hold your content: text,
images, and videos. Outside the page, Commerce data supplies product names, prices, images, and
videos to Commerce blocks.

Content blocks can hold your text, images, and videos. Commerce data supplies Commerce blocks with product names, prices, images, and videos.

Content blocks: Arrange content in the layouts your project provides, such as accordions, cards, and columns.
Your content: The text and images you add, on the page or inside content blocks. You can add videos too, in a video block that your team adds to the storefront once.
Commerce blocks: Add shopping features, such as product lists, cart, and checkout. You choose the block and its settings.
Commerce data: Product names, prices, images, and videos that your connected Commerce backend supplies to Commerce blocks. For example, a video added to a Commerce product appears in the product details gallery.

For example, a category page can combine a headline and promotional image with a Commerce block that shows a product list.

How you add a block

You add a block by creating a table in your document. The storefront turns that table into the block on the page.

Two views of the same page. In Content view, a table has a first row naming the commerce-cart
block, then two settings rows: Hide Heading is false and Checkout URL is /checkout. In Layout
view, the same block appears as a cart with a heading, a product row, and a checkout
button.

A block table in Content view renders as a block in Layout view. Its first row names the block, and the rows below set its options.

Content view: Shows your page as a document. A block table’s first row is the block name, such as commerce-cart.
Settings: The rows below the name, with a setting on the left and its value on the right.
Layout view: Shows the page as shoppers see it. Settings such as Hide Heading change what appears.

See Block table structure for the row types and Add a block to a page for the steps.

Create your first page

Get access: Ask your team for the DA.live link to your storefront’s content, editing and preview access, and a folder for your test page.
Create and edit a page: Follow Create your first commerce page to add metadata and a Commerce block to your test category page. Make the table edits in Experience Workspace’s Content view, then preview the result.

Find your next task

Choose an author how-to for a specific change, or explore these topics.

Build pages: Add blocks, configure metadata and layout, and change storefront labels.
Find a Commerce block: Look up blocks for B2C and B2B storefronts by task.
Enhance the storefront: Enrich product content and add experiments, personalization, recommendations, and terms and conditions.
Manage and publish: Schedule and migrate content, manage redirects and sitemaps, and understand platform limits.
Localize content: Translate authored content and prepare localized storefront pages.