change layout of product recommendations on mobile view only

Store Design

Topic summary

A user sought to modify product recommendations on mobile to display in a horizontal swipeable row instead of stacking vertically, without using an app. They’re using Dawn theme 15.3.0.

Solution provided:

  • Add custom CSS code to the theme’s stylesheet (base.css/theme.css/style.css/main.css/custom.css)
  • The code uses CSS media queries targeting mobile screens (max-width: 749px)
  • Implements flexbox layout with horizontal scrolling and snap behavior
  • Sets product cards to 65% width for optimal mobile viewing
  • Hides scrollbars for cleaner appearance
  • Overrides default grid styles that conflict with the horizontal layout

Outcome: The solution was successfully implemented and confirmed working by the original poster.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Is it possible on product page to display the product recommendations in a row (swipe) instead of underneath each other on mobile view using a code as i don’t want to use an app.

I am using the Dawn theme (15.3.0) - url thescentedmeltshop.com - password is shop90

Thanks,

2

Hey! @samr66 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

/* Horizontal swipe for product recommendations on mobile */
@media screen and (max-width: 749px) {
  product-recommendations ul.grid.product-grid,
  product-recommendations .product-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem !important;
    padding: 0 1rem 1rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  product-recommendations .grid__item {
    flex: 0 0 65% !important;
    min-width: 65% !important;
    max-width: 65% !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  /* Hide scrollbar */
  product-recommendations .product-grid::-webkit-scrollbar {
    display: none !important;
  }

  product-recommendations .product-grid {
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important; /* Firefox */
  }

  /* Reset conflicting grid styles */
  product-recommendations .product-grid.grid--2-col-tablet-down {
    grid-template-columns: none !important;
    display: block !important;
  }
}
3

Thank you it’s worked!