Customize product attribute as demo store

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

Hello, Mauro,

1/ The steps for implementing custom code depend on the specific purpose of the code and which single product builder you are using. For instance, the screenshot we provided was taken from this builder: https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/ > element settings https://prnt.sc/cfzOESdw5nj_

If you wish to add code that will be applied site-wide, we recommend reading this article – https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

2/ Are you looking to modify the styles of the swatches on the single product page and in the sidebar of the shop page? Unfortunately, we are unable to view your site as it is hosted locally. Could you please provide a link to the demo you imported?

3/ We have not received the screenshot labeled as number 3.

Best Regards,
8Theme’s Team