Search form Icon/Text Alignment

Solved
kaiyacollects
Explorer
46 1 20

I am trying to center the Search icon and "Checkout" text in the secondary button in the mobile drawers.

Thanks in advance!

 

Unknown (2).png

 

 

Unknown.png

 

Is it also possible to change the color of just the search secondary button? When I change the secondary button in the theme settings it also changes the color of the checkout button.

 

Wahab_Ahmad
Shopify Partner
718 112 174

Dear @kaiyacollects,

Thank you for sharing your problem. Kindly share the store link and tell us a color name for the button.

KetanKumar
Shopify Partner
20430 2114 7676

@kaiyacollects 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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
kaiyacollects
Explorer
46 1 20

Sorry forgot to add the link:

www.kaiyascollectibles.com

pw = yaya

I would like the color of the search button to be black.

 

Thanks so much!

0 Likes
Natztech
Shopify Partner
1331 369 905

This is an accepted solution.

hello @kaiyacollects 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 800px){
.drawer .btn--secondary {
    height: auto;
    line-height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon.icon-search{
   height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Natztech
Shopify Partner
1331 369 905

This is an accepted solution.

hello @kaiyacollects 

change the background color of the checkout button and search button

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste the below code at the bottom of the file.

 

.drawer .btn--secondary.cart__checkout {
    background:#101212 !important;
}
.btn--secondary.icon-fallback-text{
    background:#101212  !important;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
kaiyacollects
Explorer
46 1 20

Works PERFECTLY!! Thanks so much

0 Likes