Preview your changes

Before you publish any changes, preview them so you can see how they will appear on your live store.

Nothing you do in a preview session affects your production storefront.

To launch a preview session at any time, click the Preview button. The preview session launches in a new browser tab or window. If your instance supports more than one store, select the store to preview from the drop-down list at the top of the preview window. To end the preview session, simply close that tab or window.

You can apply the following settings to a preview session:

• Audience shows how the store looks to specific groups of shoppers.
• Account shows how an account-based store looks to shoppers associated with a specific account.
• Date shows how the store looks at a specified future date and time.
• Viewport shows how the store’s pages look on different devices, such as desktops and mobile phones.

Preview a store by audience

Audiences help you target content to certain groups of shoppers. Previewing a store as a member of an audience shows how the store looks to a shopper who is a member of the audience. See Define Audiences to learn how to create and use audiences.

To preview a store as the member of an audience:

1. Click the Preview button to launch a new preview session in a new tab or window.
2. Click the Site Preview Settings icon.
3. On the Display tab, click the Audience box and select an audience from the list. You can filter the list by typing or pasting some text in the Audience box.

4. You can add more than one audience, but you can select only one at a time.

5. Click Apply.

If you select a disabled audience, Commerce treats it as enabled during the preview session.

If you select more than one audience, Commerce displays the content based on the priority of each audience assigned to a content variation slot. See Customize slotsfor more information.

Preview a store by viewport

Previewing a store by viewport lets you see how the store’s pages look on different devices, such as mobile phones, tablets, and laptops.

To preview a store by viewport:

1. Click the Preview button to launch a new preview session in a new tab or window.
2. Click the Site Preview Settings icon.
3. On the Display tab, select a viewport breakpoint to preview.

   XS (extra small resolutions)

   SM: (small resolutions)

   MD: (medium resolutions)

   LG: (large resolutions)

4. Click Apply.

Preview a store by date and time

Previewing a store by date and time lets you see how the store’s pages look if your changes were published at a future date and time. The date and time filter allow you to view the following types of content:

• Promotions and promotional content scheduled for a future date and time.
• Widgets configured in slots against a future date and time.

Commerce evaluates preview dates and times based on the date and time on the server.

To preview a store by date and time:

1. Click the Preview button to launch a new preview session in a new tab or window.
2. Click the Site Preview Settings icon.
3. In the Date field, click the calendar icon and select a date. Click the clock icon to set the hour, minute, and AM/PM portions of the time. .
4. Click Apply.