Configuring the Product - Design On Product system page settings

The Design On Product page is a system page that lets you view the details of a design on a particular product. System pages are pages that cannot be turned off as they serve a necessary function in your web store, such as website authentication or product viewing. Click here to see an example of the Design On Product page in the DecoNetwork demo store.

You can customize the Design On Product page by configuring the display properties, layout, and design options via the page settings in the Website Editor. Access the page settings by going to the SYSTEM PAGES section in the PAGES tab of the Website Editor.

To configure the Design On Product system page settings:

1. Click on the PAGES button in the Website Editor Toolbar.
   
2. Click on the + icon at the left of the Product tab to expand the Product pages menu.
   
3. Click on the Design On Product page tab.
   

   The Design On Product page is displayed in the Content Area of the Website Builder. The image below highlights the sections of the Design On Product page. Use this as a reference for configuring the placement of items on the page.

   

   Click the image to enlarge.

   

4. Mouse over the View Design On Product Widget, then click on the down arrow beside the product icon.
5. Choose the View Design On Product Settings item from the drop-down menu.
   

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

   
6. Configure the settings for the Design On Product Widget.
   • Image Panel Position: lets you choose the position within the View Design On Product Widget container where the image with the design on the product will be displayed.
     • Left
     • Right
   • Image Panel Size: lets you choose the size at which the image with the design on the product will be displayed.
     • Small
     • Medium
     • Large
   • Image Thumbnails Position: lets you choose the position within the View Design On Product Widget container where the design on product view image thumbnail will be displayed.
     • Left
     • Right
     • Top
     • Bottom
   • Image Thumbnails Size: lets you choose the size at which the thumbnail image of the design on the product will be displayed.
     • 100x100
     • 150x150
     • 200x200
   • Show Full Product Description: lets you choose whether to display the full description provided for the product.
     • Yes
     • No
   • Allow Customize Design: tick this checkbox to allow the customer to customize the design.
   • Load Designer Button Label: lets you modify the name that will appear on the Load Designer button.
   • Add to Cart Button Label: lets you modify the name that will appear on the Add to Cart button.
   • Show replace/clear actions for template assets: lets you choose whether to show the replace image and clear image links that appear below a graphic asset on the View Design on Product page.
   • Show Custom Fields: lets you choose whether custom product fields will be displayed.
     • Yes
     • No

     Custom fields are additional product options that the customer can choose from when they order a product, such as the choice of button color on a shirt.

   • Show Custom Fields Description: lets you choose whether the description for custom product fields will be displayed.
     • Yes
     • No
   • Product Name position: lets you choose the position within the View Design On Product Widget container where the decorated product name will be displayed.
     • Top of Page
     • Properties Panel
   • Product Brand Logo Position: lets you choose the position within the View Design On Product Widget container where the decorated product brand logo will be displayed.
     • Don't Show
     • Image Panel
     • Properties Panel
   • Product Description Position: lets you choose the position within the View Design On Product Widget container where the decorated product description will be displayed.
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Product Sizing Information Position: lets you choose the position within the View Design On Product Widget container where the decorated product sizing information will be displayed.
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Product Shipping Information Position: lets you choose the position within the View Design On Product Widget container where the decorated product shipping information will be displayed.
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Product Discounts Position: lets you choose the position within the View Design On Product Widget container where the decorated product discounts will be displayed.
     • Don't Show
     • Image Panel
     • Properties Panel
     • Bottom Panel
     • Extra Details
   • Extra Details Position: lets you choose the position within the View Design On Product Widget container where extra details for the decorated product will be displayed.
     • Properties Panel
     • Bottom Panel
   • Extra Details Display: lets you choose the style in which to display the extra details for the decorated product.
     • Tabs: displays each extra detail topic in a separate tab.
       
     • Blocks: displays each extra detail topic in content blocks.
       
     • Expandable Blocks: displays each extra detail topic in expandable blocks of content.
       
7. Click OK.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.