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 thing we need to do is to choose a lock icon to put in your store. We have some available below for you to use, however if you want to add your own, you certainly can! Here is a video sharing how to add your own icon to your Shopify store that can then be added to the Upcart checkout button.
Here are Lock Icons we have available for you to select:
White
HTML to add:
<img class="upcartLockIcon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/WhiteLock2.png?v=1683833338">
HTML to add:
<img class="upcartLockIcon" src="<https://cdn.shopify.com/s/files/1/0591/9670/2877/files/Lock_White_4.png?v=1688577328>">
HTML to add:
<img class="upcartLockIcon" src="<https://cdn.shopify.com/s/files/1/0591/9670/2877/files/lock_icon_635ba3ed-7ec3-437e-8dce-cf53291aceb1.png?v=1681161869>">
Black
<img class="upcartLockIcon" src="<https://cdn.shopify.com/s/files/1/0591/9670/2877/files/image_4.png?v=1694188629>">
Black Lock Icon
<img class="upcartLockIcon" 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 we want to copy and paste it into the Upcart Settings > Settings > Translations > in the Checkout box. You can paste it either before the word “Checkout” or after. Additionally here is where you can change the word “Checkout” to something else, like our example below that says “Secure Checkout.”
Accessing Custom CSS Settings
To begin customizing the CSS for your Upcart, follow these steps:
Open the Upcart App within your dashboard.
Navigate to the Cart Editor.
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.
Locate the CSS input area.
Copy and paste the following code into the CSS input area:
.upcartLockIcon {
height: 20px;
padding-bottom: 3px;
padding-top: 3px;
margin-right: 3px;
}
[class*="styles_Button__"] a {
align-items: center !important;
display: flex !important;
justify-content: center !important;
}
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.