Prestige Theme 7.2.0 | Collection List As A Grid on Mobile

Store Design
, ,
1

Hi There,

Is there a way to make your collection list as a grid, instead of carousel? or stacked? Please help

Thank you!

2

Yes, it is possible to display your collection list as a grid instead of a carousel or stacked layout. The specific method may vary depending on the theme you’re using, but here’s a general approach:

  1. Access your theme’s code editor: In your Shopify admin, go to “Online Store” > “Themes” and click on the “Actions” button next to your active theme. From the dropdown menu, select “Edit code” to open the theme’s code editor.

  2. Locate the collection list section: Look for the section or snippet that controls the display of your collection list. The file could be named something like collection-list.liquid, featured-collections.liquid, or similar. You might find it in the “Sections” or “Snippets” folder.

  3. Modify the code to display the collection list as a grid: In the section or snippet file, you’ll need to adjust the HTML and CSS to create a grid layout. Replace any code related to a carousel or stacked display with code that generates a grid.

    • HTML: Remove any code that sets up the carousel or stacked layout and replace it with HTML markup for a grid structure. Use appropriate HTML tags and CSS classes to define the grid structure and individual collection items.

    • CSS: Add or modify CSS styles to define the grid layout. Use CSS properties like display: grid, grid-template-columns, and grid-gap to control the appearance of the grid.

  4. Save the changes and preview: After making the modifications, save the file in the code editor and preview your store to see the updated collection list displayed as a grid.

Please note that the specific code changes and CSS styles required may vary depending on your theme’s structure and styling. It’s recommended to make a backup of your theme or work on a duplicate theme to test the changes before applying them to your live store.