Solved

Change Button Border To Underline (Dawn Theme)

MMast
Explorer
131 0 10

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
3878 981 1225

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Vinsinfo
Shopify Partner
302 112 107

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 bizdev@vinsinfo.com 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
7897 1536 1566

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 ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Vinsinfo
Shopify Partner
302 112 107

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 bizdev@vinsinfo.com 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
3878 981 1225

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
MMast
Explorer
131 0 10

This is how the mobile view looks:

IMG_0547.jpeg

Moeed
Shopify Partner
3878 981 1225

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
MMast
Explorer
131 0 10

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
7897 1536 1566

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 ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MMast
Explorer
131 0 10

This is how the mobile version looks with that code:

IMG_0548.jpeg

Dan-From-Ryviu
Shopify Partner
7897 1536 1566

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 ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Vinsinfo
Shopify Partner
302 112 107

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 bizdev@vinsinfo.com 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
Explorer
131 0 10

This is how it looks on mobile view:

IMG_0549.jpeg

Vinsinfo
Shopify Partner
302 112 107

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 bizdev@vinsinfo.com 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