Solved

Can you add borders to web buttons on Shopify?

RowabiCo
Excursionist
27 1 11

Hello guys, I need to add the border to the buttons so that I can make it transparent inside and only shown the border like this? I know there are solutions posted but it didn't work for me. Could anyone please help me with this? Appreciate it!

 

For instance: 

RowabiCo_1-1649017803116.png

 

 

 

Our website is: https://www.rowabi.com or https://wabi-element.myshopify.com/

Accepted Solutions (2)

AvadaCommerce
Shopify Partner
3879 839 951

This is an accepted solution.

Hi @RowabiCo ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.min.css->paste below code at the bottom of the file:

.account-section--btn, .advanced-layout--hero__text-block .btn, .advanced-layout--hero__text-block .btn--secondary, .advanced-layout--hero__text-block .shop-now-wrapper--mobile .shop-now-button--secondary, .ajaxcart__footer .cart__checkout, .btn--full, .btn--load-more, .footer-email-submit, .homepage-featured-box-btn, .homepage-section-btn, .onboarding--sold-out a.btn, .quick-add-button, .quick-add-button-onboarding, .quick-add-button-variants, .shop-now-button, .shop-now-button-onboarding, .shop-now-wrapper--mobile .advanced-layout--hero__text-block .shop-now-button--secondary, .shopify-challenge__button, .show-view-all--button .btn, .sold-out-button, .spr-button {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@RowabiCo 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.min.css->paste below code at the bottom of the file:

.account-section--btn, .advanced-layout--hero__text-block .btn, .advanced-layout--hero__text-block .btn--secondary, .advanced-layout--hero__text-block .shop-now-wrapper--mobile .shop-now-button--secondary, .ajaxcart__footer .cart__checkout, .btn--full, .btn--load-more, .footer-email-submit, .homepage-featured-box-btn, .homepage-section-btn, .onboarding--sold-out a.btn, .quick-add-button, .quick-add-button-onboarding, .quick-add-button-variants, .shop-now-button, .shop-now-button-onboarding, .shop-now-wrapper--mobile .advanced-layout--hero__text-block .shop-now-button--secondary, .shopify-challenge__button, .show-view-all--button .btn, .sold-out-button, .spr-button {
    color: #000 !important;
    border: 1px solid !important;
    background: transparent !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 3 (3)

AvadaCommerce
Shopify Partner
3879 839 951

This is an accepted solution.

Hi @RowabiCo ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.min.css->paste below code at the bottom of the file:

.account-section--btn, .advanced-layout--hero__text-block .btn, .advanced-layout--hero__text-block .btn--secondary, .advanced-layout--hero__text-block .shop-now-wrapper--mobile .shop-now-button--secondary, .ajaxcart__footer .cart__checkout, .btn--full, .btn--load-more, .footer-email-submit, .homepage-featured-box-btn, .homepage-section-btn, .onboarding--sold-out a.btn, .quick-add-button, .quick-add-button-onboarding, .quick-add-button-variants, .shop-now-button, .shop-now-button-onboarding, .shop-now-wrapper--mobile .advanced-layout--hero__text-block .shop-now-button--secondary, .shopify-challenge__button, .show-view-all--button .btn, .sold-out-button, .spr-button {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@RowabiCo 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.min.css->paste below code at the bottom of the file:

.account-section--btn, .advanced-layout--hero__text-block .btn, .advanced-layout--hero__text-block .btn--secondary, .advanced-layout--hero__text-block .shop-now-wrapper--mobile .shop-now-button--secondary, .ajaxcart__footer .cart__checkout, .btn--full, .btn--load-more, .footer-email-submit, .homepage-featured-box-btn, .homepage-section-btn, .onboarding--sold-out a.btn, .quick-add-button, .quick-add-button-onboarding, .quick-add-button-variants, .shop-now-button, .shop-now-button-onboarding, .shop-now-wrapper--mobile .advanced-layout--hero__text-block .shop-now-button--secondary, .shopify-challenge__button, .show-view-all--button .btn, .sold-out-button, .spr-button {
    color: #000 !important;
    border: 1px solid !important;
    background: transparent !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

Wow amazing, thank you so much @KetanKumar @AvadaCommerce ! It works like magic!