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

Class pd-button pd-button--bold-coral

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

Class pd-button pd-button--bold-coral pd-button--outline

Class pd-button pd-button--happy-lemonlime

Class pd-button pd-button--happy-lemonlime pd-button--outline

Class pd-button pd-button--strong-dark-blue

Class pd-button pd-button--strong-dark-blue pd-button--outline

Class pd-button pd-button--lively-blue

Class pd-button pd-button--lively-blue pd-button--outline

Links

Class pd-link

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-3 pd-heading-underline

Heading 3 with underline

Scrollbar

Class: pd-container-with-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-container-with-scrollbar pd-container-with-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-textarea

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

Image snippet (lazyload)

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

 image

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