Canvas panel displays the template. Every change in the template design instantly appears on the Canvas.

Go to the Studio’s menu click on [View] and select [Show Canvas]

You can re-size the Canvas panel by dragging it’s bottom-left corner.

The Canvas panel top bar contains check-boxes to hide or show overlays.

[Show Sections] group contains three check-boxes, checking the first check-box will show page sections: header, body, footer.

The second check-box assigned to show active page sections labels

and the last check-box is for all page sections labels active and not.

Active page section is one that has non-zero width and height. You can adjust page section size in Editor panel.

When you checked Show Sections first check-box the overlays colored red appears on the canvas on top of sections.

Checking the second check-box will show labels of active sections.

The third check-box will show all page sections, even with zero sizes.

You can access Editor directly by clicking on the label, it will change color to yellow when you pass the mouse over the label.

The same approach is true for the page spaces, with difference that overlay color for spaces is green.

The next group on the Canvas’s top bar is responsible for showing/hiding the modules overlays and labels. The color for modules overlays and labels is blue.

You can access directly Editor tools for any module by clicking on the module’s label.

Next feature on the Canvas’s top bar is template pages selector. The home page view is selected by default, but you can switch a view of the template page to another page available from the drop-down list.

Here is view of the Home page

The Product page looks like this

And the checkout page

Go to Studio’s menu, click on [View] and select [Show Color Picker]

That will open the Color Picker panel

The Color Picker panel contains [No Color] check-box and the color picking area.

You can assign the new color for the selected template element or you can remove the previously assigned color by checking [No Color] check-box and updating the element in the Editor panel.

When you’ve removed previously assigned color, the icon [No Color] will appear.

Editor panel contains template customization tools.

Go to the Studio’s menu click on [View] button and select [Show Editor]

That will open the Editor panel.

The Editor panel contains drop-down list of page elements and Opencart modules available for customization.

Select desired module from the drop-down list for template editing.

Customization Tools for the Webpage

Background

Select color in Color Picker panel and click Update button on the [Background] tab.

To cancel color check the [No Color] check-box on the Color Picker panel and click Update button on the [Background] tab, the “No Color” icon will appear on the [Background] tool page misplacing previously colored area.

Size

Change the Webpage width or the top offset by clicking the plus/minus buttons.

Font

Select [Webpage] from the drop down list in the Editor Panel and click tab [Font].

Font Color

Select desired color in Color Picker panel and click Update button on the [Font] Text color area.

Font Family

Select Font Family from the drop down list on the [Font] panel.

Font Style

Select Font Style from the drop down list on the [Font] panel.

Font Weight

Select Font Weight from the drop down list on the [Font] panel.

Text Align

Select Text Align from the drop down list on the [Font] panel.

Text Transform

Select Text Transform from the drop down list on the [Font] panel.

Text Decoration

Select Text Decoration from the drop down list on the [Font] panel.

Font Size

Change the Font Size by clicking plus/minus buttons on the [Font] panel.

Link

Select [Webpage] from the drop down list in the Editor Panel and click tab [Link].

Font Color

Select desired color in Color Picker panel and click Update button on the [Link] Text color area.

Font Family

Select Font Family from the drop down list on the [Link] panel.

Font Style

Select Font Style from the drop down list on the [Link] panel.

Font Weight

Select Font Weight from the drop down list on the [Link] panel.

Text Align

Select Text Align from the drop down list on the [Link] panel.

Text Transform

Select Text Transform from the drop down list on the [Link] panel.

Text Decoration

Select Text Decoration from the drop down list on the [Link] panel.

Font Size

Change the Font Size by clicking plus/minus buttons on the [Link] panel.

Visited

Select [Webpage] from the drop down list in the Editor Panel and click tab [Visited].

Font Color

Select desired color in Color Picker panel and click Update button on the [Visited] Text color area.

Font Family

Select Font Family from the drop down list on the [Visited] panel.

Font Style

Select Font Style from the drop down list on the [Visited] panel.

Font Weight

Select Font Weight from the drop down list on the [Visited] panel.

Text Align

Select Text Align from the drop down list on the [Visited] panel.

Text Transform

Select Text Transform from the drop down list on the [Visited] panel.

Text Decoration

Select Text Decoration from the drop down list on the [Visited] panel.

Font Size

Change the Font Size by clicking plus/minus buttons on the [Visited] panel.

To customize random generated design you can use the Editor panel. To open the Editor and Color Picker you have to go to the Studio’s menu and click on  [View]->[Show Editor] and to open the Color Picker – click on [View]->[Show Color Picker].

To edit specific module click on the second check-box in [Show Modules], it will show Modules Labels on the Canvas panel. Each label is linked to the Editor’s customization tools for the selected module. Click on the yellow label  and Studio will open the Editor Panel and the Color Picker Panel. The Editor Panel will display selected module for editing.

There are two ways how you can open studio’s editor, you can call editor panel from the the menu [View] -> [Show Editor]

or you can click on one of the following: [Show Sections], [Show Spacers] or [Show Modules]

on the Canvas panel’s top bar and go from there.

Canvas panel displays home page for Opencart powered website by default, but you can switch canvas display to preview other pages using the panel’s bar selector.