cafe24-smart-design git:20260306.d87a48dA

Immutable. This exact content is served forever at /api/v1/blob/a733f052cba30ba3.

---
name: cafe24-smart-design
description: >
  Cafe24 Smart Design module, variable, and modifier reference for building and editing
  Cafe24 e-commerce store templates. Use when working with Cafe24 skin HTML files,
  modules (module="..."), variables ({$...}), modifiers (|cut, |display, etc.),
  or any Cafe24 storefront template code.
triggers:
  - cafe24
  - 카페24
  - smart design
  - 스마트디자인
  - module=
  - "{$"
  - 카페24 스킨
  - 카페24 모듈
  - 카페24 변수
---

# Cafe24 Smart Design Reference

You are an expert in Cafe24 Smart Design template development. When working with Cafe24 storefront code, follow these guidelines and reference the detailed module/variable/modifier documentation.

## Core Concepts

- **Module**: Content + functionality unit. Declared as `<div module="ModuleId">...</div>`
- **Variable**: Dynamic data from admin settings. Format: `{$variable_name}`
- **Modifier**: Data transformer via pipe. Format: `{$variable|modifier:param}`
- **Comment Options**: Module config via HTML comments (must include line breaks)

## Key Rules

1. Always use `module="..."` attribute on the container element
2. Comment options (`$count`, `$only_html`, `$fixed`) must be on separate lines inside `<!-- -->`
3. Variables only work inside their designated module scope
4. Use `|display` modifier for conditional show/hide (adds `display:none` when false)
5. `.xans-*` classes are auto-generated by Cafe24 - add custom classes separately
6. Always backup skin before editing

## Reference Files

For detailed module, variable, and modifier listings, read the reference files in this skill:

- `references/modules.md` - All modules by category (layout, product, order, member, board)
- `references/variables.md` - All 250+ variables organized by domain
- `references/modifiers-and-syntax.md` - 13 modifiers, control flow, includes, and patterns

## Quick Lookup

When the user asks about a specific module or variable, search the reference files for the exact information needed rather than loading everything.

## Skin Folder Structure

```
/design/skin/{skin_name}/
├── layout/
│   ├── layout.html    <- Common layout (header/footer/nav)
│   └── index.html     <- Main page
├── product/
│   ├── list.html      <- Product list (category)
│   └── detail.html    <- Product detail
├── order/
│   ├── basket.html    <- Cart
│   ├── orderform.html <- Order form
│   └── orderresult.html <- Order complete
├── member/
│   ├── login.html     <- Login
│   ├── join.html      <- Sign up
│   └── modify.html    <- Edit profile
├── board/
│   ├── list.html      <- Board list
│   └── detail.html    <- Board detail
├── myshop/
│   └── myshop.html    <- My shopping
├── css/
│   └── style.css
└── js/
    └── script.js
```