Smart Themes is the more specialized editor when compared to Edibot Themes. With Smart Themes, you can directly edit your site's HTML to apply any design you want without limitations. You can also speed up page loading on your website to create a pleasant shopping experience on any browser.

Editor features

1. Add folder/Add page
Using Smart Themes Editor, you can add folders and pages in any path you want. For example, you can use the Add folder or Add page feature to add or apply a new feature on your store.

2. Save as
Save the currently selected file as a new file.

3. Most recent code
Shows the latest version of the current page. You must save the page to apply the code changes.

4. Bulk edit all codes
You can search for a specific code on the current page and edit all matching codes in one go. This feature is only available in the Screen+HTML and HTML editor modes. If you want to revert your changes after using this feature, use the History button.

5-1. Editor: Screen
You can view the current page and any modifications made will be displayed in real time. However, you must click Save if you want to save your changes. Areas on the page will be displayed as modules as you move your mouse around. You can edit these areas by clicking on the Edit button next to them. Modules cannot be added using this mode.

5-2. Editor: Screen+HTML
You can view both the current page's screen and the page's HTML at the same time. When selecting a module in the Screen editor, the corresponding code will be displayed in the HTML editor. If you click Preview or Save after editing the code in the HTML area, the modified code will be reflected in the Screen editor. You can add modules by moving your mouse cursor to the desired location and clicking on Add module.

5-3. Editor: HTML
You can only view the HTML code of the current page in this mode. If you want to check the results of the edited code, you need to change to either of the other two modes. You can add modules by moving your mouse cursor to the desired location and clicking on Add module.

Modules

A module is a collection of one or more features and content, and is the smallest unit that makes up a program. Each module works as a collection of HTML and variables. A module is an independent complete program that is determined and operated according to the module="moduleID" entered by the user. Cafe24 provides various modules for you to insert into your HTML code.

Adding/Changing modules

There are two ways to add or change a module.

• Using the module editor
  1. In Smart Themes Editor, click on the Edit button that appears next to the module.
  2. Select the module to be added and click the location you want to add it to.
     
     
• Using the "Add module" button
  1. In Smart Themes Editor, using the Screen+HTML or HTML editor mode, select the HTML area where you want to add the module.
  2. Click Add module to open the module editor and select the module you want to add.

Theme structure

All websites, including online stores, have a common structure. A website's layout refers to the common areas in its overall structure and can be divided into four main parts.

1. Header
   This area appears at the top of every page on your store. Normally logos, login, search bars, and shortcuts will be displayed here.
   
   
2. Side
   This area appears at the side as a menu for users to navigate your store. Login, My Shopping, product categories, collections, popular products, etc., will be displayed here.
   
   
3. Body
   This area appears between the header and footer. Unlike headers and footers, the body is not fixed and can be designed differently for every page.
   
   
4. Footer
   This area appears at the bottom of every page on your store. Your company information, Terms of Use, Customer Support information, etc., will be displayed here.

Enabling responsive themes

Responsive themes on Smart Themes can be divided into two main categories.

Responsive themes for PC only

1. When purchasing themes, these themes will be marked as for PC only.
2. When selecting a responsive theme as your main theme, you must go to Themes (Mobile)>Mobile theme settings and set Enable mobile theme to No and click Save.

Responsive themes for PC and Mobile

1. When purchasing themes, these themes will be marked as for PC and Mobile.
2. When selecting a responsive theme as your main theme, you must go to Themes (Mobile)>Mobile theme settings and set Enable mobile theme to Yes and click Save.
3.