Shopify themes, liquid, logos, and UX
Hi there!
I’m looking to change my current underline on my button border to an underline that fits the words properly and also placed closer that works for both mobile and pc version. Examples shown below.
How my site looks:
How I want my site to look:
https://decemberschild.com
password: dc
Solved! Go to the solution
This is an accepted solution.
Hey @MMast
Remove the previous code and add this updated code with the same steps mentioned above.
<style>
a.button.button--secondary:after {
box-shadow: unset !important;
}
a.button.button--secondary {
text-decoration: underline !important;
}
</style>
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
@MMast Seems you have made some changes now. Please remove the underline and try below code. Let me know whether it is helpful for you.
1. From admin, go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Rich text" section and paste below code in the "Custom CSS" field like in the below attached screenshot.
.rich-text .rich-text__blocks .rich-text__buttons a.button {
min-height: auto !important;
padding: 3px 0px;
border-bottom: 1px solid #000000;
}
Result will be like,
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
This is an accepted solution.
Please update the code
<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
border-bottom: 1px solid #000;
bottom: 6px;
box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
padding-left: 0;
padding-right: 0;
}
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 an accepted solution.
@MMast Add below code with the previous code by following the steps mentioned in the previous comment. Let me know whether it works for you.
.rich-text .rich-text__blocks .rich-text__buttons a.button:after {
box-shadow: none !important;
}
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Hey @MMast
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>
a.button.button--secondary {
text-decoration: underline !important;
}
a.button.button--secondary:after {
left: unset !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is how the mobile view looks:
This is an accepted solution.
Hey @MMast
Remove the previous code and add this updated code with the same steps mentioned above.
<style>
a.button.button--secondary:after {
box-shadow: unset !important;
}
a.button.button--secondary {
text-decoration: underline !important;
}
</style>
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
That worked thank you! Is there a way to move the line down to my liking or back up if needed?
Hi @MMast
You can try to add this code to your theme.liquid file, after <head>
<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
border-bottom: 1px solid #000;
bottom: 6px;
box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
padding-left: 0;
padding-right: 0;
}
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 how the mobile version looks with that code:
This is an accepted solution.
Please update the code
<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
border-bottom: 1px solid #000;
bottom: 6px;
box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
padding-left: 0;
padding-right: 0;
}
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 an accepted solution.
@MMast Seems you have made some changes now. Please remove the underline and try below code. Let me know whether it is helpful for you.
1. From admin, go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Rich text" section and paste below code in the "Custom CSS" field like in the below attached screenshot.
.rich-text .rich-text__blocks .rich-text__buttons a.button {
min-height: auto !important;
padding: 3px 0px;
border-bottom: 1px solid #000000;
}
Result will be like,
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
This is how it looks on mobile view:
This is an accepted solution.
@MMast Add below code with the previous code by following the steps mentioned in the previous comment. Let me know whether it works for you.
.rich-text .rich-text__blocks .rich-text__buttons a.button:after {
box-shadow: none !important;
}
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024