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: "," %}

<!-- Section Heading -->
<h2 class="section-heading">EXPLORE THE GIFTS</h2>

<!-- Collection Filter Buttons with View All -->
<div class="filter-container">
<div class="filter-buttons">
{% for handle in collection_handles %}
{% assign collection_handle = handle | handleize %}
<button class="filter-link" onclick="filterCollection('{{ collection_handle }}')" id="btn-{{ collection_handle }}">
{{ handle }}
</button>
{% endfor %}
</div>
<a href="#" id="view-all-btn" class="view-all">View All</a>
</div>

<!-- Display Products from Each Collection -->
<div id="collection-container">
{% for handle in collection_handles %}
{% assign collection_handle = handle | handleize %}
{% assign collection_obj = collections[handle] %}

{% if collection_obj and collection_obj.products.size > 0 %}
<div class="collection-section fade-in" id="{{ collection_handle }}" style="display: none;">
<div class="product-grid">
{% for product in collection_obj.products limit: 4 %}
<!-- Render Product Card with GID (Product ID) -->
<div class="product-card" style="
border-width: {{ settings.card_border_thickness }}px;
border-radius: {{ settings.card_corner_radius }}px;
border-color: rgba(0, 0, 0, {{ settings.card_border_opacity | divided_by: 100 }});
box-shadow: {{ settings.card_shadow_horizontal_offset }}px {{ settings.card_shadow_vertical_offset }}px {{ settings.card_shadow_blur }}px rgba(0, 0, 0, {{ settings.card_shadow_opacity | divided_by: 100 }});
padding: {{ settings.card_image_padding }}px;
text-align: {{ settings.card_text_alignment }};
{% if settings.card_style == 'card' %} /* Additional styling for 'card' style */
background-color: #f9f9f9;
{% else %}
background-color: #ffffff;
{% endif %}
">
<a href="{{ product.url }}" class="product-link" data-product-gid="{{ product.id }}">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>

{% if product.compare_at_price > product.price %}
<p class="regular-price">{{ product.compare_at_price | money }}</p>
{% endif %}
<p class="sale-price">{{ product.price | money }}</p>
</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>

<!-- JavaScript for Filtering and View All -->
<script>
function filterCollection(collectionId) {
document.querySelectorAll('.collection-section').forEach(section => {
section.style.display = 'none';
});

document.querySelectorAll('.filter-link').forEach(button => {
button.classList.remove('active');
});

let selectedSection = document.getElementById(collectionId);
let selectedButton = document.getElementById("btn-" + collectionId);

if (selectedSection) {
selectedSection.style.display = 'block';
selectedSection.classList.add('fade-in');
}

if (selectedButton) {
selectedButton.classList.add('active');
}

// Update "View All" link to the standard Shopify collection URL
document.getElementById("view-all-btn").setAttribute("href", "/collections/" + collectionId);
}

document.addEventListener("DOMContentLoaded", function() {
let firstCollection = document.querySelector('.collection-section');
let firstButton = document.querySelector('.filter-link');

if (firstCollection) {
firstCollection.style.display = 'block';
firstCollection.classList.add('fade-in');
}

if (firstButton) {
firstButton.classList.add('active');
}

let activeCollection = firstCollection ? firstCollection.id : "";

// Ensure the "View All" button leads to the correct collection's default page
document.getElementById("view-all-btn").setAttribute("href", "/collections/" + activeCollection);
});

// Example of accessing the gid (product id) in JavaScript
document.querySelectorAll('.product-link').forEach(link => {
link.addEventListener('click', function(event) {
let productGid = event.currentTarget.getAttribute('data-product-gid');
console.log('Product GID clicked:', productGid);
});
});
</script>

<!-- CSS Styling -->
<style>
.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));
}
}
</style>

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 </head> tag and add the following code above </head> 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 · Accepted solution]

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