SVG icons

Snippet: icon.svg.liquid

Usage: render 'icon.svg', type: 'xxxx'

ARROWS

Type: arrow-45-degree

Type: arrow-down

HEADER

Type: gift

Type: edit

Type: smile

Type: bag

Type: search

SOCIAL NETWORKS

Type: instagram

Type: tiktok

Type: facebook

Type: twitter

Type: pinterest

Buttons

Type: 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

REGISTER

Class pd-link pd-link--reverse

REGISTER

Icon use: render 'icon.svg', type: 'arrow-45-degree'

REGISTER

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

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.

Class: pd-scrollbar pd-scrollbar--style-2

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.

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'

image

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