cafe24-smart-design

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