How do I use the Online Store Manager’s Quick Design Bar?

The 3dcart Online Store Manager, Quick Design Bar is a front-end design toolbar that allows store administrators to easily change between templates and hide or unhide elements. You can also add products and categories, and much more. The built-in “Drag ‘n’ Drop” feature allows moving elements between the left and right bars of the website without having to modify the HTML!

To access the Quick Design Bar:

  1. Go to Settings ->Design ->Themes & Styles
  2. Click on “Drag ‘n’ Drop Editing”

In most cases, you can also get to the Quick Design Bar by clicking on “View Store” from your Online Store Manager to view the design bar at the bottom of the page.

The Quick Design Bar will display at the bottom of your store’s page only if you are logged into the Online Store Administrator. While logged out of your store’s admin, the regular page will display. Furthermore, to view the Quick Design Bar, you will need to be viewing the store using the same base URL as your store’s Online Store Manager.

The Quick Design Bar will contain 3 main icons:

  • Design Editor
    Use this to make quick design changes to your site.
  • Content Editor
    Here you can make quick changes to the various content areas of your pages. For example, the header and footer, SEO settings and more.
  • Product Editor
    Use this icon to quickly add, or modify your products.

When viewing individual products with the Quick Design Bar, you will also have a fourth icon:

  • Quick Editor
    This fourth icon will allow you to make quick changes to your products and categories

Design Editor

The first icon will take you to the Design Editor. This interface will allow you to select and apply alternate themes to your site as well as dynamically editing various aspects of the design’s layout such as screen width and navigation elements. Furthermore, the interface will link to your site’s template and CSS editors and apply changes to those aspects in real-time.

The Design Editor will also allow you to “Drag ‘n’ Drop” elements of your site design’s left and right banners without HTML editing! To use this powerful feature, simple click on the “Drag ‘n’ Drop Mode” button use the element’s manipulation nodes to move them to whichever bar you’d like.

Changes made in this interface will be live on the site once the design editor is closed

Content Editor

This second icon will allow you to make changes to your site’s content areas. It can be used to make real-time changes to your home page, add new pages, edit your Header and Footer and SEO settings. You can even use the content editor to manage and add blog postings!

Product Editor

Use the third icon to get to the Product Editor. With this tool you can add new Categories, Products or link to your existing items to edit them as needed.

Quick Editor

When viewing an individual product or category on your page, you will have access to the fourth icon of your site’s Quick Design Bar. This icon takes you to the Quick Editor. Use this interface to make real-time changes to the products as you’re viewing them! Make the item a home special instantly. Manage options for the product. Change the price all on the same page. You can even view and change the product’s images as needed – all while actually viewing the page.

The addition of the Quick Design Bar should allow you to make changes to your site as necessary and have them apply instantly so you can concentrate more of your time on the business aspects of your store.