SVG icons

Snippet: icon.svg.liquid

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

HEADER

Type: search

Type: cart

Type: chevron-down

Type: caret

SOCIAL NETWORKS

Type: instagram

Type: tiktok

Type: facebook

Type: twitter

Type: pinterest

Buttons

Class pd-button

Default

Full width

Class pd-button pd-button--secondary

Secondary

Full width

Links

Class pd-link

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-5 or h5 tag

Heading 5

class: pd-heading-6 or h6 tag

Heading 6

Form elements

Class: pd-form-input

Class: pd-form-textarea

Container class: pd-form-group, label class: pd-form-label

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