---
schema_version: "1"
id: 11ed1a3516cdacc2fbecae15e81c031d14e9e64d8e315d3abbf01d460f40e234
title: Preview Page Designer Pages
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/cc/264-0-0/b2c_preview_pd_page_task.md
canonical_url: https://help.salesforce.com/s/articleView?id=cc.b2c_preview_pd_page_task.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2a67ba0f73ae17c8690427dc095f6ba7b41f566a6363740af52ed7213d0af00d
description: Check how a B2C Commerce Page Designer page looks for specific customers on certain dates and how the page looks when a customer gets to the page using a URL that specifies a particular source code. You can also preview how the page appears on different devices, with custom pixel dimensions, and in landscape or portrait orientation.
products:
  - Commerce
  - B2C Commerce
release: "264"
---
# Preview Page Designer Pages

Check how a B2C Commerce Page Designer page looks for specific customers on certain dates and how the page looks when a customer gets to the page using a URL that specifies a particular source code. You can also preview how the page appears on different devices, with custom pixel dimensions, and in landscape or portrait orientation.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/images/icon_note.png)

Note You can’t preview Page Designer pages on production environments.

1. To see how the page looks for specific customers on certain dates, and how the page looks when a customer gets to the page using a URL that specifies a particular source code, open a page in Edit view and click the view icon. ![Preview function.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/cc/b2c_merchandiser_administrator/images/b2c_page_designer_preview_icon.png)
2. Select the customer groups and dates and the source code.
3. For dynamic pages, select a value for the dynamic attribute.
    
    Dynamic pages are typically Product List or Product Detail pages for which the content changes based on which product or category renders.
4. Click **Apply**.
    
    When preview settings are configured for a page, a small green circle appears next to the preview icon. ![Preview function.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/cc/b2c_merchandiser_administrator/images/b2c_page_designer_prev_icon_active.png)
5. To see how the page looks on different devices, click the viewport icons.![Shows laptop, horizontal mobile, and vertical mobile screens.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/cc/b2c_merchandiser_administrator/images/b2c_page_designer_view_ports.png)
6. To adjust the dimensions of the preview, click the edit icon ![Edit icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/cc/b2c_merchandiser_administrator/images/b2c_page_designer_edit_icon_small.png) and enter the width and height in pixels.
    
    In some cases, if you enter values that are larger than the pixel dimensions of the screen on which you’re working, the width and height doesn’t scale correctly. If you enter custom values for the dimensions, in some cases, you can’t correctly position components on the page. To automatically calculate the pixel values, click the edit icon again.
7. To switch between portrait and landscape, click the rotate icon. ![Image that shows rotating arrows to indicate rotating the image.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/cc/b2c_merchandiser_administrator/images/b2c_page_designer_rotate_icon.png)
8. To exit preview, click **Back to Edit View**.