@liquidshop.co You don’t really have to post a reply to prove another reply wrong when it’s not even that important. The main reason of replying to any topic is to get the topic resolved.
Secondly, your reply isn’t helpful either. You’re just promoting your services.
People would be more interested in knowing how it works rather than seeing it working on your store.
I agree with @Maximus3 that if you just simply ask Sidekick, it will first analyze your theme and theme files and then will either do it for you or will point you to the right direction that will actually work for you.
@Moeed I wanted to show him how it actually looks because the layout looks odd in real usage. It also displays the wrong navigation count, and sometimes the last row is left with one or two products even when there are more products on the next page.
Sidekick is an AI assistant, so it will generate a solution for whatever is asked, but that does not mean every merchant can properly implement or follow it. If you see the screenshot I shared, it does not even provide the full code.
I am trying to help people just as you do. There is no difference between your motive and mine.
People underestimate the usefulness of Sidekick. It can’t edit theme files directly, doesn’t mean it can’t guide you and give you instruction. Sidekick has tremendous coding capabilities. From Liquid to Javascript and even Typescript. It’s crazy how many people push merchants away from it then give an ai generated reply like they are king. Sidekick isn’t without problems for sure. But it’s way better than asking a forum imo. I’ve built many custom sections, and replaced all my apps with custom made apps using VS Code, all with the guidance of Sidekick. Shopify gives these tools for a reason. Use them.
Hey there! I completely understand wanting to ditch a clunky app for a cleaner, hardcoded theme solution.
While there isn’t a simple “copy-paste” snippet for the Ritual theme, here is the general logic you’ll need to follow to get this done:
By default, Shopify is built to loop through products . To get what you want, you need to change the logic to loop through variants .
You’ll want to look inside your sections/main-collection-product-grid.liquid file (where the main collection loop lives) and your snippets/product-card.liquid file (the visual layout of the item). You essentially have to modify the main loop so that instead of just displaying collection.products, it iterates through product.variants and spits out a separate card for each one.
A quick heads-up before you start modifying the code:
Page Speed: Hardcoding is better than an app, but rendering a separate card for every single variant can still make the page heavy and cause scrolling lag if you have a lot of items.
SEO Risks: Google hates duplicate content. If you separate variants, make sure your Canonical Tags are set up correctly to point back to the main product URL.
Theme Conflicts: Splitting variants manually often breaks built-in theme features like hover images, quick views, or product badges.
Speaking of badges, if you do get this hardcoded and find that your product labels (like “Sale”, “New”, or “Low Stock”) stop working correctly on the individual variant cards, Deco is a fantastic app to fix that. It’s super lightweight and handles product labels beautifully, even on complex store setups: Check out our Deco Product Labels here
Frankly, it may worth to consider the opposite – create each variant as a separate product and on each product page have a block in product info section to list all the “siblings”.
This way you’d avoid all the complexities with filtering, etc.
The code to get “siblings” is not very complex.
Just asked Sidekick to generate one for me – works fine:
Create a block which will get first part of the product title before the dash, use storefront API to fetch products which has the same text in their title and output links to them as swatches
