Collection list help

[aromaticaparfum]

My store is AromaticaParfums.com 

I want to make it like this for my phone version. 5 in row carousel. Instead on the phone it’s one by one taking up space. Can you help me make it like

this on the phone version?

also I want to hide the items display. 

[tapan_sain]

Hello @aromaticaparfum 

You can reduce the width, but doing the same on mobile won’t be user-friendly. It would make it difficult for users to properly view and read the items.

To solve this, you can use a carousel on mobile. That way, all your items will stay in a single row, and users can swipe through them one by one, ensuring a better browsing experience.

[rajweb]

Hey @aromaticaparfum ,

Thanks for the screenshot! To achieve a 5-in-a-row horizontal carousel layout on mobile like in your image (instead of stacked one-by-one), and also hide the item count (e.g. “48 items”), you’ll need to make the following changes in your Shopify theme’s code.

1. Wrap “Must Haves” in a Horizontal Scroll (Carousel-like)

In your theme’s Liquid file where this section is coded (often in sections/featured-collections.liquid or similar), apply the following:

Make sure the items are inside a scrollable flex container:

<div class="must-haves-wrapper overflow-x-auto whitespace-nowrap px-4">
  {% for collection in collections %}
    <div class="must-have-item inline-block w-[20%] px-1">
      <a href="{{ collection.url }}">
        <img src="{{ collection.image | img_url: '200x' }}" alt="{{ collection.title }}">
        <p>{{ collection.title }}</p>
        <!-- Remove or comment out the line below to hide the item count -->
        {# <p>{{ collection.products_count }} items</p> #}
      </a>
    </div>
  {% endfor %}
</div>

CSS (Tailwind style or regular CSS):

If you're not using Tailwind CSS, you can add this in your CSS file (like theme.css.liquid or custom.css):

.must-haves-wrapper {
  display: flex;
  overflow-x: auto;
  padding: 0 1rem;
  scroll-snap-type: x mandatory;
}

.must-have-item {
  flex: 0 0 20%;
  text-align: center;
  padding: 0 0.25rem;
  scroll-snap-align: start;
}

This will make 5 items fit in one row on small screens, scrollable horizontally like a carousel.

2.  Hide the “XX items” Count

Locate where the items count is rendered, like:

<p>{{ collection.products_count }} items</p>

You can either:

Delete or comment it out in your Liquid file Or hide it with CSS:

.must-have-item p:last-child {
  display: none;
}

But I recommend removing it from the Liquid if you're sure you don’t want to show it.

If you want me to implement this for you, please feel free to reach out to me anytime. Thanks!

Best,

Rajat

Shopify Expert