How to add credit card logos to Bigcommerce checkout

Trust symbols like credit card logos and security seals make a big difference in building confidence in your customer’s mind, especially if you are a relatively small and unknown retailer.

Bigcommerce doesn’t come with this functionality out of the box, but adding these symbols is pretty simple business, no matter what theme you are using. For this tutorial, I will be using a “White” theme(BigCommerce color codes their themes).

Let’s get started!

First off, you want to login to your Bigcommerce store’s control panel, go the the “Web Content” menu, and select “Image manager.”

Screen Shot 2014-04-25 at 6.35.17 PM

Next, upload your credit card logos. Shopify stores have the best ones, so I’ve pieced together a logo that I use in my stores that I’ve borrowed from them:


Next, in the top right of your Bigcommerce Admin page, click the link that says “Design.”

 Update: I’ve developed an app for Bigcommerce that lets you set up back in stock email notifications for customers looking at out of stock products. You can install it from the app store here.

Once you are in there, under the “Themes” tab, you will see which theme is active on your site. Next to that, there will be a button saying “Edit HTML/CSS”. Click on the button and a new tab will open with a screen that shows you a bunch of files on the left and some code on the right.

Scroll down the list of files and find “checkout_express.html” if you are using Express Checkout(1 page). If you use a multi-page checkout, you need follow these steps for each one of these pages: for checkout.html, checkout_payment.html, checkout_address.html, checkout_shipper.html, and checkout_confirm.html.

checkout express

Once you open up checkout_express.html, find this piece of code:

<h2>Secure Checkout</h2>

Delete that line, we are going to add that text later.

Next, find the following:

<div class="Block ExpressCheckout">

Above that, there may be another line of code like

<div class ="Content [something]">

ABOVE that line, add the following code:

<div id = "checkoutHeader">
<h2 style ="text-align:center; padding:10px;">Secure & Safe Checkout</h2>
<div style = "margin-left:100%; margin-right:100%; display:inline-block;">
<img src = "URL of the image you uploaded">

Click save, and go back to the file list. Scroll up and find a file called “styles.css”.

At the top of styles.css, hit enter a few times to make some room, and add the following code:

#checkoutHeader {
float: left;
width: 100%;

Voila! You should be done. Open up your checkout page to make sure everything is OK, and if it is, awesome!

Basically, we are adding a section to your checkout page where there is a block that takes up the width of the page. Inside that block, there is a headline that says “Secure & Safe Checkout” that is centered in the page. Below that, there is another block that holds the credit card logos we just uploaded. The logos will also be in the center of the page, just below the headline.

Please share this post if you found it useful, and let me know in the comments if you have any questions!

Opt In Image
You will love my eBook!

Get my 42 page eBook where you will learn:

  • How to market your online store
  • The different marketing channels available
  • How to prioritize each one.

The best part? It's FREE when you subscribe!


  1. I followed the instructions above but I notice the image is not centered like the wording is there something else I need to do to make the image centered?

    Thank you

  2. Really I can integrate my credit card logos to BigCommerce checkout. I haven’t imagined of ever. Is it possible to do so?

Speak Your Mind