Color swatch size - Dawn theme

[Xakhil]

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

This is how it looks now

Its not visible at all.

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

[Xakhil]

Hi @code_with_adam  Dm'd you the details

[DaisyVo]

Hi @Xakhil 

Could you please share the store link with us? 

Thank you!

Best,

Daisy -  Avada Support Team.

[Xakhil]

Hi @DaisyVo ,

Dm'd you the details 

[DaisyVo]

Hi @Xakhil 

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

Best,

Daisy - Avada Support Team

[DaisyVo · Accepted solution]

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;
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Xakhil]

@DaisyVo  sorry but i don't see visible changes

[DaisyVo]

Hi @Xakhil 

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

Thank you!

Best,

Daisy - Avada Support Team

[Xakhil]

Thank you for the reply @DaisyVo 

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

[DaisyVo]

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 </head> tag between {% style %} and {% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[DaisyVo]

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

@Xakhil 

[Xakhil]

@DaisyVo  this section is now visible on the very top

[DaisyVo]

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

[Xakhil]

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

[DaisyVo]

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 

[Xakhil]

@DaisyVo  Thank you it worked.

[DaisyVo]

That's great to know. I'm glad it can help ❤️