Navigation

Getting Started

How-To Help Videos

Admin Settings

Business Hub

Customize Your Store

Customer Account Area

FAQs & Troubleshooting

Other Resources

  1. DecoNetwork Help
  2. Website Editor
  3. Adding and Configuring Widgets

Shopping Cart Widget

Avatar
Lee Prazner
Updated

The Shopping Cart Widget lets you add a shopping cart panel to your website so customers can review items, view order details, and continue toward checkout from the page where the widget is displayed.

Use this widget when you want to give customers a visible cart summary outside the standard checkout flow. The settings you configure control how cart information is presented, including item quantities, product details, pricing, thumbnails, social sharing, and checkout links.

In This Article

Prerequisites

  • You must have Admin, Websites Manager, or Web Developer permission.

Why Use the Shopping Cart Widget?

The Shopping Cart Widget gives customers a clear view of their cart contents and provides a pathway toward checkout. This helps keep the buying process visible and easy to follow while customers continue browsing or reviewing their order.

The widget settings act as display instructions for the website. Once configured and published, DecoNetwork uses those settings to determine what cart details customers see and how they progress from cart review to checkout.

Add a Shopping Cart Widget to Your Website

  1. Click on the WIDGETS button in the Website Editor Toolbar.
  2. In the Widgets tab, browse to the BUSINESS section.

  3. Locate the Shopping Cart Widget.

    ShoppingCartWidgetButton.png

    Shopping Cart Widget in the Business section of the Widgets tab.

  4. Click and drag the Shopping Cart Widget onto your website page.

    You can insert the Shopping Cart Widget:

    • Within rows
    • Within columns
    • Above or below existing widgets

    The Shopping Cart Settings popup opens.

    Shopping_Cart_Widget_Settings_Popup.png

    Shopping Cart Settings popup.

Configure Shopping Cart Widget Settings

  1. In the Shopping Cart Settings popup, configure the available settings:

    • Title: lets you specify the title that will appear in the header area for the shopping cart panel.

      Use a short, clear title and empty cart message. These labels help customers understand where they are in the shopping process and what action to take next.
    • Empty Message: lets you specify the title that will appear when the shopping cart is empty.
  2. Click OK to apply the changes.
  3. Click Save.
  4. Click Publish on the right of the Page Settings Bar.

Configure Design Settings

Use the Design tab to control how cart items, quantities, summaries, prices, links, and product details are displayed.

  1. Double-click on the Shopping Cart Widget.

  2. Click on the Design tab.

    Shopping Cart Widget Settings Design tab

    Design settings for a Shopping Cart Widget added to a page.

    The design settings for a Shopping Cart Widget you add yourself differ slightly from the default Shopping Cart Widget on the Checkout Confirm system page. The Checkout Confirm page includes additional Qty Panel settings.

    Shopping Cart Widget Settings Popup Design Tab - Confirm Page

  3. Configure the Design settings as required.

    Quantity Settings

    • Show Qty: lets you choose an option for displaying the quantity ordered of each item in the cart:

      • None: will not display the quantity ordered.
      • Next to Thumbnail: will display the quantity ordered next to the product thumbnail, before the product name.

      • Over Thumbnail: will display the quantity ordered over the top-right corner of the product thumbnail.

        Click on the brush icon to configure the font style for the product code using the Font popup. Click here for instructions.

      Qty Panel Settings

      The Qty Panel settings are available only in the default Shopping Cart Widget on the Checkout Confirm system page.

      These settings let you configure the style settings of the indicator of the quantity ordered.

      Quantity Panel

      Quantity Panel displayed over a product thumbnail.

      Click on the brush icon to configure the font style settings for the quantity panel.

      Quantity_Panel_Settings_Popup.png

      Quantity Panel Settings popup.

      • Background Color: lets you background color of the quantity indicator panel.
      • Border Width: lets you specify the line thickness of the quantity indicator in pixels. Enter a value between 0 and 20.
      • Border Color: lets you specify the color of the quantity indicator's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
      • Border Radius: lets you specify the roundness of the corners of the quantity indicator's border in pixels. Enter a value between 0 and 100.
      • Width: lets you specify the width of the quantity indicator panel in pixels. Enter a value between 5 and 50.
      • Height: lets you specify the height of the quantity indicator panel in pixels. Enter a value between 5 and 50.

      Summary Settings

      Show Summary: lets you choose whether a shopping cart summary is displayed.

      • None: will display not display the shopping cart summary.
      • Show Simple Summary: will display a simple version of the shopping cart summary.

      • Show Detail Summary: will display a detailed version of the shopping cart summary.

        Click on the brush icon to configure the style settings for the detail summary. The Settings popup for the detail summary will be displayed.

        Detail_Summary_Style_Settings.png

        • label: lets you edit the style settings for the label.

          Click on the brush icon to edit the style settings using the Font Popup. Click here for instructions.

        • Total: lets you edit the style settings for the total.

          Click on the brush icon style settings for the total. Click here for instructions.

        • Extra Details: lets you edit the style settings for the extra details.

          Click on the brush icon style settings for the extra details. Click here for instructions.

      Cart Item Display Settings

      • Show Social Sharing: when this checkbox is ticked, 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 via email.

      • Show Price: when this checkbox is ticked, the product price will be shown for each item in the cart.

        Click on the brush icon style settings for the price. Click here for instructions.

      • Link to checkout: when this checkbox is ticked, a link will be available allowing your customers to check out.

        Click on the brush icon to configure the style settings for the checkout link. The Settings popup for the checkout link will be displayed.

        Product_Code_Settings_Popup.png

        Checkout link style settings.

        • Text: lets you edit the font style and the color of the text used in the checkout link.
          • Click on the font name to edit the font style using the Font Popup. Click here for instructions.
          • Click on the color spot to edit the text color using the Color popup. Click here for instructions.
        • Background Color: lets you specify the background fill color of the checkout link. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
        • Align: lets you configure the horizontal alignment of the checkout link within the shopping cart.
        • Width: lets you specify the width of the checkout link container as a percentage of the shopping cart container width.
        • Vertical Padding: sets the height of the checkout link, using the em unit of measurement. An em is a value relative to the size of the font. Enter a value between 0.6 and 6. For example, 2em means 2 times the size of the font.
        • Border Width: lets you specify the line thickness of the checkout link's border in pixels. Enter a value between 0 and 20.
        • Border Color: lets you specify the color of the checkout link's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
        • Rounded corners: lets you specify the roundness of the corners of the checkout link's border in pixels. Enter a value between 0 and 100.
        • Icon: lets you choose an icon for the checkout link. Click on the icon symbol to bring up the icon chooser popup.
        • Icon Color: lets you set the color of the checkout link's icon. Click on the color spot to select a color using the Color popup. Click here for instructions.
        • Icon Size: lets you specify the size of the checkout link's icon as a factor of the line height. Use the slider or enter a value between 0.3 and 4.
        • Icon Margin: lets you specify the right margin of the icon as a factor of the line height. Use the slider or enter a value between 0.3 and 4.
        • Shadow: sets the appearance of the shadow, if any, added to the checkout link.
          • None: No shadow is displayed.
          • On: Adds a consistent shadow around the entire border of the checkout link container.
          • Custom: Lets you configure a custom shadow. Click here for instructions on how to configure a custom shadow.

        • Edit Hover: lets you configure the appearance of the product code when you move the mouse over it. Tick the checkbox to enable the hover settings.

          Edit_Hover.png
          • Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
          • Hover Text Color: sets the color of the product code's text on hover.
          • Hover Background Color: sets the background color of the product code on hover.
          • Hover Border Color: sets the border color of the product code on hover.
          • Hover Icon Color: sets the color of the product code's icon on hover.

      Edit Link Settings

      • Link to edit item: when this checkbox is ticked, an edit item link will be available, allowing your customers to edit the item.

        Click on the brush icon to configure the font style for the edit link using the Font popup. Click here for instructions.

      Produt Details Settings

      • Show Product Name: when this checkbox is ticked, the name of the product will be shown for items in the cart.

        Click on the brush icon to configure the font style for the product name using the Font popup. Click here for instructions.

      • Show Product Code: when this checkbox is ticked, the code of the product will be shown for items in the cart.

        Click on the brush icon to configure the font style for the product code using the Font popup. Click here for instructions.

      • Show Product Options: when this checkbox is ticked, chosen product options, such as size and color, will be shown for items in the cart.

        Click on the brush icon to configure the font style for the product options using the Font popup. Click here for instructions.

      • Show Product Thumbnail: when this checkbox is ticked, the product thumbnail will be shown for items in the cart.
      • Thumbnail size lets you select the dimensions of the product thumbnail in pixels.

      • Heading lets you configure the heading font and color.

        Click here for instructions on how to edit the heading font.

        Click on the color spot to edit the heading color. Click here for instructions on how to use the Color Popup.

  4. Click OK, once you have finished configuring the settings.
  5. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

Best-Practice Tips

  • Keep the cart display focused. Show the details customers need to confirm their order, such as product name, options, quantity, price, and checkout link.
  • Use Show Detail Summary when customers need a clearer breakdown before proceeding to checkout.
  • Use a prominent checkout link style so customers can easily continue the order process.
  • Preview the page after publishing to confirm the widget layout works well on desktop and mobile screen sizes.

Troubleshooting

The Shopping Cart Widget is not visible on the live website

  • Confirm that the page was saved and published after the widget was added.
  • Check that the widget was placed in a visible row, column, or content area.
  • Refresh the live page or clear browser cache if the old version of the page is still loading.

Cart details are not showing as expected

  • Open the widget’s Design tab and confirm the relevant display options are selected.
  • Check settings such as Show Price, Show Product Name, Show Product Options, and Show Product Thumbnail.
  • Open the widget’s Design tab.
  • Confirm that Link to checkout is selected.
  • Review the checkout link styling to make sure the text, background, and border colors are visible on the page.

FAQs

Can I add the Shopping Cart Widget anywhere on my website?

You can add the widget to supported content areas, including rows, columns, and above or below existing widgets.

Why are the Checkout Confirm page settings different?

The default Shopping Cart Widget on the Checkout Confirm system page includes additional Qty Panel settings because that page is part of the checkout workflow.

Do I need to publish after changing the widget settings?

Yes. Click Save and then Publish for your changes to appear on the live website.

Can customers edit cart items from the widget?

Yes, if Link to edit item is enabled. This displays an edit item link customers can use to make changes to cart items.

Additional Resources

Still have questions? Use the Search Tool at the top of the page to find more related guides. Need help? Click the Help Icon.png to submit a support – our Client Services team is ready to assist!

Related articles

Comments

0 comments

Please sign in to leave a comment.