Color swatch size - Dawn Theme

[T-Hubscher]

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

[T-Hubscher]

Hi, 

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

[Made4uo-Ribe]

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.

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:
• 

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

[T-Hubscher]

No thanks. 

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

[BSSCommerce-HDL · 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: 

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 😍