Configure the Design On Product System Page in the Website Editor

The Design On Product system page lets shoppers preview a selected design—available in your store for decorating products—on a specific product. It displays the decorated product image, product details, and calls-to-action, giving customers a clear view of how the design looks before they choose to customize it or purchase it as is. Because it is a core system page, it is always enabled to ensure consistent functionality across your store.

In this article

• Prerequisites
• Why configure the Design On Product page?
• Step 1: Open the Design On Product page in the Website Editor
• Step 2: Access the View Design On Product widget settings
• Step 3: Configure image panel options
• Step 4: Configure text and button options
• Step 5: Save and publish your changes
• Additional Resources

Prerequisites

Why configure the Design On Product page?

Optimizing this page ensures customers can easily preview and interact with designs applied to products. By adjusting layout, image sizes, and interactive options, you can:

• Improve product presentation for higher engagement and conversions.
• Provide clear calls-to-action, guiding customers to customize or add to cart.
• Match the design preview layout to your brand’s visual style.
• Enhance usability across devices with thoughtful positioning of images and buttons.

Step 1: Open the Design On Product page in the Website Editor

1. Go to Admin → Websites and click Manage on the relevant store.
2. Click Edit Website to launch the Website Editor.

3. In the left panel, click PAGES.

   

   Pages Tab

4. Click on the + icon at the left of the Product tab to expand the Product pages menu.

   

   Expand Product Tab

5. Click on the Design On Product page tab.

   

   System Pages - Design on Product Tab

   The Design On Product page is displayed in the Content Area of the Website Builder.

   

   The Design On Product system page selected in the Website Editor

   Click the image to enlarge.

   

Step 2: Access the View Design On Product widget settings

1. Locate the View Design On Product widget on the page.
2. Hover over it and click the down arrow on the widget toolbar.

3. Select View Design On Product Settings from the dropdown menu to open the settings popup.

   

   Accessing the View Design On Product widget settings

   The View Design On Product Settings popup will be displayed, with the View Design On Product Properties Tab selected.

   
    

   View Design on Product Settings Popup

   

   View Design on Product Settings Popup

Step 3: Configure image panel options

1. In the settings popup, use the Image Panel Position dropdown to select where the product design image will appear within the View Design On Product widget container:
   • Left
   • Right
2. Choose an Image Panel Size that works best for your design:
   • Small
   • Medium
   • Large
3. Set the Image Thumbnails Position to specify where the design-on-product image thumbnail will appear within the View Design On Product Widget container:
   • Left
   • Right
   • Top
   • Bottom
4. Select the Image Thumbnails Size to define the display size of the design-on-product thumbnail image:
   • 100x100
   • 150x150
   • 200x200

Step 4: Configure interacation, label, and dislpay settings

1. Configure interaction and label settings.
   • Show Full Product Description: Choose whether to display the complete product description:
     • Yes
     • No
   • Allow Customize Design: tick this checkbox to allow customers to customize the design.
   • Load Designer Button Label: Customize the label text that appears on the Load Designer button.
   • Add to Cart Button Label: Customize the label text that appears on the Add to Cart button.
   • Show replace/clear actions for template assets:Choose whether to display the replace image and clear image links below graphic assets on the View Design on Product page.

   • Show Custom Fields: Choose whether to display custom product fields:

     Show Optional Product Custom Fields: Choose whether optional custom product fields will be displayed on the design on product page.

     Improvement implemented in V8.610.

     Required custom fields will always be shown, regardless of this setting, to ensure they can be filled out and do not block the ability to add a product to the cart.

     • Yes
     • No

     Custom fields are additional options customers can select when ordering, such as button color on a shirt.

   • Show Custom Fields Description: Choose whether to display descriptions for the optional custom fields:
     • Yes
     • No
2. Configure position settings.
   • Product Name position: Select where the decorated product name appears:
     • Top of Page
     • Properties Panel
   • Product Brand Logo Position: Choose where to display the product brand logo:
     • Don't Show
     • Image Panel
     • Properties Panel
   • Product Description Position: Choose where to display the product description:
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Product Sizing Information Position: Choose where to display sizing details:
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Product Shipping Information Position: Choose where to display shipping details:
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Product Discounts Position: Choose where to display discount information:
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Extra Details Position: Choose where to display additional product details:
     • Properties Panel
     • Bottom Panel
   • Extra Details Display: Select the style used to display the extra product details.

     • Tabs: displays each extra detail topic in a separate tab.

       

       Extra Details - Tabs Display

     • Blocks: displays each extra detail topic in content blocks.

       

       Extra Details - Blocks Display

     • Expandable Blocks: displays each extra detail topic in expandable blocks of content.

       

       Extra Details - Expandable Blocks Display

Step 5: Save and publish your changes

1. Click OK in the settings popup to apply changes.
2. Click Save in the Website Editor.
3. Click Publish to make your changes live.

4. Click the Publish button at the right of the Page Settings Bar to make your changes live.

   Note: Publishing changes updates the live store immediately. Preview before publishing to ensure correct layout.

Additional Resources

• View Pre-Decorated Product Page — Configure System Page Settings
• Website Editor Overview