This is the detailed manual for Jamgyeol (jamgyeol), the official Zittme theme for lodging booking platforms. It was designed as a pair with the lodging module, and search by region, dates, and guests is the center of the front page. It packs the whole booking flow like an app — rate and availability calendars, overnight/day-use switching, coupons, reviews, and guest booking lookup — and if you also use the commerce module, a store selling stay vouchers and merchandise opens in the same design. 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 jamgyeol-demo.zitt.me.

Components

All components share the same design tokens (purple accent color · typeface · rounding · spacing). Change the accent color in one place in the layout settings and it applies to every screen, and in dark mode dedicated tokens are calculated automatically to keep text contrast.

Installation and applying the theme

1. Place the theme files in themes/jamgyeol. (Install from the store or extract the archive.)
2. In Admin > Design settings, choose the Jamgyeol theme and apply it. The layout and module skins are applied all at once.
3. Create a lodging mid (e.g., stay) with the lodging module and set it as the site front page, and the front page shows search, popular properties, regions, lowest prices, day use, events, and notices on one screen.
4. Create an event board (event) and a notice board (notice), and they are connected automatically at the bottom of the front page.
5. If the commerce module is installed, the store menu and cart button also appear in the header.

Recommended: Zittme 1.0.2 or later, lodging 1.0.0 or later, commerce 1.1.1 or later. Prepayment requires zittme Pay; without zittme Pay, only on-site payment is shown.

Recommended site settings

• Go responsive: This theme is responsive, so we recommend turning off the mobile-only view. 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 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.

define('DISABLE_XE_BTN_STYLES', true);

Header

From top to bottom, the header has three tiers: utility bar (log in · sign up · language · dark mode) → logo · integrated search · guest booking lookup · wishlist · recently viewed properties → menu bar.

• Integrated search: Opens the property list directly by region or property name.
• Wishlist · recently viewed properties: Stored in the visitor's browser, so they work without logging in, and a number badge shows the count.
• Menu bar: Shows the top menu from the sitemap, with secondary menus such as events and notices on the right.

Finding a property



• In the search box, switch between Overnight / Day use and choose the region, check-in, check-out, and guests. For day use, choose just the single day of use.
• Narrow down with type chips (hotel · motel · pension · guesthouse · resort) and popular region chips, and sort by recommended, lowest price, highest price, rating, or most reviews.
• When you choose dates, only properties with rooms left on those dates are shown, based on the lowest nightly rate.

Property detail



• The photo arrangement changes with the number of photos (1 · 2–3 · 4 or more). Click to browse them at a large size.
• Each room shows standard · maximum occupancy, rooms left, and the nightly rate, and leads straight to Book now.
• When you choose a room in the calendar on the right, daily rates and availability · sold out are shown. The first click sets check-in, and the next click sets check-out. The calendar's month and weekday labels follow the site language.
• Coupon codes usable at this property, the cancellation policy, reviews and host replies, and the location follow.



Booking and result



The booking screen goes in the order guest information → coupons · points → payment method → agreement to the cancellation policy, and the payment amount is recalculated instantly in the summary on the right. Guests (non-members) who set a lookup password can find the booking again in Guest booking lookup together with the booking number.



The result screen changes its look depending on the booking status.

Status	Display
Confirmed	Check mark, booking number to show at the front desk, cancel button and the refund amount if canceled now
Awaiting payment	Clock mark, payment deadline notice, and a continue payment button if the zittme Pay order is still active
Payment deadline expired · canceled · no-show	X mark and a notice message
Stay completed	Review form

Coupons · points · my bookings

• Coupons · benefits: Shows ongoing coupons as tickets, and members can claim them into their coupon box.
• My bookings: Members see upcoming and past bookings separately, and guests look them up with the booking number + lookup password.
• My page: The member skin's my page also shows three upcoming bookings and a coupon · points summary.

Board skin

In the List style of the board skin settings, choose the look for each board.

Style	Use
List	General boards such as notices
Webzine	Communities with thumbnails + summaries
Card	Thumbnail-focused gallery
FAQ	Accordion that expands the answer when you click a question
Event	Event cards with period · ongoing · upcoming · ended badges and a D-day



The event style calculates the status from the date fields (start date · end date) among the board's extra variables whose input names are event_start · event_end. For webzine, card, and FAQ styles, the board list settings must include the Summary column for summaries and answers to appear.

Mobile



• A tab bar of Home · Search · My bookings · My page is fixed at the bottom.
• The header shrinks to one row of logo · guest booking lookup · wishlist · recently viewed properties · menu button, plus a search box.
• The menu drawer contains account buttons, the menu list, and dark mode · language tools.

Multilingual support

• The theme text has language files for 12 languages, including Korean, English, and Japanese.
• Property names, room names, menu names, the logo text in the layout settings, and footer text can contain $user_lang->code created in Admin > Multilingual, and they change to match the visitor's language.
• Date and amount formats follow the lodging module's language files (lodging_date_fmt, lodging_money).

Footer

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

Item	Description
Site introduction	Short introduction below the logo
Customer service phone number / hours	Customer service block. Each line of the hours is shown as one line
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 icons
Bottom notice text	Disclaimer · notice text such as a mail-order intermediary notice
Copyright notice	Notice at the very bottom

All layout settings

Basic

Item	Default	Description
Logo image / dark mode logo	None	If blank, the logo text is used
Logo text	None	If blank, the site title
Accent color	Purple	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). When the lodging module is the front page, the lodging skin draws the first screen itself with property photos.

Main composition

Store module address (mid) · category icons · main page sections (repeat field). Use these when the front page is a store rather than lodging.

Content · side

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

Footer

See the "Footer" table above.