Color swatch size - Dawn theme

Store Design
,
1

I want to increase the sizer of my product color swatches.

This is how it looks now

Screenshot 2024-11-15 201412.png
Screenshot 2024-11-15 201412.png839Ă—419 34.5 KB

Its not visible at all.

Is there anyway i can optimize it for mobile and desktop view ?

2

Hi @code_with_adam Dm’d you the details

3

Hi @Xakhil

Could you please share the store link with us?

Thank you!

Best,

Daisy - Avada Support Team.

4

Hi @DaisyVo ,

Dm’d you the details

5

Hi @Xakhil

Sorry, but what do you mean? May I know what dm’d stand for?

Best,

Daisy - Avada Support Team

6

Hi @Xakhil

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

variant-selects label.swatch-input__label {
    width: 40px !important;
    height: 40px !important;
}
variant-selects label.swatch-input__label span.swatch {
    width: 38px !important;
    height: 38px !important;
}

image (17).png
image (17).png1429Ă—727 178 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

7

@DaisyVo sorry but i don’t see visible changes

8

Hi @Xakhil

May I see the screenshot on where you added it from your end?

Thank you!

Best,

Daisy - Avada Support Team

9

Thank you for the reply @DaisyVo

Screenshot 2024-11-16 184735.png
Screenshot 2024-11-16 184735.png495Ă—704 25.1 KB

There is only 1 product with variant that has color swatch which is the jacket.

10

Hi @Xakhil

You can copy the code I shared above to the theme code instead. Please remove it from the CSS field earlier.

Here is the detailed guide to apply the code to the theme code part:

Step 1: Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
Step 2: Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
Step 3: Add the following code at the bottom of the file above tag between {% style %} and {% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

11

Here is the screenshot for example: https://prnt.sc/V_hfaYkjl_9b

@Xakhil

12

Screenshot 2024-11-16 185717.png
Screenshot 2024-11-16 185717.png1919Ă—142 15 KB

@DaisyVo this section is now visible on the very top

13

@Xakhil Would you mind sharing the full screenshot where you added it from your end please?

14

@DaisyVo sorry i misplaced the code before. It worked thank you so much :+1: . Is there anyway i can increase the size ?

15

Hi @Xakhil

https://prnt.sc/HZ53MBMmzr63 could you please change the number from the code we shared here to adjust the size? You can change it to 100 and see if the variant icons can be bigger.

If it doesn’t work, then please share with me the full sreenshot of where you added the code in your theme. Then we can provide you with the suitbale solution. Thank you!

Best,

Daisy - Avada

16

@DaisyVo Thank you it worked.

17

That’s great to know. I’m glad it can help :heart: