Mobile scroll on home page

[kellycousins93]

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’.

[namphan]

Hi @kellycousins93 ,

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

[kellycousins93]

{% 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 %}

[namphan]

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!

[kellycousins93]

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?

[namphan]

Hi @kellycousins93 ,

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

[kellycousins93]

https://www.stagnesrituals.com/

[namphan]

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%;
}
}

[kellycousins93]

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

[namphan]

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.