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)

SHOP LEGGINGS

`.checkbox-input`

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

Sign me up to receive emails about all the latest news.

`.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
  ...

checked
disabled
default
option
option 2

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

select your country

`.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

e-mail

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

first name

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'

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

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

`'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

new in

`'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'

`'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'

'account'

'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'

`'product-list-1' section`

section 'product-list-1'

Outerwear Edit

general

Fonts

assets

asset images

html + css

.banner-content

.checkbox-input

.compare-price

.lazy-loading-image

.loading-box

.radio-list

.select-input

.square-btn

.square-button

.square-image

.text-input

snippets

'arrow-button' snippet

'circled-swiper-button' snippet

(will be deprecated)

'color_square_button' snippet

'flowing-text' snippet

'picture' snippet

'product-tag-btn' snippet

'product-tag-btns' snippet

'img-wrapper' snippet

'section-title' snippet

'svg-icon' snippet

'swiper-button' snippet

'underline-btn' snippet

sections

'collection-grid-1' section

'full-height-image-banner' section

'main-swiper-banner' section

'picture-grid-1' section

'product-grid-1' section

'product-list-1' section

Hello,

`Fonts`

`asset images`

`.banner-content`

`.checkbox-input`

`.compare-price`

`.lazy-loading-image`

`.loading-box`

`.radio-list`

`.select-input`

`.square-btn`

`.square-button`

`.square-image`

`.text-input`

`'arrow-button' snippet`

`'circled-swiper-button' snippet`

`'color_square_button' snippet`

`'flowing-text' snippet`

`'picture' snippet`

`'product-tag-btn' snippet`

`'product-tag-btns' snippet`

`'img-wrapper' snippet`

`'section-title' snippet`

`'svg-icon' snippet`

`'swiper-button' snippet`

`'underline-btn' snippet`

`'collection-grid-1' section`

`'full-height-image-banner' section`

`'main-swiper-banner' section`

`'picture-grid-1' section`

`'product-grid-1' section`

`'product-list-1' section`