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 |
Example product titleRegular price
$19.99 AUD
Sale price
$19.99 AUD
Regular price
Unit price
per
|
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 |