Css

Hello,

Could you please help me with some changes I need to make on my products grid? I have included all my questions in my attachment to be more clear.

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

1) To reduce the size of the onsale label you need to use the following custom CSS under Global Custom CSS area Under Theme Settings >> Custom CSS.

.product-label.onsale {
font-size: 10px;
border-radius:25px;
}

If you want to reduce the size of the badge you need to decrease the size of the font as well which would cause some readability issues.

2) To change the position of the badge on the right side you need to Go to Theme Settings >> Shop >> Product Styles.

You can set it according to your requirement.

Screenshot for Clarification: https://ibb.co/CtR3Rx4

3) Please confirm if you want to change the text color or want to display colors there.

4) Select options is Already a button you change also change its styling from Theme Settings >> Shop >> Product Styles.

Screenshot for Clarification: https://ibb.co/CtR3Rx4

Best Regards.

Hello,

When I reduce border radius the shape changes from round to square. Even if I reduce the font size the whole size of the barge is not reduced. What I would like to have is a smaller badge.

Theme options offer only one alternative with the badge on the right, which shows all info on image. I cannot select that because my images are too small ti include all info. Isn’t there a css I could use to place it on the right?

I would like to display colors instead of text, regarding your question.

Same issue with button. The predefined styles unfortunately do not work with my photos.

Hello,

1) You need to increase the border radius while you are trying to reduce the font-size.

2) Unfortunately, there is no other option in Theme Settings Available to display the badge on the right side. You need to add the following custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

body .labels-rounded {
top: 7px;
left: auto;
right: 7px;
}

3) To Display Colors on the product grids Go to Theme Settings >> Shop >> Attribute Swatches.

Screenshot for Clarification: https://ibb.co/7Yxh1yX

4) As I mentioned in my previous reply the select option is already a button you don’t need to transform it into a button.

You can change its styling from Theme Settings >> Shop >> Product Styles.

Screenshot for Clarification: https://ibb.co/CtR3Rx4

Best Regards.

[Author]

Posts