Checkout Customization
Checkout Customization A guide to making checkout your own
Checkout was designed from the ground up to be fast, secure and easy to use on any device. It’s entirely responsive, starting from mobile and then adapting to take advantage of larger screens. You can have fine grained control over the appearance of your checkout by including a checkout.scss.liquid asset in your theme. By providing styles that make checkout suit your theme, your customers will have a more seamless buying experience.
Checkout Customization
1
Changelog August 21st, 2014 •
Added instructions on how to use the data-overrides-fieldset attribute to hide our default checkout settings in settings.html. Learn more about this change
Checkout Customization
2
checkout.scss.liquid Checkout uses the BEM syntax to avoid nesting as much as possible. You should try to avoid deep nesting of selectors and use the simplest selector to achieve your desired results. For example, if you wanted to style the name of the products inside the order summary, you would use:
.product__info__name { color: green; }
Instead of
.order-summary .order-summary__section .product_list .product_info .product__info__name { color: red; }
!important Since your checkout stylesheet is loaded after the base stylesheet, there’s no need to add !important to every property. Reserve the use of !important for cases where it’s absolutely necessary.
Checkout Customization
3
Checkout pages Checkout is made up of 4 different pages that you need to take into consideration when styling checkout: •
Main: This is the main checkout page.
•
Thank you: This is the page you see after an order has been completed.
•
Inventory issues: This page notifies customers in case a product becomes unavailable while they’re in the checkout process.
•
Processing/Forward: Temporary page to let your customers know about an in-between state.
Buttons
Checkout Customization
4
Here’s the markup for these button styles:
Disabled button
Use these classes to provide custom button styles that match your theme.
Breakpoints
The default stylesheet has 3 different breakpoints that you can decide to use in your stylesheet. 1. Mobile (0px and up) 2. Tablet (600px and up) 3. Desktop (1000px and up) 4. Large Desktop (1100px and up)
Here’s an example of media-query you could use in your checkout.scss.liquid:
@media all and (min-width: 600px) { ... }
Checkout Customization
5
Fields Here’s a simplified example of what the markup looks like:
Email
Fields can have 3 states: default, focus and error, denoted by the classes field-focus and field--error. You should use these to customize the appearance using these classes.
Modals Policies and processing/forwarding pages are presented in a full-screen modal.
× Shop One Refund Policy Print ...
Checkout Customization
6
Notices
Two types of notices can be found on Checkout: •
Warning: Used to notify the user that the total of their order has changed before they completed their purchase.
•
Error: Used to communicate an error to the user.
Uh oh!
Checkout Customization
7
Custom webfonts & additional scripts You can load your self-hosted webfonts directly from the checkout.scss.liquid stylesheet using an @font-face declaration.
External assets Checkout uses SSL encryption to ensure a safe buying experience for your customers. If you do load images or additional content, it needs to be served via https:// to be rendered on the page. We recommend that you use our CDN to host all of your assets.
Feature detection A few utility classes are included on the element: •
Javascript: js/no-js lets you know if the browser supports javascript or not.
•
Browser and OS: For example, a user running Chrome on OS X would have the classes: mac chrome
•
Modernizr: We use Modernizr to detect if the browser supports certain CSS properties like rgba, multiple background images, box-shadows, pseudo-elements and inline SVG.
Checkout Customization
8
Here’s an example of the classes applied when browsing from Chrome on OS X:
Feel free to use these classes to provide an improved experience to older browsers.
Checkout settings We provide a few default settings to style a shop’s checkout. If you would like to provide your own, you can hide our defaults by adding a data-overrides-fieldset=”checkout” attribute to the fieldset containing your checkout settings in settings.html.
...
Checkout Customization
9
Checkout was designed from the ground up to be fast, secure and easy to use on any device. It’s entirely responsive, starting from mobile and then adapting to take advantage of larger screens. You can have fine grained control over the appearance of your checkout by including a checkout.scss.liquid asset in your theme. By providing styles that make checkout suit your theme, your customers will have a more seamless buying experience.
Checkout Customization
1
Changelog August 21st, 2014 •
Added instructions on how to use the data-overrides-fieldset attribute to hide our default checkout settings in settings.html. Learn more about this change
Checkout Customization
2
checkout.scss.liquid Checkout uses the BEM syntax to avoid nesting as much as possible. You should try to avoid deep nesting of selectors and use the simplest selector to achieve your desired results. For example, if you wanted to style the name of the products inside the order summary, you would use:
.product__info__name { color: green; }
Instead of
.order-summary .order-summary__section .product_list .product_info .product__info__name { color: red; }
!important Since your checkout stylesheet is loaded after the base stylesheet, there’s no need to add !important to every property. Reserve the use of !important for cases where it’s absolutely necessary.
Checkout Customization
3
Checkout pages Checkout is made up of 4 different pages that you need to take into consideration when styling checkout: •
Main: This is the main checkout page.
•
Thank you: This is the page you see after an order has been completed.
•
Inventory issues: This page notifies customers in case a product becomes unavailable while they’re in the checkout process.
•
Processing/Forward: Temporary page to let your customers know about an in-between state.
Buttons
Checkout Customization
4
Here’s the markup for these button styles:
Disabled button
Use these classes to provide custom button styles that match your theme.
Breakpoints
The default stylesheet has 3 different breakpoints that you can decide to use in your stylesheet. 1. Mobile (0px and up) 2. Tablet (600px and up) 3. Desktop (1000px and up) 4. Large Desktop (1100px and up)
Here’s an example of media-query you could use in your checkout.scss.liquid:
@media all and (min-width: 600px) { ... }
Checkout Customization
5
Fields Here’s a simplified example of what the markup looks like:
...
Fields can have 3 states: default, focus and error, denoted by the classes field-focus and field--error. You should use these to customize the appearance using these classes.
Modals Policies and processing/forwarding pages are presented in a full-screen modal.
× Shop One Refund Policy Print ...
Checkout Customization
6
Notices
Two types of notices can be found on Checkout: •
Warning: Used to notify the user that the total of their order has changed before they completed their purchase.
The total of your order has changed. Please make sure you’re aware of the changes and click ‘Complete my purchase’ to place your order.
•
Error: Used to communicate an error to the user.
Uh oh!
The shipping rate you selected is no longer available.
Checkout Customization
7
Custom webfonts & additional scripts You can load your self-hosted webfonts directly from the checkout.scss.liquid stylesheet using an @font-face declaration.
External assets Checkout uses SSL encryption to ensure a safe buying experience for your customers. If you do load images or additional content, it needs to be served via https:// to be rendered on the page. We recommend that you use our CDN to host all of your assets.
Feature detection A few utility classes are included on the element: •
Javascript: js/no-js lets you know if the browser supports javascript or not.
•
Browser and OS: For example, a user running Chrome on OS X would have the classes: mac chrome
•
Modernizr: We use Modernizr to detect if the browser supports certain CSS properties like rgba, multiple background images, box-shadows, pseudo-elements and inline SVG.
Checkout Customization
8
Here’s an example of the classes applied when browsing from Chrome on OS X:
Feel free to use these classes to provide an improved experience to older browsers.
Checkout settings We provide a few default settings to style a shop’s checkout. If you would like to provide your own, you can hide our defaults by adding a data-overrides-fieldset=”checkout” attribute to the fieldset containing your checkout settings in settings.html.
...
Checkout Customization
9
