How do I customize the way my Happy Checkout pages look?
To add widgets to your Thank You page, be sure you've enabled them in the app properly and that the customized thank you page is enabled, as described here. You can also edit your site's checkout styles, as these are applied to your customized thank you page as well.
If you'd like to make further style changes, the Happy Checkout app will also let you add some custom CSS to your thank you page. Let's walk through using the optional CSS field in Happy Checkout under "Advanced". This box can support two different methods of CSS:
- A link to a CSS file
- Raw CSS code
Note: Neither of these options support Liquid.
A Link to a CSS File
If you'd like to have a designer or Shopify Expert customize the Happy Checkout layout, they can do so with a customized CSS stylesheet. You can then link to this stylesheet, and it will be used to add styling to your page.
Typically a web page contains a link tag to a CSS file like so:
<link rel="stylesheet" href="http://myshop.com/assets/style.css">
All that you need to place into the field is the following:
<a href="http://myshop.com/assets/style.css">http://myshop.com/assets/style.css</a>
Raw CSS Code
CSS is typically found between <style></style> tags in the page header, or within a style=""attribute in the page HTML. It looks like the following:
body{background:red}
You can add this raw CSS code directly into the custom CSS field (note that the the text input box does not expand in some browsers and is not supported). This will allow you to make adjustments that are not covered within your theme's checkout settings.