Add Custom Styling

By default, Happy Checkout will adopt your shop's existing style settings. Should you need to make adjustments, you may do so in one of two ways.

Add Custom CSS

Update styling by adding custom CSS directly via the Advanced > Custom CSS setting:

Link to External Stylesheet

If you'd prefer to define your custom CSS on an existing/external file, paste a secure (https) link to this file in the Advanced > Custom CSS setting:

Common Style Adjustments

Example 1: Move Social Integrations

AddFor some themes, Happy Checkout's social integrations will flush to the bottom of the page. To move these up, add the following CSS.

.order-summary__sections {
	height: auto !important; 
}

Example 2: Add Spacing Between Social Integrations

Use the following code to add a bit of extra space between your Twitter, Facebook, or Pinterest modules. 

.he-modules {
	margin-bottom: 5em; 
}

Example 3: Customize Pinterest's Appearance

The follow modifies the appearance of the Pinterest module. You're free to add any custom CSS to better integrate these modules with your shop.

.happy-ending .he-module-pinterest select {    
	width: 80%;    
	border: 1px solid #a7a7a7;    
	padding: 4px 10px; 
}  
.happy-ending .he-module .follow {
	font-size: 16px;
	margin-top: 15px;
}