Shopify themes, liquid, logos, and UX
Hello,
I am working on a client's website (Stiletto theme) and need help with CSS to remove the underline on the 'Text' Button styles. I have attached a screenshot of the button I am referring to.
Their website is www.arttoart.com.au
Hey @BellesandBells
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.btn.btn--callout span:before {
display: none !important;
}
</style>
RESULT
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi,
Go to online store
Edit Code
Open theme.css file
Paste the following code at the end of the file and save.
.btn.btn--callout span:before {display: none;}
.btn.btn--callout span:after {display: none;}
@BellesandBells oh sorry for facing this issue can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
.btn--overlay.btn--callout::before, .btn--overlay.btn--callout::after {display: none;}
Hello @BellesandBells
If you want to completely remove this underline from all buttons, you can just remove the code from the theme.css file.
Go to Online store -> Themes -> Edit code, and then open the theme.css file.
Find this piece of code in the file:
/* Full-width underline below the button */
.btn--overlay.btn--callout::before {
content: "";
position: absolute;
bottom: -5px; /* Position the line just below the button */
left: 0;
width: 100%; /* Make the line span the full width of the button */
height: 1px; /* Line thickness */
background-color: white; /* Line color */
}
and just remove it.
I hope this helps.
You can remove it by adding this code to Custom CSS in store admin > Sales channels > Online store > Themes > Customize
html .btn--overlay.btn--callout:before {
height: 0;
}
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
section#shopify-section-template--22506249978164__d56e6473-06b9-43cc-aded-f0d0e84e7729 .btn.btn--callout::before {
display: none !important;
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi BellesandBells
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file
.grid-item__button.section-blocks__button {
border-bottom: unset !important;
}
Result:
Best,
Liz
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025