paragraph
.paragraph.paragraph--md
.small
These are set in Theme Settings > Colours
SCSS Variable: $colorMain1
CSS Variable: --color-main-1
Hex Value: #9A845C
Customizer Name: Colour 1
SCSS Variable: $colorMain2
CSS Variable: --color-main-2
Hex Value: #141414
Customizer Name: Colour 2
SCSS Variable: $colorMain3
CSS Variable: --color-main-3
Hex Value: #D7CEBE
Customizer Name: Colour 3
SCSS Variable: $colorMain4
CSS Variable: --color-main-4
Hex Value: #ffffff
Customizer Name: Colour 4
SCSS Variable: $colorMain5
CSS Variable: --color-main-5
Hex Value: #EBE6DE
Customizer Name: Colour 5
SCSS Variable: $colorMain6
CSS Variable: --color-main-6
Hex Value: #F5F3EF
Customizer Name: Colour 6
SCSS Variable: $colorMain7
CSS Variable: --color-main-7
Hex Value: #FAF9F7
Customizer Name: Colour 7
SCSS Variable: $colorMain8
CSS Variable: --color-main-8
Hex Value: #7A7061
Customizer Name: Colour 8
SCSS Variable: $colorFont
CSS Variable: --color-font
Hex Value: #333333
Customizer Name: Colour Font
SCSS Variable: $colorSuccess
CSS Variable: --color-success
Hex Value: #0B853E
Customizer Name: Colour Success
SCSS Variable: $colorWarning
CSS Variable: --color-warning
Hex Value: #BD8A00
Customizer Name: Colour Warning
SCSS Variable: $colorError
CSS Variable: --color-error
Hex Value: #CA0000
Customizer Name: Colour Error
Button colours are based on the colours defined above. They can be updated in css-variables.liquid.
Wrapper class: .input-wrapper
Label class: .label
Input class: .text-input
.input-feedback.input-feedback--error
Wrapper class: .select-wrapper
Label class: .label
Input class: .select
Wrapper class: .checkbox-wrapper
Label class: .checkbox-label
Input class: .checkbox
Wrapper class: .radio-wrapper
Label class: .radio-label
Input class: .radio
Wrapper class: .quantity-selector
Input class: .text-input.input-quantity
Button class: .quantity-selector__btn
Hover over the icon to get the filename
Tip: If an icon is black and you need it to be white (or vice versa) give filter: invert(1); a try
{% render 'icon-account' %}
{% render 'icon-cart' %}
{% render 'icon-close' %}
{% render 'icon-copy' %}
{% render 'icon-download' %}
{% render 'icon-facebook' %}
{% render 'icon-grid-large' %}
{% render 'icon-grid-small' %}
{% render 'icon-hamburger' %}
{% render 'icon-international' %}
{% render 'icon-phone' %}
{% render 'icon-pinterest' %}
{% render 'icon-play' %}
{% render 'icon-print' %}
{% render 'icon-search' %}
{% render 'icon-x' %}
Flags are taken from flag icons. If you require flag icons then uncomment the stylesheet on line 15 of theme.liquid
To display an icon use the code <span class="fi fi-gb"></span> where gb is the 2 letter country code. Add the class fis for a square icon
There is a VSCode snippet for this element. Type accordion and press TAB to insert the code.
There are two config options in attributes. Both accept boolean only (true or false).
If you'd like a mobile only accordion then set "mobileOnly": true. In this case accordion changes to a row with columns on desktop
If you'd like all accordion elements to collapse when you expand an accordion element (default behavior) then set "closeAllOnOpen": true, otherwise change it to false.
Accordion Title 1
Accordion Title 2
Accordion Title 3
This is used on client input content such as pages and articles
Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.
Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.
Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.
Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.
Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
“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.
Table Heading | Table Heading | Table Heading | Table Heading |
Table Content | Table Content | Table Content | Table Content |
Table Content | Table Content | Table Content | Table Content |
Table Content | Table Content | Table Content | Table Content |
Add any important sections below