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'

Default

WITH ICON

Class pd-button pd-button--classic-blue

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

CLASSIC BLUE

WITH ICON

Class pd-button pd-button--stone

STONE

WITH ICON

Class pd-button pd-button--compact

COMPACT

WITH ICON

Class pd-button pd-button--blossoming-dynasty

BLOSSOMING DYNASTY

WITH ICON

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

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

Image snippet (lazyload)

Use: render 'pd-image', image: '[image object]', classnames: 'custom-class'

Product card

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