How can I hide the featured collection slider button on my homepage?

Store Design

Topic summary

A user seeks to hide the featured collection slider button exclusively from their homepage. A PageFly representative provides a CSS solution: adding .collection.slider-buttons { display: none !important; } to the component-slider.css file via the theme editor.

Additional requests addressed:

  • Adjusting price font size on homepage: Solution involves adding CSS to component-price.css targeting .collage__item.product-card-information.price-item with a customizable font size (default 24px) for screens min-width 768px.

  • Price size inconsistencies in recommendation section: User reports differences between recommendation section prices and regular product prices. They request code to match the sale and compare-at prices in recommendations to other sections, noting previous code only affected regular prices.

Status: The initial slider button issue and homepage price sizing are resolved. The recommendation section price styling question remains open, awaiting response from PageFly support.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi

How correctly I can hide the featured-collection slider button on the homepage? I wanna hide it just from the home page section.

Screenshot 2023-02-07 at 18.36.42.png
Screenshot 2023-02-07 at 18.36.42.png1962×1084 180 KB

web: homeda.co.uk

psw: picture

Thanks

2

Hi @Deoxes ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-slider.css->paste below code at the bottom of the file:

.collection .slider-buttons {
    display: none !important;
}

I hope it would help you
Best regards,

Kate | PageFly

2 Likes
3

@PageFly-Kate Yes it works, thanks, maybe can you help me with one more question, I wanna change just this section price size, from the homepage.

Screenshot 2023-02-07 at 19.00.26.png
Screenshot 2023-02-07 at 19.00.26.png2662×1198 315 KB

Thanks

4

Hi @Deoxes ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-price.css->paste below code at the bottom of the file:

@media screen and (min-width: 768px) {
    .collage__item--product .card-information .price-item {
        font-size: 24px !important;
    }
}

NOTE: You can change value (24px) to match your website

I hope it would help you
Best regards,

Kate | PageFly

1 Like
5

@PageFly-Kate Thanks it works perfectly!

6

@PageFly-Kate can I get this code for mobile? Because for me changing just for PC, Thanks.

7

Hi @Deoxes ,

Sorry for replying late.
I checked, it looks like you have solved the problem, right?

Best regards,

Kate | PageFly

1 Like
8

@PageFly-Kate Yes, I think you helped me with that question. Thanks

1 Like
9

@PageFly-Kate

Hi, I have one question about prices, maybe you can help me. I see on my page between the recommendation section are price size differences.

Screenshot 2023-02-11 at 16.33.10.png
Screenshot 2023-02-11 at 16.33.10.png1690×954 135 KB

Can you write me a code how I can change the recommendation section sale price and compare price two codes, because the regular price code you wrote me before.

/* Product-recommendations price size */
product-recommendations span.price-item.price-item–regular {
font-size: 20px !important;
}

web: homeda.co.uk

you can check it here:

https://homeda.co.uk/products/holbrook-cabinet-1

Thanks, for the help.

10

@PageFly-Kate Can you help me?

11

Thanks so much, really helped me!