Skip to main content

​
Introduction

Adding a lock icon to your checkout button is a simple yet effective way to boost customer confidence by showing that their payment information is secure. This familiar symbol reassures customers about their data protection, making them more comfortable during the checkout process. In this tutorial, I’ll guide you on how to add a lock icon to your checkout button using CSS, which will enhance security and improve the overall user experience. These steps are perfect for store owners or developers with a basic understanding of CSS. By adding this small but impactful visual cue, you can align the Upcart checkout button with your site’s design, helping to build trust and encourage customers to complete their purchases. Let’s get started!

​
Getting Started: Choose a Lock Icon

First, you’ll need to choose a lock icon to add to your store. We have some available below for you to use, but you’re welcome to use your own. To add a custom icon, upload it to your Shopify store’s Files section under Settings > Files, then copy the URL and paste it into the icon field in Upcart.

​
Here are Lock Icons we have available for you to select:

HTML to add: Image 
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/WhiteLock2.png?v=1683833338">
HTML to add: Image 
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/Lock_White_4.png?v=1688577328">
HTML to add: Image 
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/lock_icon_635ba3ed-7ec3-437e-8dce-cf53291aceb1.png?v=1681161869">
HTML to add: Image 
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/image_4.png?v=1694188629">
HTML to add: Image 
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/lock_icon_Black.png?v=1681162020">

​
Placing the Lock Icon:

After choosing the lock icon, go to Manage All Carts > Edit > Settings > More Settings > Edit Copy. You can paste it either before the word “Checkout” or after. Additionally, this is where you can change the word “Checkout” to something else, such as “Secure Checkout” or similar. Icon

​
Accessing Custom CSS Settings

To begin customizing the CSS for your Upcart, follow these steps:
  1. Open the Upcart App within your dashboard.
  2. Navigate to the Cart Editor.
  3. Click on Settings and scroll to the bottom of the page until you find the section labeled “Custom CSS”.

​
Applying Custom CSS to show the lock icon:

Once you are in the Custom CSS section, copy and paste the code below to show and place your lock icon. Please note that the bigger the padding number, the smaller the icon will be.
  1. Locate the CSS input area.
  2. Copy and paste the following code into the CSS input area:
  3. Adjust height under .upcart-custom-lock-icon for a different size of the icon. Recommend 16px or 20px for a bigger lock icon
.upcart-custom-lock-icon {  
  height: 12px;   
  margin-right: 6px;   
}   
  
.upcart-checkout-button {   
  display: flex !important;  
  align-items: center;   
  justify-content: center;   
}

​
Conclusion

By following these steps, you’ve successfully added a lock icon to your checkout button, making your customers feel more secure and confident during their purchase. This small change can make a big difference in how your store is perceived, helping to build trust and improve the overall shopping experience.

​
Still Need Help?

If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer. See Shopify Experts