How do I make the index page, the home page, so that the “Best-selling products”

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

  • Avatar: Zg007
    Zg007
    Participant
    January 1, 2024 at 12:29

    Hi,
    How do I make the index page, the home page, so that the “Best-selling products” are not a complex grid, but rather like the products, “Related products” means like a bar, so that the products can be moved left and right.
    And can it be made to automatically scroll to the right.
    Thanks

    Please, contact administrator
    for this information.
    33 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 1, 2024 at 14:24

    Hello, Zg007,

    Thank you for reaching out to us with your query.

    May we kindly request that you grant us temporary wp-admin access? This will enable us to review your settings thoroughly.

    Kind Regards,
    8theme team

    Avatar: Zg007
    Zg007
    Participant
    January 1, 2024 at 15:33

    The website is a few years old if I include now Single Product Builder, will it negatively affect the positioning of the site on Google.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 1, 2024 at 16:14

    Hello, Zg007,

    We appreciate your prompt response.

    1/ We kindly request that you utilize our “Products” element: https://prnt.sc/QpZh6T7JhHWp > https://prnt.sc/hmCpcA9sw-Gs

    2/ We have not investigated this question, however, enabling the builder should not result in any adverse effects.

    Kind Regards,
    8theme team

    Avatar: Zg007
    Zg007
    Participant
    January 1, 2024 at 16:45

    I did as you said, but the add product button + and – look different. How to make them look like the others.
    https://ibb.co/LnKXwfD

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 2, 2024 at 08:15

    Hello, Zg007,

    We appreciate your prompt response.

    Please provide URL of page from which this screenshot was done – https://imgbb.com/LnKXwfD , so we can inspect the code there.

    Thank you for your cooperation and we look forward to hearing from you soon.

    Kind Regards,
    8theme team

    Avatar: Zg007
    Zg007
    Participant
    January 2, 2024 at 15:23

    URL web site

    Please contact administrator
    for this information.
    Avatar: Zg007
    Zg007
    Participant
    January 2, 2024 at 15:38

    Where can you change the color of the background on the cart page (now it is white) to see the text. And another way to change the green color on the buttons, there is one like that.

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 2, 2024 at 15:55

    Dear @Zg007,

    We hope this message finds you well.

    Could you kindly incorporate the following CSS code into your website? Please navigate to Theme Options, then select Theme Custom CSS, and finally, insert the code into the Global CSS section:

    
    body .products-slider .quantity .minus,
    body .products-slider .quantity .plus {
        display: block;
        padding: 0;
        margin: 0;
        position: absolute;
        text-align: center;
        width: 1.387em;
        height: 1.12em;
        text-decoration: none;
        overflow: visible;
        font-weight: 700;
        cursor: pointer;
        color: #0e9557;
        border: 1px solid #bbb3b9;
        background-color: #fff !important;
        text-shadow: none;
        line-height: 1;
        background-image: none;
        right: -1.387em;
    }
    body .products-slider .quantity .minus {
        bottom: 0;
    }
    body .products-slider .quantity .plus {
        top: 0;
    }
    body .products-slider div.quantity>input[type=number] {
        border-left: 1px solid var(--et_inputs-border-color,var(--et_border-color));
    }
    

    We trust that the implementation of this code will be beneficial. Should you require any further assistance, please do not hesitate to contact us.

    Best regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 2, 2024 at 16:20

    I deleted the cash in WP and Chrome, the same thing happens in Mozilla, there is also a problem on the home page.

    Please contact administrator
    for this information.
    Avatar: Zg007
    Zg007
    Participant
    January 2, 2024 at 16:22

    The same thing applies to individual products.

    Avatar: Justin
    Luca Rossi
    Support staff
    January 2, 2024 at 17:00

    Dear @Zg007,

    We are pleased to inform you that we have made some minor updates to the custom CSS codes. We believe these adjustments have enhanced the overall appearance and functionality.

    To view the changes, please follow this link: https://prnt.sc/PqviUtg7_qRm

    We kindly request that you clear your browser’s cache to ensure that you are able to see the most recent version of the updates. Should you encounter any issues or require further assistance, please do not hesitate to contact us.

    Thank you for your attention to this matter.

    Best Regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 2, 2024 at 17:13

    It works correctly only on the home page, when you go to the web shop (menu) there is no + and -, the same thing happens on individual products. Check it out at the link I provided. I deleted the cash on Chrome and Mozilla.

    Avatar: Justin
    Luca Rossi
    Support staff
    January 3, 2024 at 04:59

    Dear @Zg007,

    We kindly request that you clear all third-party cache plugins as well as any server-side caching mechanisms currently in place. This action is necessary to ensure that the website operates efficiently and displays the most recent content.

    For your reference, the following links illustrate how the product pages appear on our end when we are logged in:

    – [https://prnt.sc/vl3CMukNzj1z](https://prnt.sc/vl3CMukNzj1z)
    – [https://prnt.sc/f_wIKzdkp-Pu](https://prnt.sc/f_wIKzdkp-Pu)

    We appreciate your prompt attention to this matter. Should you require any further assistance or clarification, please do not hesitate to contact us.

    Best regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 3, 2024 at 15:45

    On the home page page and products everything is fine, Chroma, on Mozilla only the home page works normally, please check. But if you scroll down the product page a bit to Related products, you’ll see that it’s still a problem (Chroma). Also on the cart page. Also on mobile the same thing, there is no + and – at all. I deleted the cache in Chrome, Mozilla, WP, Autoptimize plugin, the hosting tells me that there is no cache.
    It’s been going on for a couple of days now, correspondence, the site is online, please fix it so I can work.

    Please contact administrator
    for this information.
    Avatar: Zg007
    Zg007
    Participant
    January 3, 2024 at 15:54

    Mobile screenshot, Mozilla, no + and – at all. The same is true for Chroma on mobile.

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 3, 2024 at 15:57

    Hi @Zg007,

    Can you please check again?

    – Cart page: https://prnt.sc/8IC4HG1YZRHz
    – Single Product page: https://prnt.sc/Emufnuif0lDb
    – Home page: https://prnt.sc/SPjf1_ifg2Ja
    – Category page: https://prnt.sc/iHmaDrUwxJWQ

    Best regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 3, 2024 at 16:03

    Check: https://ibb.co/QdFtDwG
    Check: Related products

    Avatar: Justin
    Luca Rossi
    Support staff
    January 4, 2024 at 08:45

    Dear @Zg007,

    We wish to inform you that we have temporarily deactivated the Autoptimize plugin, and subsequent observations indicate that the functionality appears to be satisfactory.

    We kindly request that you perform a verification from your side as well.

    We appreciate your cooperation.

    Warm regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 4, 2024 at 13:24

    Hello, I checked and as far as I can see it is now ok, on products and checkout, on desktop and mobile. It seems that Autoptimize was causing the problem, which plugin should I put to clear the cache?

    1. I have a problem, the button is white at the checkout, and the text is not visible, how can I change the background color. Picture.
    https://ibb.co/cgHQXYb
    2.On Mozilla, the header, desktop, differs below the yellow bar, there should be a narrow black one, and it is above. It’s ok on Chrome. Picture.
    https://ibb.co/B4W7MX9 Chrome ok:https://ibb.co/6YVxT87
    3. Regarding the mobile phone, the header is yellow, when I scroll the page it turns black, I tried various ways to make it yellow, but without success. Can it be corrected so that the yellow color is also when scrolling. Picture.
    https://ibb.co/tLwKd5W , https://ibb.co/DgMMCRC
    Thanks, sorry to bother you so much, but I want the site to work normally.

    Avatar: Justin
    Luca Rossi
    Support staff
    January 4, 2024 at 15:37

    Dear @Zg007,

    We would like to recommend that you consider utilizing WP-Rocket and W3 Total Cache as they may prove beneficial for your needs.

    Furthermore, we kindly request that you perform the following adjustments:

    1. Navigate to the following file within your theme directory: xstore-child/style.css, specifically at line 198. Once there, please modify the existing custom CSS code from:

    
    .btn.bordered, .btn.bordered.small, .btn.bordered.medium, .btn.bordered.big {
        background-color: #FFF !important; 
        color: #FFF !important;
    }
    

    to the updated version below:

    
    .btn.bordered, .btn.bordered.small, .btn.bordered.medium, .btn.bordered.big {
        background-color: #FFF !important; 
        color: #000 !important;
    }
    

    2. We have observed that on both Google Chrome and Mozilla Firefox browsers, there is a persistent black line appearing above the yellow header. The issue can be viewed at the following links:

    – For Chrome: [https://prnt.sc/ufpEz52angPj](https://prnt.sc/ufpEz52angPj)
    – For Firefox: [https://prnt.sc/wnZUqsnvUCIQ](https://prnt.sc/wnZUqsnvUCIQ)

    3. Please insert the following custom CSS code into your theme by navigating to Theme Options > Theme Custom CSS > Global CSS:

    
    body .mobile-header-wrapper .sticky-on .header-main, 
    body .sticky-on .mobile-header-wrapper .header-main {
        background-color: #ffda00;
    }
    

    We hope that these instructions will be of assistance to you. Should you require any further support, please do not hesitate to reach out.

    Best Regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 4, 2024 at 16:31

    I also tried Mozilla on mobile and Chrome works normally, as far as I can see. The color is ok, yellow when scrolled. But I don’t think you understood me, on the desktop I want the header to be a darker line under the yellow bar, on Mozilla and Chrome, as it is in the picture, and it is the same on the mobile phone. I will ask you if you can do so. This is how it looks in the picture.
    Thank you
    https://ibb.co/6YVxT87

    Avatar: Justin
    Luca Rossi
    Support staff
    January 5, 2024 at 07:14

    Dear @Zg007,

    We hope this message finds you well.

    We are reaching out to you for further confirmation regarding the issue you reported with the positioning of the blackbar on your website when viewed using different browsers.

    According to your previous communication, you observed the following:
    – On the Chrome browser, the blackbar appears below the header, as shown in the screenshot: https://imgbb.com/6YVxT87
    – On Firefox, the blackbar is positioned above the header, as indicated here: https://imgbb.com/B4W7MX9

    However, upon reviewing your website on our end, we have found that the blackbar consistently displays below the header in both Chrome and Firefox browsers. Unfortunately, we were unable to replicate the discrepancy you described. Here are the screenshots from our checks:
    – Chrome: https://prnt.sc/ufpEz52angPj
    – Firefox: https://prnt.sc/wnZUqsnvUCIQ

    Could you please verify if the issue persists on your side? If so, it would be helpful if you could provide us with additional details or steps to reproduce the problem. Your cooperation is greatly appreciated as we strive to resolve this matter promptly.

    Warm regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 5, 2024 at 13:32

    Hello, I want the dark bar to be under the yellow bar, that’s how it was in the beginning, only it was only visible like that on Chrome but not on Mozilla.
    In this picture you can see what it should look like, the dark band under the yellow.
    https://ibb.co/qy7N8D6
    I edited it like that in the theme itself a while ago, but now the dark bar is above the yellow bar, I want the dark bar to be where it is marked in red.
    Thank you
    https://ibb.co/GCXs29z

    Avatar: Justin
    Luca Rossi
    Support staff
    January 5, 2024 at 16:33

    Hi @Zg007,

    Can you please the caches and check again?

    We’ve removed the black bottom border from the main header then add the black border to the bottom header.

    https://prnt.sc/DwyBn6xIEZij

    Warm regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 5, 2024 at 17:13

    On desktop it is fine as far as I can see Chrome and Mozilla, but on mobile there is a dark bar under the logo image on Chrome and Mozilla, and when I scroll there is no dark bar at all. So far so good. Please watch via mobile phone.
    I also cleared the cache on my mobile phone.

    Avatar: Justin
    Luca Rossi
    Support staff
    January 7, 2024 at 08:39

    Hi @Zg007,

    We’ve updated the custom CSS codes a little bit.

    Here is the result: https://prnt.sc/hNkG40CwjXst

    Can you please double check again?

    Warm regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 7, 2024 at 10:45

    Hello, the dark bar under the yellow bar is missing as in the desktop version. And one more thing, yesterday I added the Products plugin to the home page, and again the same thing is missing + and – for adding products. I don’t know what to say, what’s happening with this theme, I didn’t have such problems with previous versions. Can you fix this or will I have to ask you to fix the codes for every single thing.
    Home page: https://ibb.co/NCvzVkw

    Avatar: Justin
    Luca Rossi
    Support staff
    January 8, 2024 at 05:34

    Hi @Zg007,

    Hello, the dark bar under the yellow bar is missing as in the desktop version.

    The blackbar under header looks good on my end: https://prnt.sc/fK5PUINdQTUA

    There was a syntax error in the custom CSS codes, we’ve already fixed it. Now everything is fine.

    Warm regards,
    The 8Theme Team

    Avatar: Zg007
    Zg007
    Participant
    January 8, 2024 at 15:29

    Hello, as for the dark bar on the mobile phone, it is still not there.
    Do you have a tutorial in XStore how to set w3 total cache, at least basic, for my web shop. Until now I had Autoptimize, but according to your recommendation it is turned off.
    https://ibb.co/F3Dtb1Y

  • 1 2
    Viewing 30 results - 1 through 30 (of 34 total)

The issue related to '‘How do I make the index page, the home page, so that the “Best-selling products”’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.