Mobile scroll on home page

Topic summary

Goal: Enable horizontal scroll for the Featured Collection on mobile homepage in the Color theme without affecting other pages.

What happened:

  • Changing the mobile product grid to 3 columns compressed items and cut off the last product; no native slider support in the section.
  • A CSS fix was suggested in colors.css to make .collection-products a horizontal scroll with flex and 40% width items. This worked but also changed the product (shop all) page.

Refinement:

  • A page-specific, mobile-only CSS was provided using the homepage section ID to target only that Featured Collection, adding overflow-x auto and scroll-snap for smoother horizontal scrolling.

Where to add code:

  • The CSS should be placed in Assets > colors.css. The user tried replacing it there but didn’t see changes.

Current status:

  • Not fully resolved. The advisor asked the user to try adding the CSS again or to grant collaborator access for a customized implementation.

Notes:

  • The code snippets and the specific section ID selector are central to the solution. The discussion remains open pending correct CSS application or collaborator access.
Summarized with AI on December 18. AI used: gpt-5.

Hi there,

I am trying to get our featured collection to scroll on the homepage rather than them stacking. When I change the setting for ‘product grid’ and look at ‘number of columns on mobile’ to 3, it’s still not letting me scroll and rather squishes the 3 products together on mobile and cuts off the last one.

Is there any code I can place that will allow a scroll or is it my theme?

The theme is ‘Color’.

Hi @kellycousins93 ,

Please send me the code of featured-collection.liquid file, and I will check it for you.

{% render 'collection', collection: section.settings.collection %}

{% schema %}
{
“name”: “t:sections.featured-collection.name”,
“class”: “section-featured-collection”,
“settings”: [
{
“id”: “collection”,
“type”: “collection”,
“label”: “t:sections.featured-collection.settings.collection.label”
},
{
“type”: “paragraph”,
“content”: “t:sections.main-collection.settings.paragraph__1.content”
},
{
“id”: “show_collection_title”,
“type”: “checkbox”,
“label”: “t:sections.featured-collection.settings.show_collection_title.label”,
“default”: true
},
{
“id”: “show_collection_description”,
“type”: “checkbox”,
“default”: true,
“label”: “t:sections.main-collection.settings.show_collection_description.label”
},
{
“id”: “show_collection_image”,
“type”: “checkbox”,
“default”: false,
“label”: “t:sections.main-collection.settings.show_collection_image.label”,
“info”: “t:sections.main-collection.settings.show_collection_image.info”
},
{
“type”: “header”,
“content”: “t:sections.main-collection.settings.header__1.content”
},
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 6,
“step”: 1,
“default”: 4,
“label”: “t:sections.main-collection.settings.columns_desktop.label”
},
{
“type”: “range”,
“id”: “columns_tablet”,
“min”: 1,
“max”: 4,
“step”: 1,
“default”: 3,
“label”: “t:sections.main-collection.settings.columns_tablet.label”
},
{
“type”: “range”,
“id”: “columns_mobile”,
“min”: 1,
“max”: 3,
“step”: 1,
“default”: 2,
“label”: “t:sections.main-collection.settings.columns_mobile.label”
},
{
“type”: “range”,
“id”: “products_per_page”,
“min”: 1,
“max”: 48,
“step”: 1,
“default”: 12,
“label”: “t:sections.featured-collection.settings.products_per_page.label”
},
{
“type”: “checkbox”,
“id”: “product_grid_preview_enable”,
“label”: “t:sections.main-collection.settings.product_grid_preview_enable.label”,
“info”: “t:sections.main-collection.settings.product_grid_preview_enable.info”
},
{
“type”: “header”,
“content”: “t:sections.main-collection.settings.header__2.content”
},
{
“id”: “enable_filtering”,
“type”: “checkbox”,
“label”: “t:sections.featured-collection.settings.enable_filtering.label”,
“info”: “t:sections.featured-collection.settings.enable_filtering.info”,
“default”: false
},
{
“type”: “header”,
“content”: “t:sections.main-collection.settings.header__3.content”
},
{
“type”: “paragraph”,
“content”: “t:sections.main-collection.settings.paragraph.content”
},
{
“type”: “header”,
“content”: “t:sections.settings.header.content”
},
{
“type”: “checkbox”,
“id”: “show_background”,
“label”: “t:sections.settings.show_background.label”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “expanded”,
“label”: “t:sections.settings.expanded.label”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “expanded_content”,
“label”: “t:sections.settings.expanded_content.label”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “collapsed”,
“label”: “t:sections.settings.collapsed.label”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_on_desktop”,
“label”: “t:sections.settings.show_on_desktop.label”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_on_mobile”,
“label”: “t:sections.settings.show_on_mobile.label”,
“default”: true
}
],
“presets”: [
{
“name”: “t:sections.featured-collection.presets.name”
}
],
“disabled_on”: {
“groups”: [“header”, “footer”]
}
}
{% endschema %}

Hi @kellycousins93 ,

I checked and currently section doesn’t support slider for it, so you can’t do this. So if you want to change this you can just add scroll to it.

Please go to Actions > Edit code > Assets > colors.css file and paste this at the bottom of the file:

.collection-products {
        overflow: scroll;
        display: flex;
    }
.collection-products .collection-product {
    width: 40%;
    min-width: 40%;
}

I hope it helps!

Hi,

Thank you! It worked but it changed how it looks on my product page now. I just want it to scroll on my homepage and not on the shop all page.

Is there a way we can make it so it only scolls on the homepage?

Hi @kellycousins93 ,

Please send me the store link, I will check it for you

https://www.stagnesrituals.com/

Hi @kellycousins93 ,

Please change all code:

@media (max-width: 620px) {
#shopify-section-template--16931673800944__978a3ff1-9d73-4562-b5bf-4ab2e59abe0f .collection-products {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
}
#shopify-section-template--16931673800944__978a3ff1-9d73-4562-b5bf-4ab2e59abe0f .collection-products .collection-product {
    width: 40%;
    min-width: 40%;
}
}

Am I replacing the code on the colors.css? I tried and nothing worked.

Hi @kellycousins93 ,

Yes can you try adding it again, I will check it.

Or can I send you a collaborator invite? I will help you add the option for this, it will be more customized.