* One-Page-Checkout *
* One-Page-Checkout *
Cart 0

Custom CSS Examples - Shopify Customized Checkout

Customize Checkout

Locate the Custom CSS section in TeleCheckout Admin

1. Scroll down to the “Customize checkout” section

customize checkout section

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

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



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

change h2 color

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

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

change time hot font

.time-hot { color: green; }

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

cart preview font

#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:

@import url(//fonts.googleapis.com/css?family=Open+Sans);


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

body { font-family: 'Open Sans', sans-serif; }


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 add text preview

.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;}

Older Post Newer Post