SWATCHES

This topic has 14 replies, 2 voices, and was last updated 8 years ago by Artem Temos.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
November 18, 2016 at 9:26 pm #6933

IvyK
Participant

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!

November 18, 2016 at 10:08 pm #6942

Artem Temos
Keymaster

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

November 18, 2016 at 10:19 pm #6943

IvyK
Participant

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?

November 19, 2016 at 4:34 am #6951
Artem Temos
Keymaster
Try to use this code snippet
```
.swatches-select .image-swatch.swatch-size-large {
	height:20px!important;
  	border-radius:0!important;
}
```
Regards
November 19, 2016 at 6:41 am #6952

IvyK
Participant

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.

November 19, 2016 at 8:15 am #6959
Artem Temos
Keymaster
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
November 19, 2016 at 6:55 pm #6968

IvyK
Participant

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.

November 20, 2016 at 1:34 am #6981

Artem Temos
Keymaster

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

November 20, 2016 at 4:25 am #6993

IvyK
Participant

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

November 20, 2016 at 4:28 am #6994

IvyK
Participant

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

Attachments:
You must be logged in to view attached files.

November 20, 2016 at 11:45 am #7008
Artem Temos
Keymaster
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
November 20, 2016 at 8:00 pm #7025

IvyK
Participant

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

November 20, 2016 at 9:52 pm #7028

Artem Temos
Keymaster

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 🙂

November 22, 2016 at 2:56 am #7060

IvyK
Participant

I sure will, hopefully soon! 🙂

November 22, 2016 at 5:53 am #7066

Artem Temos
Keymaster

Thank you in advance 🙂
Author

Posts