Transform Your Mobile Storefront: One Product Card Per Row on Shopify's Reformation Theme

Hey there, fellow store owners! We all know how crucial a stellar mobile experience is these days. Most of our customers are probably browsing and buying right from their phones. So, when something looks a little off, or not quite as impactful as we'd like on a smaller screen, it's totally understandable to want to tweak it.

Recently, a common challenge popped up in the Shopify community, specifically around customizing product cards on the popular Reformation theme. It's a great premium theme, but like any template, sometimes you need to put your own stamp on it to truly shine.

The Mobile Product Card Dilemma on Reformation

Our community member, siva_fds, brought up a super relevant point about the "Collection Tabs" section on their homepage. On mobile devices, the Reformation theme was displaying two product cards per row. While this might save some vertical space, it often makes individual products feel smaller and less prominent. Siva_fds's goal was clear: get those product cards to display one per row on mobile, making them larger and more eye-catching. Plus, they wanted to tackle some of that extra white space that often comes with default layouts.

Take a look at what siva_fds was seeing – two cards side-by-side, which can feel a bit cramped:

This isn't just a visual preference; it's about optimizing the user experience. Larger product cards mean easier tapping, better visibility of product details, and a generally more premium feel on mobile. It can seriously impact conversion rates!

The Community's Solution: A Little CSS Magic

Thankfully, the Shopify community is a treasure trove of helpful folks. Wsp stepped in with a concise and effective CSS snippet that directly addresses this issue. The beauty of this solution is that it targets only mobile screens, keeping your desktop layout untouched. This is exactly what we want – responsive design that adapts beautifully.

The goal is to transform that two-column layout into a clean, single-column design, like what Moeed shared in their follow-up:

How to Implement the Fix: Step-by-Step

Before you dive into any code, a friendly reminder: always, always, always duplicate your theme first! This creates a backup, so if anything goes awry, you can easily revert to your previous version without any stress. You'll find the "Duplicate" option under "Actions" next to your live theme in the Shopify admin.

Once you've got your backup, here's how to implement Wsp's solution:

1. Navigate to Your Theme Code:
   • From your Shopify admin, go to Online Store > Themes.
   • Find the theme you want to edit (ideally, a duplicated version for testing). Click Actions > Edit code.
2. Locate the CSS File:
   • In the left sidebar, under the Assets folder, look for your main CSS file. It's often named base.css, theme.css, or something similar like styles.css.
   • If you can't find a dedicated CSS file or prefer to keep your customizations separate, you can also add this code within the section of your theme.liquid file, just before the closing tag. However, adding it to a CSS file is generally cleaner for organization.
3. Add the Custom CSS:
   • Scroll to the very bottom of the chosen CSS file (or before in theme.liquid).
   • Paste the following code snippet exactly as it appears:

 @media screen and (max-width: 768px) {

  
  .collection-tabs .product-grid,
  .collection-tabs .grid,
  .collection-tabs__product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .collection-tabs .grid__item,
  .collection-tabs .product-card,
  .collection-tabs__product-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  
  .collection-tabs {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

4. Understand What the Code Does:
   • The @media screen and (max-width: 768px) part is crucial. It tells the browser to apply these styles only when the screen width is 768 pixels or less (typically mobile devices and smaller tablets).
   • grid-template-columns: 1fr !important; is the magic line that forces the grid to display only one column, making each product card take up the full available width within its container.
   • width: 100% !important; and max-width: 100% !important; ensure that each individual product card expands to fill that single column.
   • gap: 16px !important; adds a nice 16-pixel space between your product cards, preventing them from looking too squished.
   • padding-left: 12px !important; and padding-right: 12px !important; adjust the overall padding of the .collection-tabs section, helping to reduce any unwanted white space on the sides and giving a cleaner look.
   • The !important tags are used to ensure these custom styles override any default styles set by the theme, which is often necessary when making specific layout changes.
5. Save and Preview:
   • Click Save.
   • Now, preview your theme (especially on a mobile device or by resizing your browser window on desktop) to see the changes in action. You should now see one product card per row in your "Collection Tabs" section on mobile!

A Few Final Thoughts and Best Practices

While this particular CSS snippet from Wsp is highly effective for the Reformation theme, remember that direct code edits require a little care. Always test thoroughly, not just on one device, but ideally on a few different ones or using browser developer tools to simulate various screen sizes.

It's also a good idea to comment your code so you remember why you added it later. Something like /* Custom: One product card per row on mobile for Collection Tabs */ above the CSS block can be really helpful for future you (or anyone else who might work on your store).

Customizing your theme, even with small tweaks like this, can make a huge difference in how professional and user-friendly your store feels. It's these kinds of details that elevate the shopping experience and keep customers coming back. Keep an eye on the Shopify community – it's full of brilliant solutions like this one, ready to help you fine-tune your store to perfection!