help on this code

Shopify Discussion

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:

  1. First fix: Added CSS to theme.liquid file to set product card width to 19% and adjust column gaps
  2. 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.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

this was i trying to make as a reference

Roh_0-1738841264182.png
Roh_0-1738841264182.png1290×523 145 KB

this is what i coded

{% assign collection_handles = “GIFTS1,GIFTS2,GIFTS3,GIFTS4” | split: “,” %}

EXPLORE THE GIFTS

{% for handle in collection_handles %} {% assign collection_handle = handle | handleize %} {{ handle }} {% endfor %}
View All
{% for handle in collection_handles %} {% assign collection_handle = handle | handleize %} {% assign collection_obj = collections[handle] %}

{% if collection_obj and collection_obj.products.size > 0 %}

{% endif %} {% endfor %}
.section-heading { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 20px; } .filter-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto 20px auto; padding: 0 20px; } .filter-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .view-all { font-size: 14px; font-weight: bold; color: black; text-decoration: none; border-bottom: 1px solid black; padding-bottom: 2px; transition: all 0.3s ease-in-out; } .view-all:hover { color: gray; border-bottom: 1px solid gray; } .filter-link { padding: 10px 18px; font-size: 16px; font-weight: bold; text-transform: uppercase; color: black; background-color: white; border: 2px solid black; border-radius: 8px; cursor: pointer; transition: all 0.3s ease-in-out; } .filter-link:hover, .filter-link.active { background-color: black; color: white; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; justify-items: center; margin-top: 20px; max-width: 1200px; margin: 0 auto; } .product-card { padding: 20px; border: 1px solid #ddd; border-radius: 8px; text-align: center; transition: transform 0.3s ease; } .product-card:hover { transform: scale(1.05); } .product-card img { max-width: 100%; height: auto; margin-bottom: 15px; } .product-link { display: block; text-decoration: none; color: inherit; } .regular-price { font-size: 14px; color: #888; text-decoration: line-through; margin-bottom: 5px; } .sale-price { font-size: 16px; font-weight: bold; color: #000; /* Set to default or black color */ } @media (max-width: 768px) { .filter-container { flex-direction: column; align-items: center; } .product-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

so after lot of debugging this is what i reached

but there is only one problem left which i cant seem to solve that is first image is how the collection used to look like but after i put in the code i made every collection product grid changed to the second image

Roh_2-1738841094386.png
Roh_2-1738841094386.png400×230 45.3 KB

Roh_3-1738841094342.png
Roh_3-1738841094342.png399×172 26.9 KB

this is the output of new code

Roh_5-1738841094441.png
Roh_5-1738841094441.png399×215 57.6 KB

its perfect but only problem i am facing is all the collection product grid changed i dont know how

2

Hi @Roh

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

3

https://treyagifts.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=142431092909

4

@DaisyVo this is the link

5

Hi @Roh

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
li.grid-item.product-card {
    width: 19% !important;
}
ul#product-grid {
    column-gap: 1% !important;
}
{% endstyle %}

DaisyVo_0-1738892031374.png
DaisyVo_0-1738892031374.png1361×848 251 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

6

@DaisyVo

Thanks for your time now its working and all the products in line as they Use to be

Roh_0-1738894180765.png
Roh_0-1738894180765.png1341×499 193 KB

BUT they are still nowhere near how they USe to be

Roh_1-1738894234342.png
Roh_1-1738894234342.png1343×549 134 KB

Can you help me so that code can pick the default theme for the collection pages

7

Hi @Roh

You can add this code
it looks a bit better
However to get it exactly the same as before I’m not sure
fastest way is to reload the theme

{% style %}
ul#product-grid {
    max-width: 150rem !important;
    margin-inline: auto !important;
    padding: 0 5rem !important;
}
.product-card-inner img {
    width: 100% !important;
}
{% endstyle %}