Pipeline theme, change search results from list view to grid view

Store Design
1

We use the Pipeline theme and the search function gives a list of results.

My goal is to have the search results shown as a grid, a product grid.

There is not a setting in the Pipeline Theme to change the format of the search results.

2

Hey @DavidWard1
In your Pipeline theme Open the “search.liquid” file.
Identify the List View HTML Structure.
The search results are most likely displayed as a list. Look for a section of code that renders the search results, which may include the

    ,
  • , or other list-related HTML tags.

    
  

    {% for item in search.results %}
      

        
        
          
          ### {{ item.title }}
        
      

    {% endfor %}

    Now you need to make sure the grid layout is correct. Add or modify the CSS to display the search results in a grid in your theme.scss.liquid or theme.css file (depending on the theme’s structure).

    .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.grid-item {
  text-align: center;
}

    After making the changes, check your store’s search results page to ensure that the products are displayed in a grid format. You can change the grid columns and spacing as needed by adjusting the CSS.