Dawn Theme - Featured Collection Landing Page

Shopify Discussion

Topic summary

Emma seeks help customizing the Featured Collection section on her Dawn theme landing page, specifically for a slideshow displaying products.

Initial requests:

  • Remove slideshow navigation icons (1/12…11/12)
  • Display only 1 product on mobile instead of the default 2½

Solutions provided:

Moeed offers CSS code snippets to be added to the theme.liquid file:

  1. First code successfully hides the slideshow indicators
  2. Second code (media query for screens under 767px) adjusts mobile display to show one full product at a time

Additional request:

Emma asks about adding small navigation arrows (< >) on each side of products to improve mobile usability.

Moeed explains this requires custom coding beyond CSS and recommends hiring a Shopify developer, offering his services.

Status: Emma plans to compile her complete requirements and contact Moeed for further assistance. The original two issues are resolved, but the arrow navigation feature remains unimplemented.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi There,

On my landing page I have a section called “Featured Collection” on 4 columns. This is a slide show.

1 . I would like to delete the icons of the slide show (1/12,11/12)

  1. If I have 4 products on a laptop, I would like to have only one product on a mobiel device.

Is there anyone who coule help me ?

Many thanks in advance,

Emma

1 Like
2

Hey @Emma33000

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742317537436.png
Moeed_0-1742317537436.png1907×910 95.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thanks Moeed, It perfectly works.

And any idea to have only one product instead of 2 ½ on a mobile device ?

Many thanks again,

Emma

1 Like
4

Keep the previous code and add this new code above in the end of your theme.liquid file

@media screen and (max-width: 767px) {
.slider.slider--tablet .slider__slide {
    width: 100% !important;
    max-width: 100% !important;
}
}

RESULT:

Moeed_0-1742318546754.png
Moeed_0-1742318546754.png344×756 30.8 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

Many thanks againn, this is great and much more appealing.

Should I dare asking one last question ? How could I add some very tiny arrow on each side of each products featured (<>) so that people undestand they can go lest or right (especially on a mobiel device) ?

Thanks

Emma

1 Like
6

Hey @Emma33000

To add arrows on each side, you will have to do some custom coding in your theme files as it’s not only a CSS work so if you’re not familiar with coding then I would highly recommend you to hire a Shopify developer who can help you out with that. If you want me to help you then feel free to connect with me and I would be more than happy to give you a helping hand.

Best Regards,

Moeed

7

Dear Moeed,

Give me a bit of time to make the complete list of my needs and I will get in touch with you.

Talk to you soon,

Emma

1 Like
8

Take your time, I’ll be looking forward to hear from you! :slightly_smiling_face:

Best Regards,

Moeed