Return to previous page

Customize product attribute as demo store

This topic has 3 replies, 2 voices, and was last updated 2 minutes ago ago by Mauro

Mauro

Participant

November 8, 2024 at 10:31

Hi,
i’ve some questions:

1. how can customize aspect attributes like your demo store?
I’ve changed to square option but i want add space and border radius like your example (see attachments).

2. If i change aspect options it update aspect attributesinto sidebar too or i can mantain checkbox into sidebar and square option into product page?

3. For variation products can I hide product image and show only the attribute images?

Thanks

Thanks

Files is visible for topic creator and
support staff only.

#422467 Copied

2 Answers
Rose Tyler

Support staff

November 8, 2024 at 11:37
Hello, Mauro,

Thank you for reaching out to us. We are happy to assist you with your inquiries.

1. To customize the appearance of attributes similar to our demo store, you can adjust the border radius and spacing through custom CSS code. For example – https://prnt.sc/4qYpBikrQWWB

https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/
```
/* Swatches */
selector .st-swatch-size-large li.type-label {
    border-radius: 10px;
}
selector .st-custom-attribute {
    font-weight: 600;
}
selector .st-swatch-size-large li.type-label>span {
    padding: 15px 40px;
}
selector .st-swatch-size-large li.type-image {
    min-width: 80px;
    min-height: 80px;
}
```
2. Please describe the desired result in more detail.

3. Could you provide an example and some screenshots for a better understanding?

Best Regards,
8Theme’s Team
#422478 Copied
Mauro

Participant

November 8, 2024 at 12:03

1. Can you tell me the step to go into “Custom css” field?

2. See 02 image on private area

3. See 03 image on private area

Content is visible for topic creator and
support staff only.

#422481 Copied
Viewing 3 results - 1 through 3 (of 3 total)