Urgent - Theme Motion: Featured collection on Home Page - 2 products per row

Store Design

Topic summary

A Shopify store owner using the Motion theme needs to display a featured collection on the homepage with 2 products per row on both desktop and mobile devices.

The Problem:
While the desktop layout displays correctly, mobile view defaults to a slider/switcher format instead of the desired 2-column grid layout. The collection page already shows the correct 2-column mobile layout, but this needs to be replicated on the homepage.

The Solution:
A community helper (KetanKumar) provided custom CSS code to be added to the theme.css file. The solution involved:

  • Disabling the overflow slider behavior on mobile
  • Setting grid items to 50% width with flex-wrap
  • Adding proper margins and padding for spacing
  • Targeting the specific section ID (#shopify-section-16193798554af94825)

Follow-up Adjustments:
Additional CSS was provided to:

  • Center color swatches and convert them from squares to circles
  • Adjust spacing between product rows
  • Add side margins for better mobile presentation

Current Status:
The solution was confirmed working, even with the latest Motion theme updates. Multiple users have successfully implemented this fix. One user reported intermittent issues with color variants not displaying on mobile preview, though they appear in the theme customizer.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
9

@MaxCosta

thanks for confirm please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@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%;
}
}
2 Likes