VARIANTS ON COLLECTION PAGE

[llcxs]

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

[vpsbohra]

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

[ZestardTech]

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:

<ul>
    {% for variant in product.variants %}
        <li>
            <label>
                <input type="radio" name="variant" value="{{ variant.id }}">
                {{ variant.title }}
            </label>
        </li>
    {% endfor %}
</ul>

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:

<li>
    <label>
        <input type="radio" name="variant" value="{{ variant.id }}" {% if !variant.available %}disabled{% endif %}>
        {{ variant.title }} {% if !variant.available %}(Out of stock){% endif %}
    </label>
</li>

[llcxs]

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