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 customizations to a preview session:

• Preview a store by audience shows how the store looks to specific groups of shoppers.
• Preview a store by viewport shows how the store’s pages look on different devices, such as laptops, tablets, 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.