FROM CACHE - en_header

MOTION THEME - Featured collection - Change mobile layout from slider to same as collection page

Solved
lion_no
Explorer
58 6 19

One of our final changes require to launch our store! 🙂

I'd like to change the mobile user experience on our store so the user can scroll down on the HOME PAGE to see all products through Featured Collection, instead of having to use the product slider which it currently defaults to - which currently looks like:

Screenshot_20211028-155642_Chrome.jpg

On the desktop the design layout is great and it works just as it should - without a slider:

lion_no_1-1635430534690.png

 

 

a great example on how we'd want it to look on MOBILE is the collection page:

Screenshot_20211028-160016_Chrome.jpg

 

I found a post in regards of this issue earlier: https://community.shopify.com/c/shopify-design/urgent-theme-motion-featured-collection-on-home-page-...
But it does not seem to work on the current version of the motion theme (8.1.1)

Accepted Solution (1)

Accepted Solutions
lion_no
Explorer
58 6 19

This is an accepted solution.

Fixed by doing the same as mentioned here (https://community.shopify.com/c/shopify-design/urgent-theme-motion-featured-collection-on-home-page-...) - but directly editing it into the .grid-overflow wrappers instead of at the bottom of the code!

View solution in original post

Replies 4 (4)
lion_no
Explorer
58 6 19

This is an accepted solution.

Fixed by doing the same as mentioned here (https://community.shopify.com/c/shopify-design/urgent-theme-motion-featured-collection-on-home-page-...) - but directly editing it into the .grid-overflow wrappers instead of at the bottom of the code!

Rafie
Shopify Partner
2 0 0

This is a big problem with Motion theme and this solution does not work with version 9.0.0

 

That mobile experience is ridding conversion and proper product display in mobile. You should make that an option and not force everyone to display products as a slide on the home page. Users see less products 

datboydami
Tourist
6 0 1

it works with the last version , in the theme.css.liquid, you have to delete all the line for the grid-overflow-wrapper and replace it with this code :

 

@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper {
overflow: visible;
overflow-x: visible;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid {
white-space: nowrap;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item {
width: 50%;
flex: 0 0 50%;
}
}