Return to previous page

How to change Product Display Design from home?

This topic has 11 replies, 2 voices, and was last updated 2 months, 2 weeks ago ago by Luca Rossi

Hello Wholesaler

Participant

September 21, 2024 at 18:03

How can I change the product display design from home? It currently looks simple. please visit my Website. Please suggest how I can add a design to make the product box look professional and attractive.

This is the link of WeTransfer showing how products are displayed on my website.
https://we.tl/t-5bPkSE1JCZ

Screenshot with the name “Product Design 3”. In this screenshot, you can see it looks attractive. How can I add this type of design?

Files is visible for topic creator and
support staff only.

#415369 Copied Theme version: 9.4.1

10 Answers
Luca Rossi

Support staff

September 23, 2024 at 05:25
Hi @Hello Wholesaler,

To add the box-shadow style on your products when hovering, please add this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.elementor-widget-etheme_product_carousel .swiper-slide {
    padding: 5px;
}
.elementor-widget-etheme_product_carousel .swiper-slide > div.product {
    padding: 10px;
    border-radius: 15px;
}
.elementor-widget-etheme_product_carousel .swiper-slide:hover > div.product {
    -webkit-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.2);
}
```
https://prnt.sc/Rd_J9sk_Q8Vp

Hope it helps!
#415452 Copied
Hello Wholesaler

Participant

September 26, 2024 at 16:37

This is not mobile responsive. I have created a code via AI. Can you please look into my code and make it mobile responsive? I have sent the code to you privately. Also, there is too much space between the box and the heading. Please remove this distance. For example, the heading name is ‘Best Seller,’ and the products are showing too far down. There shouldn’t be such a large distance

Please contact administrator
for this information.

#415998 Copied

Luca Rossi

Support staff

September 27, 2024 at 05:04

Dear @Hello Wholesaler,

We hope this message finds you well. We have noticed an issue where adding margins may disrupt the functionality of the slider on mobile devices. To better understand and resolve this matter, could we kindly request access to your admin account? This will allow us to investigate the issue more thoroughly and implement a suitable solution.

Thank you for your cooperation and support.

Best Regards,
8Theme’s Team

#416023 Copied

Hello Wholesaler

Participant

September 27, 2024 at 08:24

Sure, i have shared. pls check.

Please contact administrator
for this information.

#416058 Copied

Luca Rossi

Support staff

September 27, 2024 at 09:27

Dear @Hello Wholesaler,

We hope this message finds you well. We wish to inform you that we have removed the width, height, and margin settings from your custom CSS to enhance the responsiveness of the product block on mobile devices.

Please be aware that setting fixed dimensions can affect the mobile responsiveness of your content. Should you have any questions or require further assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team

#416065 Copied

Hello Wholesaler

Participant

September 27, 2024 at 11:41

My website is not opening in mobile view when I click on Home. I have added the link of WeTransfer.

Second thing, please keep the box size fixed in mobile view. Some boxes are small and some boxes are large.

In the attached screenshot, you can see that one box is small and one box is large. The box size should be the same, regardless of whether the content inside is small or large. The left box is fine, but please reduce its length slightly. Also, make the right box the same size as the left box. All boxes should be the same size. I hope you understand my question.

I really appreciate your support. Thank you so much.

Please contact administrator
for this information.

#416098 Copied

Hello Wholesaler

Participant

September 27, 2024 at 11:42

Here’s the attached Screenshot.

Files is visible for topic creator and
support staff only.

#416099 Copied

Luca Rossi

Support staff

September 29, 2024 at 14:07

Hi @Hello Wholesaler,

My website is not opening in mobile view when I click on Home. I have added the link of WeTransfer.

This issue is not related to the XStore theme. Please connect to The Google Search Console then index your website again and also update the XML Site Map. The Clothings product category is now 404.

In the attached screenshot, you can see that one box is small and one box is large. The box size should be the same, regardless of whether the content inside is small or large. The left box is fine, but please reduce its length slightly. Also, make the right box the same size as the left box. All boxes should be the same size. I hope you understand my question.

Actually, we can’t achieve this because each product maybe have the short and long title.

Best regards,
The 8Theme Team

#416301 Copied

Hello Wholesaler

Participant

October 3, 2024 at 18:43

Can I use the X-Store theme in an HTML or coding website? Currently, I’m using it on WordPress.

#416976 Copied

Luca Rossi

Support staff

October 4, 2024 at 06:46

Hi @Hello Wholesaler,

Currently, we don’t have the HTML code version of XStore theme.

Best regards,
The 8Theme Team

#417027 Copied
Tagged: change product layout, ecommerce website design, home display customization, product display design, woocommerce templates, wordpress, wordpress storefront
Viewing 11 results - 1 through 11 (of 11 total)