Collection Buttons on Featured Collection

I am currently using “Ride” theme website, I’m trying to make it so the featured collection on my home page has buttons above the products that links to different collections based on what button you click.
ex. click the clothing button it will make clothing collection products appear if you click supplements button it will show the supplement collection for the products.

Basically like this website where it has 2 buttons “for him” and “for her” when you click the button it shows the different collections
example website: https://www.youngla.com

I am aware imma have to use custom HTML, CSS and javascript

Hello @bitcoinburke ,

If you are aware about the html/css/javascript and the theme you are using don’t have a section like the reference store have.
You need to create the section with 2 options so admin can select 2 collections for this section (tab section ) once the section part will be done call it with the html you have.

If you want html code example you can follow this.

Thanks

I have added it in but the images are not increasing in size and when i put in code to increase the size it ruins the quality? any fix for this?

document.addEventListener(“DOMContentLoaded”, function() {
var images = document.querySelectorAll(“.expand-image”);
images.forEach(function(image) {
var mediumImageUrl = image.src.replace(“_small”, “_medium”);
image.src=mediumImageUrl;
});
});
Used javascript to change images from the _small image to _medium.

if anyone else is trying to do this here is the code i used in my Custom Liquid Section
https://pastebin.com/MJTXdVzj

Also big thank you too Guleria!!