SVG iconsSnippet: icon.svg.liquid Usage: render 'icon.svg', type: 'xxxx' |
ARROWSType: arrow-right
Type: chevron-left
Type: chevron-right
|
HEADERType: person
Type: bag
Type: heart
Type: search
|
SOCIAL NETWORKSType: instagram
Type: facebook
Type: linkedin
Type: youtube
|
ButtonsType: heart-plus
Type: small-gift
|
Buttons |
Class pd-button pd-button--style-1-white Icon use: render 'icon.svg', type: 'arrow-right'
|
Class pd-button pd-button--style-1-black Icon use: render 'icon.svg', type: 'arrow-right'
|
Class pd-button pd-button--style-2-white
|
Class pd-button pd-button--style-2-black
|
Links |
Class pd-link pd-link--white |
Icon use: render 'icon.svg', type: 'chevron-up' |
Class pd-link pd-link--black |
Icon use: render 'icon.svg', type: 'chevron-up' |
Class pd-link pd-link--red |
Icon use: render 'icon.svg', type: 'chevron-up' |
Class pd-link pd-link--grey |
Icon use: render 'icon.svg', type: 'chevron-up' |
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 |
Labels |
class: pd-label pd-label--1 |
class: pd-label pd-label--2 |
class: pd-label pd-label--3 |
class: pd-label pd-label--4 |
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 |
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 |