Return to previous page

Customize product attribute as demo store

This topic has 4 replies, 2 voices, and was last updated 7 minutes ago ago by Rose Tyler

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

3 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

Rose Tyler

Support staff

November 8, 2024 at 13:40

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

#422502 Copied
Viewing 4 results - 1 through 4 (of 4 total)