HOWTO: Edit Your Site while browsing (Live Design™ Mode)


Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.

While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.

 

Live Design™

Edit your website while you browse (even on your tablet).  Live Design allows you to quickly customize the look and feel of your site. You can edit some (not all) colors, fonts, backgrounds, widgets, site content, and page settings without needing to know any HTML or CSS.

            •           Change CSS styling for your site

            •           Move widgets with Drag and Drop

            •           Add/Delete/Edit Widgets

            •           Preview your website

            •           Edit Site Content

            •           Find pages on the site and edit them.

            •           Preview Templates and/or Layouts

            •           Change themes

            •           Add/Edit Products, Categories, store text

 

To access Live Design, simply view your storefront while you are logged into the admin.

 

 

In Live Design, you have several edit sections that have different features.

Actions

Edit Products, Categories, Manufacturers, Content Pages, etc.

When browsing the Action menu, the toolbar will update with new options on each page you are on.

For example if you navigate to a Category, the Action menu will have a link to edit that Category. If you navigate to a Product, you will have links to edit that product, its Category and its Manufacturer.

If you browse to a Content Page you are able to edit the Page without leaving the front end of the site. As well as edit some settings for the Content page such as Page Title, the Custom URL, meta tags, etc.

 

Design

This is where you edit your theme’s style. You can select the type of style changes (Font, Color, Background, Theme settings) in the top drop-down. As you make changes, you will be able to see them on your site, but the changes won’t apply to your site until you save it.

 LiveDesignImages2.jpg

 

 

Global style elements (styling that affects multiple pages such as link colors) will show up on every page, but page specific elements (i.e. product name) will only show up when you are viewing them.

LiveDesignImages4.jpg

 

Be aware when changing styles that the more specific styles will override global styles. So, if  your menu links are set to grey, but you choose for your global site links to be blue, this won’t override the grey.

Widgets

In this mode you can add, move, and edit widgets. If you want to move a widget, just hover over the widget then click(hold) and drag it to the area that you want.

To edit, just click the edit button when you hover over a widget.

LiveDesignImages5.jpg

 

Content

Content mode allows you to edit WYSIWYG areas in your site. Most of the time, this is custom text that is on the site (about us, contact us…), but some custom html areas that uses the WYSIWYG is editable in this section.

 

Reminder: If you don’t like the changes that you have made, just refresh the page.


 

Back to Themes FAQs

Back to Themes FAQs

Live Design™ Web Site Builder Mode

Edit your website while you browse.  Access context sensitive features right from the front end of your website.  Flip between admin mode and your website with ease.  Site management becomes a breeze when this technology is integrated right into your website's front end, changing with every page type.

With Live Design you are able to:

  • Change CSS styling for your site
  • Move widgets with Drag and Drop
  • Add/Delete/Edit Widgets
  • Resize the sites Layout
  • Preview your website
  • Edit Content Pages
  • Find certain pages on the site and edit them via the Admin Panel.
  • Preview certain Templates and/or Layouts

 

 

Ways to enter Live Design™ Mode:

1) Log into the admin panel, go to the stores menu and select "View Store (Live Design™ Mode)", this will open the store in a new window and it will be in Live Design Mode.

 

2) If you are logged into the Admin Console and browsing your website you will see a toolbar at the top of your storefront. In the top right there is an indicator saying "Live Design is ON/OFF". If it says "OFF" you can click the OFF link to activate Live Design

 

3) From Your theme you can click Live Design in the top Toolbar. Using this method the system will attempt to load a page of that type to design from. (Product Page, Category Page, Home Page, etc)

 

4) From the Theme Page Accordion. This will load Live Design insdie the Admin Console. Using this method the system will attempt to load a page of that type to design from. (Product Page, Cateogry Page, Home Page, etc)

 

5) Add  ?LiveDesign=On  to any url in your storefront.  This will turn on Live Design™ Mode for the remainder of your user session.  If you are not logged in, it will ask you to login to ensure you have permissions for doing this.

 

Of course if there are other query strings already in your URL you will need to use &livedesign=on instead of ?livedesing=on

 

 

Exit Live Design™ Mode

At the top right of the diagnostic toolbar, there is an ON/OFF link, you can exit Live Design™ mode by clicking the the "ON" link.

 

 

Edit Products, Categories, Manufacturers, Content Pages, etc.

When browsing the Action menu in the top toolbar will update with new options on each page you are on.

For example if you navigate to a Category, the Action menu will have a link to edit that Category. If you navigate to a Product, you will have links to edit that product, its Category and its Manufacturer.

 

If you browse to a Content Page you are able to edit the Page without leaving the front end of the site.

 

As well as edit some settings for the Content page such as Page Title, the Custom URL, meta tags, etc.

 

 

Back To Themes Articles

How helpful was this article?
Number of questions: 0