SVG iconsSnippet: icon.svg.liquid Usage: render 'icon.svg', type: 'xxxx' |
ARROWSType: arrow-45-degree
Type: arrow-down
|
HEADERType: gift
Type: edit
Type: smile
Type: bag
Type: search
|
SOCIAL NETWORKSType: instagram
Type: tiktok
Type: facebook
Type: twitter
Type: pinterest
|
ButtonsType: heart-plus
Type: small-gift
|
Buttons |
Class pd-button Icon use: render 'icon.svg', type: 'arrow-45-degree'
|
Class pd-button pd-button--classic-blue Icon use: render 'icon.svg', type: 'arrow-45-degree'
|
Class pd-button pd-button--stone
|
Class pd-button pd-button--compact
|
Class pd-button pd-button--blossoming-dynasty
|
Links |
Class pd-link |
Class pd-link pd-link--reverse |
Icon use: render 'icon.svg', type: 'arrow-45-degree' |
Headings |
class: pd-heading-1 or h1 tag Heading 1 |
class: pd-heading-2 or h2 tag Heading 2 |
class: pd-heading-3 or h3 tag Heading 3 |
class: pd-heading-4 or h4 tag Heading 4 |
class: pd-heading-5 or h5 tag Heading 5 |
Body text |
Class: pd-body-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Scrollbar |
Class: pd-scrollbar |
Class: pd-scrollbar pd-scrollbar--style-2 |
Form elements |
Class: pd-form-input |
Class: pd-form-select |
Class: pd-form-textarea |
Container class: pd-form-group, form class: pd-form, label class: pd-form-label |
Container class: pd-form-group pd-form-group--error
This field is required
|
Image snippet (lazyload)Use: render 'pd-image', image: '[image object]', classnames: 'custom-class' |
Product card |
商品名の例通常価格
¥20 JPY
セール価格
¥20 JPY
通常価格
単価
あたり
|
Usage:render 'card-product', card_product: product Params:card_product - product object (required) hide_secondary_image - To hide 2nd image. Default: false hide_vendor - To hide vendor. Default: false hide_rating - To hide rating. Default: false show_description - To show description. Default: false. Field: product.metafields.card.short_description |