How to Add Products and Designs to a Page

Adding products, designs, or categories to your website pages is a powerful way to guide customers through your storefront and improve their shopping experience. DecoNetwork’s drag-and-drop widgets make it easy to display blank products, pre-decorated products, or designs, along with flexible layout and display options to suit your store’s needs.

In This Article

• Prerequisites
• Why Add Product & Design Listings to Pages?
• How to Add Products, Designs, or Categories to a Page
• Best Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why Add Product & Design Listings to Pages?

Displaying products and designs directly on your pages helps customers quickly browse and take action without unnecessary navigation. You can tailor the experience based on how your customers prefer to shop.

• Improve navigation: Let customers browse products, designs, or categories directly from key landing pages
• Increase conversions: Reduce clicks required to reach products
• Enhance flexibility: Display blank products, pre-decorated items, or designs depending on your business model
• Create guided experiences: Let customers shop by category, then drill down into products or designs
• Optimize for all devices: Widgets are responsive and work across desktop and mobile

How to Add Products, Designs, or Categories to a Page

Step 1: Open the Page Editor

1. Go to Admin → Websites
2. Click Manage on the website you want to edit
3. Go to Edit Website → Website Pages
4. Click Pages
5. Select the page you want to edit

Step 2: Add a Listing Widget

1. Click Widgets
2. Choose one of the following widgets:
   • Blank Product Listing
   • Decorated Product Listing
   • Design Listing
   • Category Listings (for products or designs)
3. Drag and drop the widget onto your page

Step 3: Configure Display Settings

Each listing widget includes flexible display options. Depending on the widget, you can configure:

• Show Name
• Image Size
• Show Price
• Display Available Colors
• Hover vs Always Visible Options
• Image Shape/Layout

Step 4: Choose How Customers Browse

You can control how customers interact with your listings:

• Direct Listings: Show products or designs immediately
• Category Listings: Let customers choose a category first, then browse within it

Step 5: Display Categories as Tabs (Optional)

1. Edit your listing widget settings
2. Enable Display Categories as Tabs
3. Select which categories to include, or choose a group (e.g., primary categories)

Step 6: Save Your Changes

1. Click Save
2. Preview your page to confirm the layout and behavior

Best Practice Tips

• Use category tabs to showcase multiple product types without overwhelming customers
• Keep layouts clean. Avoid adding too many listings on one page
• Use design listings when you want customers to start with artwork first
• Use product listings when customers are more product-focused (e.g., apparel first)
• Ensure consistent image sizes and display settings across widgets

Troubleshooting

• No products are displaying:
  Ensure products or designs are enabled and available in your store.
• Categories are empty:
  Check that products or designs are assigned to those categories.
• Layout looks inconsistent:
  Review widget display settings (image size, visibility options).
• Tabs not appearing:
  Confirm that Display Categories as Tabs is enabled in widget settings.

FAQs

• What’s the difference between blank and decorated product listings?
  Blank products allow customers to design from scratch, while decorated products come with pre-applied designs.
• When should I use design listings?
  Use design listings when you want customers to choose artwork first, then select a product.
• Can I mix different listing types on one page?
  Yes, you can combine multiple widgets to create a custom browsing experience.
• Do these widgets work on mobile devices?
  Yes, all listing widgets are responsive and optimized for different screen sizes.

Additional Resources

• Widgets Tab - Website Editor
• Configuring the Blank Product Listing Widget
• Decorated Product Listing Widget
• Design Listing Widget
• Blank Product Filter Widget