FROM CACHE - en_header

Brooklyn - Issue with variant title font size and border

Solved
vanessaliew
Explorer
52 0 19

Hi All, I have some issue with the variant on brooklyn theme,

1. I would like to change the variant font size ("Size" and "Color) Only

2. There is some weird hover border with round corner appearing when i click on an option from the variant, I want to remove it and make it the same as the border below.

Picture1.png

3. I want to change the link background color to black instead of blue. Besides the dropdown border appears to be dark grey i also want to change it to black instead matching the main border color.

Picture3.png

 

Please help me thank you so much!

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
10767 2345 3342

This is an accepted solution.

@vanessaliew 

Please add the following code at the bottom of your assets/timber.scss.liquid file.

.swatch-label {
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: lowercase !important;
}

@media only screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px){
.swatch-drop-down {font-size: 11px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 7 (7)
WebCare
Tourist
5 1 1

Hello @vanessaliew 

Can you share your store link?

If reply helpful then please Like and Accept Solution.
If you need to make custom changes in your theme you can contact me in Private message
dmwwebartisan
Shopify Partner
10767 2345 3342

@vanessaliew 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
vanessaliew
Explorer
52 0 19
dmwwebartisan
Shopify Partner
10767 2345 3342

@vanessaliew 

I checked your product page but form me the layout look like bit different. Please see below:

options-layout.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
vanessaliew
Explorer
52 0 19

Hi @dmwwebartisan ,

I am using an app call variant swatch king for the variant hence it had become like that, but now here's an issue after i used the app, i don't know where to edit the code even after i copied the code from inspect to my theme.css it is still not working, what I want to do is like below:

1. I want to change the variant title font size and weight (not bold)

2. The dropdown hover border issue still occurs and the font size for "SMALL" is bigger on mobile which i dont want

3. I want the dropdown border to be the same length as the "add to cart" button below

4. I want to remove the " - Brown Corduroy" words beside COLOR

5. I want the title to remain the same even before selecting any color because it will say "Select a Color"

6. When i click the dropdown button the link color is blue i want it to be black

Your help means a lot, Thanks.

12.PNG

3.PNG

dmwwebartisan
Shopify Partner
10767 2345 3342

This is an accepted solution.

@vanessaliew 

Please add the following code at the bottom of your assets/timber.scss.liquid file.

.swatch-label {
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: lowercase !important;
}

@media only screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px){
.swatch-drop-down {font-size: 11px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
vanessaliew
Explorer
52 0 19