Customizing your Shopify store helps it stand out and attract more customers. One easy way to improve the look of your buttons is by adding a stroke (or border) around them. A stroke gives buttons a clean, sharp outline that makes them more noticeable.
In this guide, I’ll walk you through how to add a stroke to your Shopify buttons with simple CSS, which is a styling language used to control the visual presentation of HTML documents.
Let’s get started!
After installing your Shopify theme, you have two methods to edit your store’s look and feel.
First, you need to add a bit of CSS code to your Shopify theme. Here’s how:
Now that you’re in the CSS file, it’s time to write the code that adds the stroke (border) to your buttons. Scroll to the bottom of the file, and paste the following CSS:
button, .btn {
border: 2px solid black; /* Adds a 2px black stroke */
border-radius: 5px; /* Makes the edges slightly rounded */
padding: 10px 20px; /* Adjusts the button size */
font-weight: bold; /* Makes the text bold */
cursor: pointer; /* Changes the mouse cursor to a pointer on hover */
}Explanation of the Code:
After adding the CSS code, click Save at the top-right corner of the code editor. This saves the changes to your theme.
Go back to the Customize page and click Preview or View to see how the new button stroke looks. Make sure it appears correctly on your buttons across the site.
Customizing the stroke allows you to align the buttons with your brand’s color palette and style. Here are some ways you can fine-tune the look of your buttons:
You can change the stroke to match your theme’s color scheme. Simply replace the black value in the border property with a different color name, hex code, or RGB value.
Examples:
/* Border with a hex code color */
button, .btn {
border: 2px solid #3498db; /* Blue stroke */
}
/* Border using an RGB color */
button, .btn {
border: 2px solid rgb(255, 99, 71); /* Tomato red stroke */
}
💡 Pro Tip:
If you want the border to be more subtle or more prominent, you can adjust the thickness by changing the first number in the border property.
Examples:
/* Thin border */
button, .btn {
border: 1px solid #000;
}
/* Bold, thicker border */
button, .btn {
border: 5px solid #000;
}💡 Design Tip:
You’re not limited to a solid border! CSS lets you experiment with other border styles like dashed, dotted, or double.
Examples:
/* Dashed border */
button, .btn {
border: 2px dashed #e74c3c; /* Red dashed stroke */
}
/* Dotted border */
button, .btn {
border: 2px dotted #2ecc71; /* Green dotted stroke */
}
/* Double border */
button, .btn {
border: 3px double #9b59b6; /* Purple double stroke */
}Adding hover effects makes your buttons feel interactive. Here’s an example where the stroke color changes when the user hovers over the button.
button, .btn {
border: 2px solid black;
transition: border-color 0.3s ease; /* Smooth transition effect */
}
button:hover {
border-color: #3498db; /* Changes to blue on hover */
}💡 Pro Tip: Use a transition effect to make the hover change look smoother and more professional.
If the stroke doesn’t show up as expected or you encounter layout issues, here are some common problems and solutions:
Some Shopify themes may already have built-in styles that override your custom CSS. If your border doesn’t appear, you can use the !important tag to ensure your code takes priority.
button, .btn {
border: 2px solid black !important;
}💡 Tip: Use !important carefully—it overrides all other CSS rules. It’s best to apply it only when necessary.
If your store uses different types of buttons (like “Add to Cart”, “Buy Now”, or navigation buttons), you might want to apply the stroke to certain buttons only. To do this, use the specific class or ID of the button.
Example:
/* Target only the 'Add to Cart' button */
.add-to-cart {
border: 2px solid red;
}Use Chrome DevTools (right-click a button and select Inspect) to find the correct class or ID for each button.
Sometimes, your changes may not show up right away due to browser caching. Clear your browser’s cache or open your site in Incognito mode to see if the changes take effect.
Make sure you’re adding the CSS code to the correct file. Some themes use multiple CSS files (like theme.scss or custom.css). If your changes don’t appear, double-check that you added the code in the right place.
Some Shopify themes use JavaScript to control button styles. If your border disappears when interacting with the site (like during page loads or clicks), a script may be overwriting your CSS.
Solution:
You can try adding this CSS to make sure the style is always applied:
button, .btn {
border: 2px solid black !important;
box-sizing: border-box; /* Ensures the border is part of the button’s size */
}If the stroke looks fine on desktop but doesn’t appear properly on mobile, you may need to use media queries to customize the button style for smaller screens.
Example:
@media (max-width: 768px) {
button, .btn {
border: 1px solid black; /* Thinner border for mobile */
}
}Adding a stroke to your Shopify buttons is an easy way to improve their design and make them stand out. With just a little CSS, you can control the color, thickness, style, and hover effects to create buttons that match your store’s theme. If you encounter issues, don’t worry—troubleshooting tips like clearing the cache or using !important will help you fix them quickly.
Looking to boost your Shopify store’s revenue without extra effort? Try Simple Affiliate – an easy-to-use affiliate marketing tool that helps you create your own referral program. Drive more sales by letting your customers promote your products for you.
