Re: Change Button Border To Underline (Dawn Theme)

Solved

Change Button Border To Underline (Dawn Theme)

MMast
Trailblazer
182 1 25

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:

IMG_0546.jpeg

How I want my site to look:

IMG_0545.jpeg

https://decemberschild.com
password: dc

Accepted Solutions (4)
Moeed
Shopify Partner
5801 1577 1874

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

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Vinsinfo
Shopify Partner
446 152 149

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;
}

 

Vinsinfo_1-1714634797938.png

 

Result will be like,

Vinsinfo_0-1714634385897.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Dan-From-Ryviu
Shopify Partner
10065 2004 2050

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.

View solution in original post

Vinsinfo
Shopify Partner
446 152 149

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.

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
5801 1577 1874

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:

Moeed_0-1714633590433.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


MMast
Trailblazer
182 1 25

This is how the mobile view looks:

IMG_0547.jpeg

Moeed
Shopify Partner
5801 1577 1874

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

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


MMast
Trailblazer
182 1 25

That worked thank you! Is there a way to move the line down to my liking or back up if needed?

Dan-From-Ryviu
Shopify Partner
10065 2004 2050

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>

 

Screenshot 2024-05-02 at 14.30.39.png

 

 

- 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.

MMast
Trailblazer
182 1 25

This is how the mobile version looks with that code:

IMG_0548.jpeg

Dan-From-Ryviu
Shopify Partner
10065 2004 2050

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.

Vinsinfo
Shopify Partner
446 152 149

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;
}

 

Vinsinfo_1-1714634797938.png

 

Result will be like,

Vinsinfo_0-1714634385897.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
MMast
Trailblazer
182 1 25

This is how it looks on mobile view:

IMG_0549.jpeg

Vinsinfo
Shopify Partner
446 152 149

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.

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support