Unlock Dynamic Collection Views: Adding a Product Grid Toggle to Your Shopify Store

Hey store owners! Ever found yourself browsing an online store and wishing you could quickly switch between a neat grid view and a more detailed list view of products? Or maybe you wanted to see more products per row, like a 2-column layout versus a 4-column one? It’s a common desire for shoppers, and for us merchants, it's a fantastic way to enhance the user experience on our collection pages. Recently, I saw a really pertinent discussion pop up in the Shopify community, started by yonicque, about this very topic. They were trying to get a collection view toggle working on their Shopify store, specifically with the Motion theme, and wanted to align it nicely with their filters and sorters. They even shared a visual of what they were aiming for:

It's a great example of how a small UI tweak can make a big difference in how customers interact with your products. But as yonicque quickly found out, it's not always as straightforward as it seems.

The Motion Theme & The Missing Toggle

One of the first things that came out in the discussion, as pointed out by community members like rshrivastava63 and devcoders, is that the popular Motion theme doesn't actually come with a built-in "customer-facing Collection View Switcher" by default. This means those handy buttons for switching between 2-column, 3-column, or list layouts aren't part of the standard theme package. Yonicque initially tried using a tool called SideKick, likely hoping for an easy, app-based solution. But as they reported, they were "unable to successfully add a collection product view switcher or collection view toggle." This isn't uncommon. While many apps offer fantastic functionalities, deep UI changes like this often require direct theme customization. They shared another excellent visual demonstrating the desired toggle, which really clarifies the goal:

So, if your theme doesn't offer it out of the box, what's the solution?

The Solution: A Little Custom Code Magic

As rshrivastava63 correctly pointed out, adding this feature "typically requires a small theme customization involving the collection template, CSS, and JavaScript." Don't let that sound too intimidating! It's definitely achievable, but it does mean diving into your theme's code editor. Before you touch anything, please, please, please:

Duplicate your theme! This is the golden rule of Shopify theme customization. Always work on a duplicate theme first, so if anything goes wrong, your live store remains unaffected. You can do this by going to your Shopify admin > Online Store > Themes > Actions > Duplicate.

Once you've got your safety net, here's a conceptual breakdown of the steps involved in adding a collection view toggle and aligning it with your filters and sorters:

Step 1: Modifying Your Collection Template (HTML)

You'll need to locate the file responsible for rendering your collection page's products. This is often something like sections/main-collection-product-grid.liquid or templates/collection.liquid (or a section it includes). You'll want to add:

• The toggle buttons: These will be simple HTML buttons or icons that represent your different views (e.g., grid, list, 2-column).
• A wrapper around your product grid: This wrapper will be crucial for applying CSS classes dynamically. For example,
  ...your product cards...
  .

Step 2: Styling with CSS

This is where the visual magic happens. You'll add CSS rules to your theme's stylesheet (often in a file like assets/theme.css or assets/base.css). You'll need:

• Default grid styles: Define how your products look in the standard grid view.
• Alternate view styles: Create CSS classes (e.g., .list-view, .two-column-grid) that change the layout of your product grid. For instance, you might use CSS Grid or Flexbox:

  
  .product-grid.list-view {
    display: flex;
    flex-direction: column;
  }
  .product-grid.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  

• Styling for the toggle buttons themselves: Make them look good and indicate which view is currently active.
• Aligning filter, sorter, and toggle: To get everything on one line, as yonicque initially asked, you'll likely target the parent container that holds these elements. Using CSS Flexbox is perfect for this:

  
  .collection-controls { /* or whatever your container is named */
    display: flex;
    justify-content: space-between; /* or flex-start, flex-end, center, space-around, space-evenly */
    align-items: center; /* vertically align items */
    flex-wrap: wrap; /* ensures elements wrap on smaller screens */
  }
  

Step 3: Adding Interactivity with JavaScript

Finally, JavaScript brings your toggle to life. You'll likely add this to a file like assets/theme.js or within a