The View Pre-Decorated Product system page lets you showcase ready-made products in your store with an optimized layout for images, product details, and calls-to-action. This built-in page is part of every DecoNetwork website theme and is designed to help customers preview designs, read key product information, and either customize or add to cart—all without custom coding.
See an example of the View Pre Decorated Product page in the DecoNetwork demo store.
In this article
- Prerequisites
- Why use the View Pre-Decorated Product page
- Step 1: Open the Pre-Decorated Product page
- Step 2: Configure the widget
- Best-practice tips
- Troubleshooting
- FAQs
- Additional Resources
Prerequisites
Before customizing system website pages using the Website Editor, ensure the following:
- You have one of the following user roles:
- Websites Manager – This role allows you to manage all websites (both primary and affiliate) within the fulfillment center.
- Web Developer – This role allows you to manage the primary website for the account.
- Pre-decorated products have been added to your store. These are necessary to preview how products will appear on your website during editing.
Why use the View Pre-Decorated Product page
This page is purpose-built to highlight decorated products in a way that drives engagement and conversions. By configuring its layout and options, you can:
- Showcase designs effectively — Position imagery and thumbnails to suit your audience and devices.
- Streamline buying decisions — Place essential details like pricing, sizing, and shipping where they’re most useful.
- Encourage customization — Offer a clear choice between quick-buy and personalization actions.
- Promote related items — Display related products to increase order value.
- Boost shareability — Enable social sharing so customers can spread your designs organically.
1. Open the Pre-Decorated Product page
-
Open the Website Editor and click the PAGES button in the Website Editor Toolbar.
Pages Tab
-
Click on the + icon at the left of the Product tab to expand the Product pages menu.
System Pages - Product Tab
-
Select View Pre Decorated Product.
View Pre Decorated Product Page Tab
The View Pre Decorated Product page is displayed in the Content Area of the Website Builder. The image below highlights the sections of the View Pre Decorated Product page. Use this as a reference for configuring the placement of items on the page.
View Pre Decorated Product Page
Click the image to enlarge.
Step 2. Configure the widget
-
Hover the mouse pointer over View Pre Decorated Product widget, click on the down arrow beside the product icon to open the widget menu, and choose View Pre Decorated Product Settings.
View Pre Decorated Product Settings Menu Item
The View Pre Decorated Product Settings popup will be displayed, with the View Pre Decorated Product Properties Tab selected.
View Pre Decorated Product Settings Popup
-
Use the Properties tab to adjust layout, content, and buttons.
Image Settings
-
Image Panel Position: Set where the main image appears within the View Pre Decorated Product Widget container.
- Left
- Right
-
Image Panel Size: Set the size at which the decorated product image will be displayed.
- Small
- Medium
- Large
-
Image Thumbnails Position: Choose the position where the predecorated product preview thumbnails will be displayed.
- Left
- Right
- Top
- Bottom
-
Image Thumbnails Size: Choose the size at which the predecorated product preview thumbnails will be displayed.
- Small
- Medium
- Large
Customization options
-
Show Custom Fields: 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: Choose whether to display helper text for the custom product fields.
- Yes
- No
Shopper actions
- Load Designer Button Label: rename the customization action.
- Add to Cart Button Label: rename the Add to Cart action.
Customization options
- Show replace/clear actions for template assets: Choose whether to show the replace image and clear image links that appear below a graphic asset on the View Pre Decorated Product page.
-
Show Full Product Description: Choose whether the full blank product description will be visible. If 'No' is selected, the description will be cropped and a View Description link will be available which will expand the description section when clicked.
- Yes
- No
-
Show product views with no available decoration areas: Choose whether product views that do not have decoration areas will be visible.
- No: thumbnails for product views that have no decoration areas defined will be hidden.
- Yes: thumbnails for product views that have no decoration areas defined will be visible. Clicking on the thumbnail will display the large image preview for the view.
-
Hide all product views with no decorations added: Choose whether product views that do not have decorations added will be visible.
- No: thumbnails for product views that have no decorations added will be visible.
- Yes: thumbnails for product views that have no decorations added will be hidden. Clicking on the thumbnail will display the large image preview for the view.
Sharing
-
Show Social Sharing: Choose whether social sharing buttons will be shown for each item in the cart, allowing your customers to share the products they have purchased on their social media sites (i.e. Pinterest, Twitter, and Facebook) and via email.
- Tick the checkbox to show the social sharing buttons
- Un-tick the checkbox to hide the social sharing buttons
Product information placement
-
Product Name Position: Choose the position within the View Pre Decorated Product Widget container where the decorated product name will be displayed.
- Top of Page
- Properties Panel
-
Product Code Position: Choose an option for the display and placement of the product's code.
- Don't Show
- Top of Page
- Properties Panel
-
Product Brand Logo Position: Choose the position within the View Pre Decorated Product Widget container where the decorated product brand logo will be displayed.
- Don't Show
- Image Panel
- Properties Panel
-
Product Sizing Information Position: Choose the position within the View Pre Decorated 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: Choose the position within the View Pre Decorated 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: Choose the position within the View Pre Decorated Product Widget container where the decorated product discounts will be displayed.
- Don't Show
- Image Panel
- Properties Panel
- Bottom Panel
- Extra Details
-
Product Description Position: Choose the position within the View Pre Decorated Product Widget container where the decorated product description will be displayed.
- Don't Show
- Top of Page
- Image Panel
- Properties Panel
- Bottom Panel
- Extra Details
-
Product Description Position: Choose the position within the View Pre Decorated Product Widget container where the blank product description will be displayed.
- Don't Show
- Top of Page
- Image Panel
- Properties Panel
- Bottom Panel
- Extra Details
-
Blank Product Description Position: Choose the position within the View Pre Decorated Product Widget container where the blank product description will be displayed.
- Don't Show
- Image Panel
- Properties Panel
- Bottom Panel
- Extra Details
Related products
-
Related Products Position: Choose the position within the View Pre Decorated Product Widget container where the decorated product's related product images will be displayed.
- Don't Show
- Image Panel
- Properties Panel
- Bottom Panel
- Extra Details
-
Related Products Size: Choose the size at which the thumbnails of the related products will be displayed.
- 100x100
- 150x150
- 200x200
- 300x300
- 600x600
-
Show Related Products Full Name: Choose whether to display the full name of the related products.
- Yes: displays the full name of the related product.
- No: truncates the name of the related product to the width of the product thumbnail. An ellipsis (...) is appended to the end of the product name to indicate that it has been truncated.
Extra details & print quality
-
Extra Details Position: Choose the position within the View Pre Decorated Product Widget container where extra details for the decorated product will be displayed.
- Properties Panel
- Bottom Panel
-
Extra Details Display: Choose the style in which to display the extra details for the decorated product.
-
Tabs: displays each extra detail topic in a separate tab.
Extra Details - Tabs Display
Click the image to enlarge.
-
Blocks: displays each extra detail topic in content blocks.
Extra Details - Blocks Display
Click the image to enlarge.
-
Expandable Blocks: displays each extra detail topic in expandable blocks of content.
Extra Details - Expandable Blocks Display
Click the image to enlarge.
-
-
Print Quality Information Position: Choose the position within the View Blank Product Widget container where the print quality information will be displayed.
- Don't Show
- Image Panel
- Properties Panel
- Bottom Panel
- Extra Details
-
Image Panel Position: Set where the main image appears within the View Pre Decorated Product Widget container.
- Click OK.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Best-practice tips
- Lead with imagery: Put the image panel left on desktop; test top thumbnails for mobile-heavy audiences.
- Reduce scroll: Place shipping, sizing, and discounts in the Properties or Extra Details areas unless they’re primary to the purchase decision.
- Clarify actions: If offering both personalization and quick-buy, use distinct labels (e.g., “Personalize in Designer” vs. “Add to Cart”).
Troubleshooting
- I don’t see my custom fields. Ensure custom fields exist on the product, then enable Show Custom Fields (and Show Custom Fields Description if needed).
- Descriptions look truncated. Set Show Full Product Description to Yes, or move long content into Extra Details using Expandable Blocks.
- Related products don’t show. Add related items to the product and select a visible Position for the block.
FAQs
What’s the difference between “decorated” and “blank” descriptions?
“Decorated” describes the product with artwork; “Blank” is the underlying base product. You can place each in different areas.
Can I preview changes?
Yes. Use the Website Editor preview, then Publish to push live.
Additional Resources
- Configure the Design On Product System Page in the Website Editor
- Configure the Design On Product System Page in the Website Editor
- Decorated Products overview
Still have questions? Use the Search Tool at the top of the page to find more related guides. Need help? Click the icon to submit a support ticket—our Client Services team is ready to assist!
Comments
0 comments
Please sign in to leave a comment.