general

Fonts

font-family : HarmoniaSansPro-Light
class : .HarmoniaSansPro-Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : HarmoniaSansPro-Regular
class : .HarmoniaSansPro-Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : HarmoniaSansPro-SemiBold
class : .HarmoniaSansPro-SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : HarmoniaSansPro-Black
class : .HarmoniaSansPro-Black
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : HelveticaNeue-BoldCondensed
class : .HelveticaNeue-BoldCondensed
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-Thin
class : .Juana-Thin
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-ThinIt
class : .Juana-ThinIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-ExtraLight
class : .Juana-ExtraLight
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-ExtraLightIt
class : .Juana-ExtraLightIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-Light
class : .Juana-Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-LightIt
class : .Juana-LightIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-Regular
class : .Juana-Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-RegularIt
class : .Juana-RegularIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-Medium
class : .Juana-Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-MediumIt
class : .Juana-MediumIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-SemiBold
class : .Juana-SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-SemiBoldIt
class : .Juana-SemiBoldIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-Bold
class : .Juana-Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-BoldIt
class : .Juana-BoldIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-Black
class : .Juana-Black
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
font-family : Juana-BlackIt
class : .Juana-BlackIt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

assets

asset images

| asset_img_url: 'master'
'icon-expand-shrink-arrow.png'
'icon_review_thumbs_up.png'
'icon_review_thumbs_up_over.png'
'icon_write_a_review.png'
'icon_thumbs_up.png'

html + css

.banner-content

div.banner-content
  .banner-content__title (required)
    svg
  .banner-content__subtitle (optional)
    svg
  .banner-content__button (optional)

.checkbox-input

div.checkbox-input-container
  input[type="checkbox"].checkbox-input
  label.checkbox-input-label

.compare-price

div
  div.compare-price.mr-4
  [price]

* line-height: 1.2 필요

.lazy-loading-image

picture.lazy-loading-image
  source
  ...
  img

.loading-box

.loading-box.loading-box--loading
  .loading-box__box.loading-box__box--x-1
This is loading-box.
.loading-box.loading-box--loading
  .loading-box__box.loading-box__box--op-1
This is loading-box.

.radio-list

ul.radio-list
  li
    input[type="radio"]
    label
  ...
ul.radio-list
  li
  ...
ul.radio-list.radio-list--product-size
  li
  ...
ul.radio-list.radio-list--product-color
  li
  ...

.select-input

div.select-input-container
  label.select-input-label
  select.select-input

.square-btn

div.square-btn
  .square-btn__bg
  .square-btn__content
SHOP WHITE
div.square-btn.black
  .square-btn__bg
  .square-btn__content
SHOP BLACK

.square-button

button.square-button
button.square-button.square-button--small
button.square-button.square-button--large
button.square-button.square-button--inverted
button.square-button.square-button--full-width

.square-image

picture.square-image
  img

picture.square-image.h100
  img

.square-image
  picture
    img

.square-image.h100
  picture
    img
render 'img-wrapper', image: sample_image, media_string: '375,1024,1440', size_ratio: 0.2, picture_class: 'square-image'
render 'picture', image: sample_image_2, media_string: '375,1024,1440', size_ratio: 0.2, picture_classes: 'square-image h100'

.text-input

div.text-input-container
  label.text-input-label
  input[type="text"].text-input
div.text-input-container.text-input-container--square
  label.text-input-label
  input[type="text"].text-input

snippets

'arrow-button' snippet

content: string (required)
url: string (required)
classname: string
title: string
color: string
render 'arrow-button', content: "SHOP LEGGINGS", url: '#', title: 'leggings collection'
SHOP LEGGINGS
render 'arrow-button', content: "SHOP TOPS", url: '#', title: 'tops collection', color: 'red'
SHOP TOPS

'circled-swiper-button' snippet

(will be deprecated)

is_prev: boolean (default: false)
render 'circled-swiper-button', is_prev: true (오른쪽: :disabled)
render 'circled-swiper-button', is_prev: false (오른쪽: :disabled)

'color_square_button' snippet

id: string (required)
content: string (required)
color: string (defalut: '#ffffff')
box_w: number (default: 222)
box_h: number (default: 52)
border_w: number (default: 2)
text_x: number (default: 50)
text_y: number (default: 34)
text_ts: number (default: 6)
render 'color_square_button', id: 'csb_1', content: 'SHOP NOW', color: 'white'
SHOP NOW SHOP NOW
render 'color_square_button', id: 'csb_2', content: 'SHOP NOW', color: 'red' box_w: 144, box_h: 34, border_w: 1.4, text_x: 32, text_y: 22, text_ts: 8
SHOP NOW SHOP NOW
render 'color_square_button', id: 'csb_3', content: 'SHOP NOW', color: 'blue', box_w: 122, box_h: 30, border_w: 1.2, text_x: 24, text_y: 20, text_ts: 8
SHOP NOW SHOP NOW

'flowing-text' snippet

delay: number (default: 0)
direction: string (default: 'rtl')
margin: number (default: 24)
repeat: number (default: 2)
speed: number (default: 80)
content: string (default: 'Lorem Ipsum is the single greatest threat.')
render 'flowing-text'
Lorem Ipsum is the single greatest threat.
render 'flowing-text', direction: 'ltr', margin: 0, speed: 120, content: 'A text generator straight out of left field, step up to bat on your next project with this baseball themed lorem ipsum text, which even includes a REST API.'
A text generator straight out of left field, step up to bat on your next project with this baseball themed lorem ipsum text, which even includes a REST API.

'picture' snippet

link to github

render 'picture', image: sample_image, media_string: '375,767', srcset_string: '100,200,300'
render 'picture', image: sample_image, media_string: '375,428,768,1024,1280,1440', size_ratio: 1
render 'picture', image: sample_image, media_string: '375,428,768,1024,1280,1440', size_ratio: 0.2

'product-tag-btn' snippet

tag: string (required)
is_link: boolean (default: false)
render 'product-tag-btn', tag: 'bestseller', is_link: false
bestseller
render 'product-tag-btn', tag: 'newin', is_link: true

'product-tag-btns' snippet

tags: string[] (required)
is_link: boolean (default: false)
render 'product-tag-btns', tags: all_products['leila-pants'].tags, is_link: false
render 'product-tag-btns', tags: all_products['cameron-half-zip-sweatshirt'].tags, is_link: true

'img-wrapper' snippet

render 'img-wrapper', image: sample_image_2, media_string: '300,600', srcset_string: '300,600', load_scrolled: false
render 'img-wrapper', image: sample_image_2, media_string: '375,428,768,1024,1280,1440', size_ratio: 1, load_scrolled: true, image_alt: 'model wears harper beige set'
model wears harper beige set

'section-title' snippet

content: string (required, b, strong, em, i tag에 넣을 경우, 모바일에서 크게 처리)
type: number (default: 1)
render 'section-title', content: 'SHOP BY CATEGORY'
SHOP BY CATEGORY
render 'section-title', content: "this week's most loved"
this week's most loved

'svg-icon' snippet

render 'svg-icon', name: 
'arrow-1'
'arrow-2'
'arrow-3'
'arrow-4'
'arrow-5'
'arrow-6'
'arrow-expand-shrink'
'close-1'
'close-2'
'close-3'
'add'
'bi-1'
'bi-2'
'cart'
'edit'
'hamburger'
'help-circled-outline'
'help-circled-black'
'wishlist'
'heart'
'heart-solid'
'heart-solid', color: #e0422d
'search'
'search-2'
'send'
'trash'
'thumbs-up'

'swiper-button' snippet

is_prev: boolean (default: false)
render 'swiper-button', is_prev: true
render 'swiper-button', is_prev: false

'underline-btn' snippet

content: string (default: "Google")
id: string
class: string
url: string (없으면 button tag, 있으면 a tag로 생성)
target: string (default: "_blank", url 있을 경우만.) ["_blank", "_self"]
title: string (default: content 값, url 있을 경우만.)
is_hovered: boolean (true일 경우, 밑줄이 항상 있음)
is_x_effect: boolean (true일 경우, 밑줄이 왼쪽 → 오른쪽 나타나는 효과)
render 'underline-btn'
render 'underline-btn', url: '/', target: '_self', content: 'Enavant Active', is_x_effect: true
Enavant Active
render 'underline-btn', url: 'https://pngquant.org/', target: '_self', content: 'pngquant.org', title: 'pngquant.org'
pngquant.org
render 'underline-btn', content: '.hovered', is_hovered: true

sections

'collection-grid-1' section

section 'collection-grid-1'

'full-height-image-banner' section

section 'full-height-image-banner'

'main-swiper-banner' section

section 'main-swiper-banner'

'picture-grid-1' section

section 'picture-grid-1'

'product-grid-1' section

section 'product-grid-1'
You may also like

'product-list-1' section

section 'product-list-1'
Outerwear Edit
0