Mobile Horizontal Scroll

Store Design

Topic summary

A user wants to enable horizontal scrolling for a subcategory button section on mobile devices for their collection page. Currently, the element is hidden on mobile with display: none in a media query.

Current Setup:

  • Desktop shows a flex container with subcategory links (Treatment Couches, Hydraulic Couches, etc.)
  • Mobile hides this section entirely via CSS media query at max-width 1330px
  • The code includes conditional logic to display buttons for specific collection handles

Goal:
Make the subcategory navigation visible on mobile with horizontal scroll functionality instead of hiding it.

Status:
No responses yet. The user is seeking CSS guidance to implement mobile horizontal scrolling while maintaining the existing desktop layout.

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

Mobile scroll for subcategories

We have a subcategory button section on our collection page:
image

I want this to appear on mobile, with a horizontal scroll. Currently it is set to display: none. What css do I need to achieve this?

{% if collection.handle == ‘treatment-couches’
or collection.handle == ‘hydraulic-couches’
or collection.handle == ‘examination-couches’
or collection.handle == ‘electric-couches’
or collection.handle ==‘blue-treatment-couches’
or collection.handle ==‘black-treatment-couches’
or collection.handle ==‘white-treatment-couches’
or collection.handle ==‘1-section-massage-beds’
or collection.handle ==‘2-section-treatment-couches’
or collection.handle ==‘3-section-treatment-couches’
or collection.handle ==‘5-section-massage-beds’
or collection.handle ==‘beauty-couches’
or collection.handle ==‘massage-beds’
or collection.handle ==‘neurology-couches’
or collection.handle ==‘physiotherapy-beds’
or collection.handle ==‘podiatry-couches’
or collection.handle ==‘tatoo-couches’
or collection.handle ==‘addax-treatment-couches’
or collection.handle ==‘plinth-medical-treatment-couches’
or collection.handle ==‘avalon-treatment-couches’
or collection.handle == ‘treatment-couch-upholstery’
%}

Hydraulic Couches Electric Couches Examination Couches Massage Beds Treatment Couch Accessories
.treatment-subcats { display: flex; flex-wrap: wrap; gap: 10px; } .treatment-subcats a { padding: 8px 12px; border: 1px solid #dcdcdc; border-radius: 4px; text-decoration: none; color: black; font-size: 14px; background: white; font-family: Montserrat, sans-serif; font-weight: 500; font-style: normal; line-height: 1.6; cursor: pointer; } .treatment-subcats a:hover { background-color: #f7f7f7; } @media only screen and (max-width: 1330px) { .treatment-subcats { display: none; } }

{% endif %}

1 Like
2

Hello, @ChrisW3

Updated code block. You should replace your entire existing block from {% if collection.handle … to {% endif %} with this new one.

{% if collection.handle == ‘treatment-couches’
or collection.handle == ‘hydraulic-couches’
or collection.handle == ‘examination-couches’
or collection.handle == ‘electric-couches’
or collection.handle ==‘blue-treatment-couches’
or collection.handle ==‘black-treatment-couches’
or collection.handle ==‘white-treatment-couches’
or collection.handle ==‘1-section-massage-beds’
or collection.handle ==‘2-section-treatment-couches’
or collection.handle ==‘3-section-treatment-couches’
or collection.handle ==‘5-section-massage-beds’
or collection.handle ==‘beauty-couches’
or collection.handle ==‘massage-beds’
or collection.handle ==‘neurology-couches’
or collection.handle ==‘physiotherapy-beds’
or collection.handle ==‘podiatry-couches’
or collection.handle ==‘tatoo-couches’
or collection.handle ==‘addax-treatment-couches’
or collection.handle ==‘plinth-medical-treatment-couches’
or collection.handle ==‘avalon-treatment-couches’
or collection.handle == ‘treatment-couch-upholstery’
%}

<style>
.treatment-subcats {
  display: flex;
  flex-wrap: wrap; 
  gap: 10px;
  margin-bottom: 20px;
}
.treatment-subcats a {
  padding: 8px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  text-decoration: none;
  color: black;
  font-size: 14px;
  background: white;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
}
.treatment-subcats a:hover {
  background-color: #f7f7f7;
}

@media only screen and (max-width: 768px) {
  .treatment-subcats {
    flex-wrap: nowrap;    
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  
  .treatment-subcats::-webkit-scrollbar {
    display: none;
  }
}
</style>

<div class="treatment-subcats">
    <a href="/collections/hydraulic-couches">Hydraulic Couches</a>
    <a href="/collections/electric-couches">Electric Couches</a>
    <a href="/collections/examination-couches">Examination Couches</a>
    <a href="/collections/massage-beds">Massage Beds</a>
    <a href="/collections/treatment-couch-accessories">Treatment Couch Accessories</a>
</div>

{% endif %}

After saving the changes, view one of your specified collection pages on a mobile device. The subcategory buttons should now appear in a clean, scrollable horizontal row.

Thank You!

3

Hi @ChrisW3

Got it you currently have this code hiding the section on mobile:

@media only screen and (max-width: 1330px) {
  .treatment-subcats {
    display: none;
  }
}

That’s the line responsible for making it invisible on smaller screens.

To show it on mobile and enable horizontal scrolling, replace that part with this:

@media only screen and (max-width: 1330px) {
  .treatment-subcats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .treatment-subcats a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
1 Like
5

This is really close but it displays on the same line as the “Hide filters” and “Sort by” elements so it gets hidden.
Can I have it on its own line?

6

Hi Chris,

To show the subcategory buttons on mobile and make them scroll horizontally, you just need to replace the display: none with a horizontal scroll layout.

You can use something like this:

@media only screen and (max-width: 768px) {
  .treatment-subcats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .treatment-subcats a {
    flex: 0 0 auto;
  }
}

This keeps all the buttons in one row and allows side-to-side scrolling on mobile.
If you’re using a specific theme, let me know—can fine-tune it if needed.