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
• Best-practice tips
• Troubleshooting
• FAQs
• 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 interaction, label, and display 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.

Best-Practice Tips

• Prioritize the design preview: Use a Medium or Large image panel size so customers can clearly see how the design looks on the product. This is especially important for apparel and promotional items with fine details.
• Keep calls-to-action clear and concise: Customize the Load Designer and Add to Cart button labels to match your brand tone while still clearly describing the action.
• Enable customization only when appropriate: If a design should be sold as-is, leave Allow Customize Design unchecked to avoid customer confusion.
• Use Extra Details strategically: Display sizing charts, shipping information, and discounts in the Bottom Panel or Extra Details area to keep the main preview uncluttered.
• Test on mobile: After publishing changes, preview the page on smaller screens to ensure image panels, thumbnails, and buttons remain easy to use on mobile devices.

Troubleshooting

• The Design On Product page does not reflect my changes
  Ensure you clicked Save and then Publish in the Website Editor. Changes are not applied to the live store until published.
• The Customize button is missing
  Check that Allow Customize Design is enabled in the View Design On Product widget settings and that the design supports customization.
• Custom fields are not showing
  Required custom fields will always appear, but optional fields only display if Show Optional Product Custom Fields is set to Yes. Confirm the fields are correctly configured on the product.
• Images or thumbnails look misaligned
  Try adjusting the Image Panel Position, Image Thumbnails Position, or thumbnail size to better suit your layout and content length.
• Brand logo or product details are missing
  Verify the corresponding position settings (brand logo, description, sizing, shipping, or discounts) are not set to Don’t Show.

FAQs

• Can I disable the Design On Product page?
  No. This is a core system page and is always enabled to ensure consistent behavior when customers view designs applied to products.
• Do changes apply to all stores?
  Changes apply only to the specific store you are editing. Primary and affiliate stores can each have their own Design On Product page configuration.
• Will required custom fields ever be hidden?
  No. Required custom fields are always displayed so customers can complete the order without errors.
• Does this page affect SEO?
  While primarily a conversion-focused page, clear product names, descriptions, and structured layouts can help improve usability and overall site quality signals.
• Can I preview changes before publishing?
  Yes. Use the Website Editor preview to review layout and behavior before clicking Publish.

Additional Resources

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