Exploring editor features

Add folder/Add pages

Create folders and pages in any path.
For example, use this when adding guidance content to support a new feature.

 

Save as

Save the selected file as a new file with a specified name.

 

Latest source

View the latest version of the screen you are editing.
After editing, click Save to apply the changes.


 

Find/Change source

Find and replace specific source code in the current file all at once.
Available only in Split view and HTML view modes.
To revert changes, use the History feature.

 

Edit mode: Preview (View page)

Preview the page layout while editing.
Changes are reflected immediately in the preview, but they are not saved. Don't forget to click Save.
Module areas are highlighted as you move the mouse.
Click Edit on the highlighted area to modify it.


 

Edit mode: Split view

View both the preview and the HTML editor at the same time.
When you select a module in the preview, its source location is highlighted in the HTML editor.
Edit the HTML, then click Preview or Save to reflect changes in the preview.


 

Edit mode: HTML 

View only the HTML source of the page you are editing. 
 

Understanding modules

A module is the smallest unit of a program that groups one or more pieces of content and functionality.
Each module works as a bundle of HTML and variables.
A module operates based on the value defined in module=""module ID (module name)"".
Cafe24 provides a variety of modules.
To use a module, insert its code into the desired location in the HTML source.

Adding or replacing modules

You can add or replace modules in the module editor window.

In the Smart Themes editor, click Edit on a module.
In the module editor, select the module to add, choose where to insert it, and apply the changes.

 

Understanding theme structure

All websites, including online stores, share a common overall structure.
The layout refers to the areas that are used across the site and is typically divided into four parts.

 

1. Header

Displayed at the top of every page in your online store.
It usually includes the logo, sign-in information, search box, and shortcuts.

 

2. Sidebar (Navigation)

Helps customers browse your store.
It may include Sign in, My account, a sidebar search box, product categories, campaigns, customer support details, board lists, popular products, and more.

 

3. Body

The main area between the header and footer.
Unlike the header and footer, this section is not fixed and can vary by page.

 

4. Footer

Displayed at the bottom of every page in your store.
It usually includes company information, store policies, and customer support details.