VARIANTS ON COLLECTION PAGE

Store Design
1

Hi

I would like all the variants to be displayed instead of the “choose the options” for that specific product I’m using Trade theme at the moment and got told that it would need coding to change this. Please help!!

Thank you

Screenshot 2025-01-02 225025.png
Screenshot 2025-01-02 225025.png1240×233 59.1 KB

2

Hi @llcxs

How are you?

if theme doesn’t have this functionality then this can be done using the custom liquid code, It will take approx. 3-4 Hours to make this type of functionality.
You have to hire a shopify developer for this.

If need any help from my end, please let me know.

Thanks
Laddi

3

Hello @llcxs ,

Step-by-Step Guide

  1. Backup the Theme
    Before making changes, duplicate the theme to create a backup.
    → Go to Online Store > Themes in the Shopify admin.
    → Click on Actions > Duplicate next to the Trade theme.

  2. Access the Theme Editor
    Click Actions > Edit Code on the active Trade theme.

  3. Locate the Product Template
    Open the product.liquid or product-template.liquid file (depending on the theme structure) under the Sections or Templates folder.

  4. Find the Variant Selector Code

    Look for code related to the dropdown for variants, such as:


    {% for variant in product.variants %}
        - 
    {% endfor %}

This will list all variants as selectable radio buttons.

  • Add Styling
    If needed, style the new variant list in the theme.css or base.css file:
ul.variant-list {
    list-style-type: none;
    padding: 0;
}
ul.variant-list li {
    margin: 5px 0;
}

  • Test the Changes
    → Save the changes.
    → Go to the product page to verify that all variants are displayed.

  • Optional: Add Error Handling for Out-of-Stock Variants
    → If some variants are out of stock, show a message or disable the selection:

-
4

Hi Zestard, I could not find the product.liquid or product-template.liquid at all.