Change color of Variant picker box and Quantity box to white in Dawn

cvette
Explorer
64 0 12

Hi!

Any help on how to change color of Variant picker box and Quantity box to white in Dawn?

Replies 26 (26)

mrashid
Shopify Partner
166 17 15

@cvette don't worry about it. please share store url

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

PageFly-Richard
Shopify Partner
4322 980 1639

Hi @cvette 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.quantity:before,.product-form__input--pill input[type=radio]+label,.select__select {
background-color: #fff !important;
}
.product-form__input--pill input[type=radio]:checked+label {
    background-color:#000;
    color: #fff;
}
</style>

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

cvette
Explorer
64 0 12

Thank you, that worked! Is there a way to now make the font bold and a bit larger?

 

 

 

Dawn 3.png

mrashid
Shopify Partner
166 17 15

@cvette please add this code in base.css

.select__select, .product-form__input .form__label {
    font-weight: 700;
    font-size: 16px;
}
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

Yes that did it. Should have done it to the quantity one as well ... Do you have a code for that? 

mrashid
Shopify Partner
166 17 15

@cvette share your store url...

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

My store is still live in Debut, I am working on the theme in Dawn before I take it live. How do I share it will you?

 

mrashid
Shopify Partner
166 17 15

@cvette open code . right click on previewUntitled.png

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
166 17 15

@cvette past code in base.css

.quantity__button svg {
    width: 13px;
}
.quantity__input {
    font-size: 16px;
    font-weight: 700;
}
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

Fixed! Again, I truly appreciate your help!! 

 

I have a few more things I am trying to fix if you have the time and if not I completely understand and appreciate all you have already done.

 

#1 - My headers will not center on any of my pages....

 

#2 - I cannot get the colors to change to my grey that is on my home page...

 

#3 - Is there a way to be able to size image banners...

 

 

 

Dawn 2.png

 

 

Dawn 4.png

 

 

Dawn 5.png

 

Dawn 6.png

mrashid
Shopify Partner
166 17 15

@cvette for banner. open customization, then open section settings and select your banner size. adapt to first Image recmended
rrr.png

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

I would like to be able to adjust it from side to side so it doesn't span across the whole screen

mrashid
Shopify Partner
166 17 15

@cvette for color check this short video
https://somup.com/cZ1logEQer

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

I think I may have called it the wrong thing ... not my banners but the larger picture that spans across the site...

I would like to be able to make this smaller so it does not go edge to edge

 

 

Dawn 7.png

mrashid
Shopify Partner
166 17 15

@cvette let me clear, you don't want full width banner? rightDawn 7.png

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

Now do we have a way to adjust the size on this?

mrashid
Shopify Partner
166 17 15

@cvette like this? 
Dawn 7.png

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

Yes. Will I be able to adjust it later if I need to?

mrashid
Shopify Partner
166 17 15

@cvette give me two minutes i will share short video for add code.

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
166 17 15

@cvette open image banner section in theme editor and update code 54 to 57 like in screenshot

<div
  id="Banner-{{ section.id }}"
  class="page-width banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>

mrashid_0-1718210051249.png

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

so delete what is there and add the code above?

mrashid
Shopify Partner
166 17 15

@cvette yes

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

That didn't seem to work, I ended up with this.

 

 

 

Dawn 10.png

mrashid
Shopify Partner
166 17 15

@cvette ohh sorry I don't understand the requirement

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
166 17 15

@cvette is it possible for you to share video

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
cvette
Explorer
64 0 12

Would like it to look like this.Dawn 9.png