https://treyagifts.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=142431092909
Topic summary
A user is implementing custom code to create a filtered collection display with buttons for “GIFTS1, GIFTS2, GIFTS3, GIFTS4” and a “View All” option on their Shopify store. The code successfully creates the desired filtering functionality, but unintentionally altered the product grid layout across all collection pages.
The Problem:
- After implementing the custom code, product cards changed from their original appearance to a different grid layout
- The new layout works functionally but doesn’t match the original theme styling
- Images show the product grid became narrower and lost its default formatting
Solution Provided:
A support team member offered CSS fixes to restore the grid layout:
- First fix: Added CSS to
theme.liquidfile to set product card width to 19% and adjust column gaps - Second fix: Additional CSS to set max-width, margins, and image sizing
Current Status:
The grid is partially restored and products are aligned, but still doesn’t perfectly match the original theme appearance. The support member suggested reloading the theme as the fastest way to achieve exact original styling. The discussion remains open as the user seeks to make the code inherit default theme styling for collection pages.