Custom CSS Examples - Shopify Customized Checkout

Locate the Custom CSS section in TeleCheckout Admin

1. Scroll down to the “Customize checkout” section

2. Add your custom css codes in the custom css text area.

How to Add Reviews to the Checkout In Shopify

Copy and paste the following code to the Custom CSS section of TeleCheckout in Shopify:

.about-section p {
border-color: #d8232f;
border-width: thick;
color: #d8232f;
padding: 1em;
border-style: inset;
} 

Paste the review in the Custom Footer section of TeleCheckout:

★★★★★
Très bon produit je recommande.
Très facile à utiliser.
- John Doe -

How to create a Dark Theme in TeleCheckout with Custom CSS

Change the main colors in the Customize checkout section of TeleCheckout:

Accent Text & Buttons: #d8232f
Background: #000000

Copy and paste the following code to the custom CSS section of TeleCheckout:

.container > .row{ background-color: black; margin-bottom: 2em; }
.container { background-color: #f0f0f0; }

How to customize TeleCheckout’s fonts and colors

Customize

1. To change section colors and fonts add the code below:

h2 { color: gray; font-family: serif; }

2. To change “Strong demand…” texts colors and fonts add the code below:

3. To change default texts colors and fonts add the code below:

#edit_checkout { color: darkgray; font-family: sans-serif; }

Replace sans-serif with the font you wish to use.

Replace darkgray with your favourite color.

Custom Fonts

Google Fonts offers a hosted font solution as a way to use their fonts. The following is an example of using @import to load the Open Sans font from Google Fonts:

Then we can use it to style elements, or the whole page like this:

Note that custom fonts will slow down the loading of your checkout if the selected font includes unused characters or symbols. See this article on how to optimize the fonts’ performance: https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

The Final Code

h2{ color: gray; font-family: serif; }
.time-hot { color: green; }
#edit_checkout { color: darkgray; font-family: sans-serif; }

Adding additional text to COD payment method

.cod-gateway p:after { content: " Enter here custom specific Instructions"; }
.cod-gateway p { text-align: center; }

How to disable autocomplete

To hide the address autocomplete feature, simply add the following line to your custom CSS:

.pac-container{display: none;}

How to change the order of the payment methods

Before	After

To change the order of the payment method in TeleCheckout, simply add the following code to your custom CSS:

.payment-method {display: grid;}
.gateway-option:nth-of-type(1) {order: 4;}
.gateway-option:nth-of-type(2) {order: 3;}
.gateway-option:nth-of-type(3) {order: 2;}
.gateway-option:nth-of-type(4) {order: 1;}
.gateway-option {margin-top: 10px;}

Additionally, to make the COD title bold:

.js-cod-gateway + .custom-control-label {font-weight: bold;}

How to show the top security badges on mobile

The security badges are hidden on mobile by default, you can show them by adding the following line to the custom CSS of TeleCheckout:
.badges-wrapper{display: block!important;}