Color swatch size - Dawn Theme

Solved

Color swatch size - Dawn Theme

T-Hubscher
New Member
8 0 2

I want to enlarge the color swatches on my product template in Shopify so that each one appears on a separate line...

I would also like to change the colour of the "Shipping" link to black. 

 

www.peterandson.co.nz

 

THubscher_0-1720645692653.png

 

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @T-Hubscher

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.swatch--square {
    height: 50px !important;
    width: 50px !important;
}
</style>

Here is result: 

BSSCommerceHDL_0-1720652308096.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 5 (5)

Unique_Horlart
Excursionist
25 2 5

Hi @T-Hubscher,

 

Are you conversant with Shopify theme liquid before? This can only be done from the Shopify theme coding... Let me know if you can do it, because if not explained, you might end up deleting things and affect the store design.

If helpful then please Like and Accept the Solution.
Want to modify or custom changes to the store Message me on WhatsApp https://zeep.ly/OvTxI | Email unique.horlart@aol.com
T-Hubscher
New Member
8 0 2

Hi, 

Yes, my site uses the liquid theme. I will be able to update the code. Thank you!

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Hi @T-Hubscher 

Im not sure if i understand what you mean "each one appears on a separate line" do you want make it a dropdown menu? Like this.

Made4uoRibe_0-1720649125909.png

or just to enlarge? if it is check this one. 

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.

 

@media screen and (min-width: 750px) {
    .product-form__input--swatch .swatch-input__input+.swatch-input__label {
        --swatch-input--size: 4rem;
    }
}
.product__tax.caption.rte a {
    color: rgb(var(--color-foreground));
}

 

  • And Save. 
  • result:
  • Made4uoRibe_1-1720649285672.png

     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
T-Hubscher
New Member
8 0 2

No thanks. 

I want the colour swatches to be bigger so that customers can easily see the grain in the images.

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @T-Hubscher

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.swatch--square {
    height: 50px !important;
    width: 50px !important;
}
</style>

Here is result: 

BSSCommerceHDL_0-1720652308096.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency