Service Notice

This website is optimized for the latest browsers
(Internet Explorer 11 and later, Chrome, Safari, Firefox).
Please check your current browser version and update if needed.
You can click on the 'Install' button under each
browser icon to install the latest available version.


Details on Smart Themes, an editing tool that allows you to freely customize every element of your online storefront

Store Setup

A few simple steps to build your online store with Cafe24.

Designing the perfect store for all devicese

Your online store requires just as much attention to design as your offline store.
Cafe24 offers Smart Themes, a tool that allows you to completely customize every detail of your storefront.
Use Smart Themes to create the best theme for your online store on all PC and mobile devices.

FAQs about "Designing your storefront" Go to FAQs
01Selecting the right structure

Themes may all look different, but they all share the same structural elements.

The theme's design structure can be divided into 4 categories.

Structural elements
Header

The header is the area displayed at the top of the website.
Generally, this area includes the brand logo as well as shortcuts to menus such as "My Profile" and "Shopping Cart".

Body

All areas excluding the header and footer are called the body.
You can structure the body to your desired format, while the header and footer remain fixed.

Footer

The footer is placed at the bottom of the website.
In general, it includes the store information and contact details.

Navigation menu

The navigation menu is displayed in the header or the left side of the website.
It is a menu that allows users to navigate the store or go to a specific page.

Follow the following steps to design the header, body, footer, and navigation menu of your store.

1. Header

The header is basically composed of shortcuts to "My Profile" and "Shopping Cart," as well as a brand logo.
The icons other than the logo section do not necessarily have to be changed.

   

The logo automatically displays the store name you entered through the admin page.
If you wish to change the logo, go to [Themes (PC)] or [Themes (Mobile)] in the admin page and click on [Edit theme].

   
2. Footer

The footer displays the store profile details you entered through the admin page.
If you wish to change the displayed information, go to [My Store > General > Store Profile] in the admin page.

   
3. Navigation menu

Create product categories for the products you wish to sell.
The categories can be managed through the admin page in [Products > Categories > Product categories]

Once the categories are created, they will be automatically displayed in the navigation menu.

 
4. Body

The home page is the foundation of your storefront. Take advantage of various sections to promote your store and increase sales.

In general, the top of the home page features banners.
Banners are used to draw the customers' attention by embodying the brand image or advertising promotions.
Use banners that are custom-designed for your brand concept.

   

On the home page, you can display a variety of categorized products, such as new arrivals and best sellers.

To display a product on your home page, upload a product, then go to [Products > Products > Main Page Category Layout] on the admin page.

   
02Adding a theme

You will be able to find two theme editing tools on the admin page called "Smart Themes" and "Edibot Themes," each of which offers different ways of editing your store theme.
You can create and manage up to 12 themes, regardless of which editing tool you are using, and select one main theme for your storefront.
Once you select a theme, it will be displayed when you access your online store (domain).

The remaining themes can be separately saved.
You can change themes for special occasions, such as promotional campaigns or regularly switch themes depending on the season.

1. Adding a theme

Add themes to your store using Smart Themes or Edibot Themes by clicking [Add default theme] through [Themes (PC) OR Themes (Mobile) > My themes] in the admin page.

Refer to the relevant guidelines for further information on adding themes.

Go to guidelines on saved themes
 
2. Previewing your theme

Check your theme by clicking on the desktop or mobile icon at the top of the admin page.
If you have multiple websites in different languages, you can check your store theme by language.

You can also preview the theme by clicking on the link below the theme name in [Saved themes].

 
3. Creating responsive themes

You can set up a responsive theme by enabling mobile themes through [Themes (Mobile) > Mobile theme settings] in the admin page.

(※ Responsive themes are available with Edibot Themes only.)

(※ If you enable mobile themes, the responsive theme option will be offered for PC themes only and Smart Themes will be offered for mobile themes.)

 
Once you are done designing your storefront,
move onto learning how to add, display, and manage products.



TOP