This is the detailed manual for Sinsunhan (sinsunhan), the official Zittme theme for fresh-food online stores. It was designed as a pair with the commerce module, and its biggest feature is that the layout draws the front page (main page) itself — without building a separate widget page, you get a store front page complete with a slider, daily deals, promotions, product sections, rankings, and latest board posts. Dark mode and responsive design are supported out of the box, and the default typeface is Pretendard.

The screens in this document are captured directly from the actual demo site. You can see the demo yourself at shopdemo.zitt.me.

Components

All components share the same design tokens (brand green · typeface · rounding · spacing). Change the accent color in one place in the layout settings and it applies to every screen.

Installation and applying the theme

1. Place the theme files in themes/sinsunhan. (Install from the store or extract the archive.)
2. In Admin > Design settings, choose the Sinsunhan theme and apply it. The layout and module skins are applied all at once.
3. On Zittme 1.0.1 or later, the message, system message, and notification center skins also change when the theme is applied. On 1.0.0, choose 신선한 (Sinsunhan) separately in the communication, message, and notification center module settings.
4. If the commerce module is installed, the store menu, header search, and front-page product sections are connected automatically. If you have several store modules, enter the mid to use in Layout settings > Main composition > "Store module address (mid)".

Recommended: Zittme 1.0.1 or later, commerce 0.2.15 or later. It also works on 1.0.0, but some skins must be set by hand as in item 3.

Recommended site settings

• Go responsive: This theme is responsive, so we recommend turning off the mobile-only view. Turn off the mobile view in System settings > Advanced, or, without keeping config/config.user.inc.php, turn off mobile.enabled. If it is on, a separate mobile layout is shown on mobile instead.
• Turn off XE-compatible button styles: The XE-era .btn style in the core common CSS (height 24px !important) can override skin buttons. Add the line below to config/config.user.inc.php and empty the files in files/cache/assets to remove it cleanly.

define('DISABLE_XE_BTN_STYLES', true);

Header

From top to bottom, the header has three tiers: utility bar (log in · admin links · language) → logo · search · my page · cart · notifications → category menu.

• Admin shortcuts: When you log in as an administrator, the utility bar shows Shop admin (commerce console) and Pay settings (zittme Pay settings) links in addition to Admin. The same links appear in the tool row of the mobile menu drawer. They are not shown to regular members.
• All-categories mega menu: Top-level categories become column heads, and second-level categories expand as vertical lists. The number of columns grows automatically with the number of top-level categories (3 columns up to 6, 4 columns up to 8, 5 columns beyond that).
• Notification bell: Appears only when the notification center is installed, at least one notification type is in use, and the display target (PC · mobile) in the notification center settings matches. Clicking the bell expands recent notifications, and if "Show in member menu" is on in the notification center, a View all notifications link is added below. The link goes to the mid assigned in the member module if there is one, or to the notification list action address otherwise.

Built-in theme main page (main composition)

This is the area the layout draws itself when the site front page is of the main type. Assemble sections in order with the "Main page sections" repeat field in Layout settings > Main composition tab. If you register none, the default composition is used (categories → daily deal → promotions → recommended → banner → ranking → new arrivals → banner → sale → latest posts).

Section type	Content	Source (source)	Count (count)
Store category tiles	Shortcut tiles for top-level categories	-	Number of tiles to show
Daily deal	One product from the top discount rates rotates each day, with a countdown to midnight	-	-
Ongoing promotion cards	Commerce promotions as image cards	-	Number of cards
Recommended / new / sale / popular products	Product card grid (with add-to-cart bar)	-	Number of products
Real-time popularity ranking	Ranks 1 to N by purchases → views	-	Number of ranks
Banner strip	Reuses a visual slide image as a mid-page banner	Slide number (leave blank to go in order)	-
Latest board posts	List of board posts. Enter several mids separated by commas for a multi-column layout	Board mid (e.g., notice,board)	Number of posts

If you leave a section title blank, the default title for that type is used.

Category tile icons

By default, category tiles show the first syllable of the category name in large type. For languages like English or Spanish where the first letter is hard to tell apart, or when you want to use picture icons, use the Category icons repeat field in Layout settings > Main composition.

Item	Description
Category name	Must exactly match the store category name (for multilingual names, the name shown in the current language)
Icon image	If you upload an image, the image takes priority. Square PNG · SVG recommended
Emoji or text	Emoji or one or two characters to show instead when there is no image

Categories you don't register still show the first syllable.

Visual slider

Register slides in Layout settings > First screen tab (background image · title · description · button · alignment). The controls (arrows + dots) are grouped together at the bottom right, so they don't cover the text even on mobile.

If you register no slides, it automatically inherits the commerce store home banners — just by managing the store banners, the front-page slider is filled too.

Store screens (commerce skin)



The store home consists of a banner slider, category tiles, promotions, and recommended/new/sale sections. Register banners in Commerce admin > Front settings.



At the top of the list screen are top-level category chips, second-level chips for the current category, search, and sorting. On mobile, the chip rows don't wrap into multiple lines; they appear as a single line you swipe left and right.



The product detail supports regular options, add-on options, and combination options (axis × axis). The screen above is an example of a two-axis combination option: grind × size. Below the price, points, shipping fee, and shipping/freshness/exchange information follow as one block. Manage the information text in Commerce settings > Shipping · returns and exchanges information.

Promotions



When you create a promotion in the commerce admin, it automatically appears on the store home and in the promotion cards on the main page. The banner can be an image, a solid color, or a gradient.

If you insert the promotion display period (start_date / end_date) directly via the DB or a script, you must store it as 14 digits (YmdHis). If you insert 8 digits, the date comparison always treats it as expired and it won't be shown.

Board skin

In the List style of the board skin settings, you can choose a different look for each board.

Style	Use	Example
List	General boards such as notices. Card frame + divider rows	Notice screen below
Webzine	Communities with thumbnails + summaries	Free board screen below
Card	Thumbnail-focused gallery	-
FAQ	Accordion that expands the answer when you click a question	Q&A screen below







Required settings for webzine · card · FAQ styles

Two settings are needed for thumbnails and summaries to appear.

1. Include the 'Summary' column in the board list settings — If summary is not in the list settings, the list query itself doesn't fetch the content, so summaries and FAQ answers appear empty.
2. Set the thumbnail source in document settings to 'Include content' (content) — With the default (attachments only), thumbnails are not made from images in the content. After changing the setting, empty the files in files/thumbnails to clear the old failure cache (0-byte files) so they are regenerated.

Members · messages · notification center

The member skin puts log in, sign up, and my page in a single card, with input fields, selects, and buttons unified at a height of 46px. The message (communication) and notification center screens inherit the member skin's my page frame (profile on the left + content on the right) and open in the same place as the member menu. The system message (error · notice) screens are built to be self-contained even outside the layout.

Mobile



• A 5-tab bar of Home · Categories · Search · Cart · My page is fixed at the bottom.
• The Categories tab opens the store category bottom sheet (top-level headers + second-level chips) from below, and the Search tab opens the store search bottom sheet. On sites without a store, the menu drawer opens instead.
• The menu drawer consists of account buttons, category chips, the menu list, and dark mode/language tools. For administrators, Shop admin and Pay settings links are added to the tool row.

Footer

Configure it in Layout settings > Footer tab. If you leave an item blank, that block is not shown.

Item	Description
Site introduction	One-line introduction below the logo
Customer service phone number / hours	Customer service block on the left. If you leave the phone number blank, the whole block is hidden
Contact email	Email contact link
Business · contact information	Each line break becomes one item
Instagram · Facebook · YouTube · blog addresses	Only the ones you enter appear as social media icons
Bottom notice text	Small disclaimer · notice text above the copyright
Copyright notice	Notice at the very bottom

Page types and LNB

Specify the page type by entering m (main) / sl (sub) / sf (full width) in the menu class of the sitemap. The site front page is treated as main even without a class, and member, message, and payment screens automatically become full width. Sub pages in this theme work at full content width without an LNB.

All layout settings

Basic

Item	Default	Description
Logo image / dark mode logo	None	Based on a 40px height. If blank, the logo text is used
Logo text	None	If blank, the site title
Accent color	Brand green	Sets buttons, links, active indicators, and skin highlight colors together
Maximum content width	1180px	1060 / 1180 / 1320
Menu bar width · color	Content width · dark	Can choose full width, accent color, or light
Mobile dark mode · language button position	Inside the menu drawer	Can move to the header · footer
Color mode	Match device setting	Auto / always light / always dark

First screen

Visual slider display condition · auto-advance interval · slide list (repeat field).

Main composition

Store module address (mid) · category icons (repeat field) · main page sections (repeat field). See "Built-in theme main page" above.

Content · side

Whether to use integrated search · (legacy compatibility) side login box.

Footer

See the "Footer" table above.