SWATCHES

Hi,

How can I change the shape and size of swatches on product page only?
We have size attribute with many options for art products and circle swatches just don’t work as well for us.
This is what we are trying to achieve, more rectangular shape for our sizes:
example
Also, while you are there, you’ll see when you hover over a size option, an image appears. Do you think you might offer such option in the future? It would be great addition to the theme, I think. If not, would It be possible and relatively easy for some outside developer that we might hire to make It for us or It would be way more complicated or even impossible?

Thank you!

Hello,

Unfortunately, there is no such swatches style in our theme. As we can see you are creating your swatches with images so just prepare images in rectangular shapes as you need.

Kind Regards

I could do that but since the swatches are circle, we don’t have enough space even with the extra large option and space between each swatch is than too big and takes too much room.
Isn’t there any code for circles to be square and custom size like they are possible on category page for color attributes that we managed to do with this codes:
.swatches-on-grid .swatch-on-grid { border-radius: 0; }
.swatches-on-grid .swatch-on-grid {
width: 30px;
height: 30px;
}

Isn’t there anything like that for product page swatches?

Try to use this code snippet

.swatches-select .image-swatch.swatch-size-large {
	height:20px!important;
  	border-radius:0!important;
}

Regards

Thank you so much, we are almost there.It seems like a bottom of the swatch image is hidden or something (please see in picture). I tried for over 2 hours to figure It out, used different sizes and this is the best I got.

I changed the height to 40px from your code since 20px was way too short and unreadable and used 80x80px swatch image since any smaller size makes image very pixelated on a big screen.

Also, Is there a way that width of the swatch can be adjusted as well?

Thank you,
Ivy

Attachments:

You must be logged in to view attached files.

It is because you have uploaded squared images, try to upload rectangular one for example. Or change it’s height in the CSS snippet we sent you. You can adjust the width also

.swatches-select .image-swatch.swatch-size-large {
    width: 45px!important;
}

Regards

Hi,

I experimented quite a bit with height and width and finally managed to get the results. It is much more versatile when you can have other shape than just circles, there is a lot more room for info that is more than one character.

Is there a way to move Attribute Titles above the swatches? Since we have quite a few options, they extend to two rows and moving titles above would be best for us and perhaps would also move swatches to the left in line with other elements like cart etc.
Please take a look at the attached images for better understanding of what I’m trying to achieve.

Thank you so much for helping me with this one, It is one of the most important elements for us to get right and functional as best as possible.

Ivy

Attachments:

You must be logged in to view attached files.

Strange, but we just visited your website and can’t find any products there. Could you please send a link to the working example?

Thank you

Hi,

Yes, we are not live yet, still working on the website. You have been of enormous help and we are very happy with how things go along.
I think the swatches look quite nice now except the swatch title placement as I explained earlier.
The problem is the most visible on tablets, especially in portrait mode, please see attached image.
I also made a product demo for you, link in private.

We hope you’ll be able to help us.

Thank you so much!
Ivy

My file was too big to upload, let’s try again!

Attachments:

You must be logged in to view attached files.

Try to add this code snippet to the Custom CSS area in Theme Settings also

.single-product-content .variations tr {
    display: flex;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    flex-direction: column;
    -webkitflex-direction: column;
    -ms-flex-direction: column;
    margin-bottom:15px;
}
.single-product-content .variations tr:last-child {
    margin-bottom:0px;
}
.single-product-content .variations td {
  padding-bottom:0;
}
.single-product-content .variations .label {
    margin-bottom:15px;
}
.single-product-content .variations label {
    margin-right:0;
}

Regard

Worked like magic, I cannot thank you enough!
It looks absolutely wonderful, much more balanced and easier to use , especially on mobile /tablets, cannot be more pleased.

Again, thank you for taking your time to help us, I appreciate It a lot!

Ivy

Hi,

We are glad to help you.

If you really like our service and want to thank us we would be glad if you will write some review about our theme in theme comments and post there your website link. But, of course, when it will be ready and go live.

Thank you in advance 🙂

I sure will, hopefully soon! 🙂

Thank you in advance 🙂

[Author]

Posts