How can I increase the size of my image swatches in Focal theme?

Store Design
, , , ,
1

Hey Guys, My image swatches are too small and I would like them to be bigger.

Can anyone help? My theme is Focal.

Screenshot 2023-08-10 040536.png
Screenshot 2023-08-10 040536.png1432×556 225 KB

2

HI @dreamtechzone_5
In this case you can contact with theme supporter, they will help you add some custom code to change the style.
Or please share your store URL, and we will check and give you some custom code to make that.

3

Hi @dreamtechzone_5

Could you share your store link?

4

Hello @dreamtechzone_5
Please go to Online store → themes → Edit theme → Assets → base.css and paste this code at the end of this file

product-item .product-item__info .product-item-meta__swatch-list .color-swatch__item {
  width: 25px !important;
  height: 25px !important;
}

product-item .product-item__info .product-item-meta__swatch-list {
  gap: 16px !important;
}
5

Hello @dreamtechzone_5 ,

Here’s a general guide for you:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.scss.liquid file

Add this following code at the bottom of page

.swatch-class {
    width: 50px;
    height: 50px;
}

Replace “.swatch-class” with the actual class or ID name of the image swatch

Save and preview.

Hope this can help.

Transcy

6

Hi @dreamtechzone_5

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.product-item__info .product-item-meta__swatch-list .color-swatch__item {
    width: 30px !important;
    height: 30px !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly