help on this code

[Roh]

this was i trying to make as a reference

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 %}

{% for product in collection_obj.products limit: 4 %}

{{ product.title }}

{% if product.compare_at_price > product.price %}

{{ product.compare_at_price | money }}

{% endif %}

{{ product.price | money }}

{% endfor %}

{% 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

this is the output of new code

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

[DaisyVo]

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?

[Roh]

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

[Roh]

@DaisyVo this is the link

[DaisyVo]

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 %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Roh]

@DaisyVo

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

BUT they are still nowhere near how they USe to be

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

[DaisyVo]

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 %}