Hello. I am using Pipeline theme for a clothing brand with lots of options and variants. I have tried everything but I am not able to add options and variants as filters in collection page and also unable to show Size and Color on product page. Not sure where I am going wrong. Can someone please help urgently. Thank you!
Hey @Pari12 ,
I can definitely help! Here are a few things to check for adding filters and displaying Size and Color:
- Adding Variant Filters to Collection Page:
-
Enable Shopify’s Native Filters: Go to Admin > Online Store > Navigation > Collection and Search Filters, then add Size, Color, and other options as filters. - Check Theme Settings: In Customize Theme > Collection Pages, see if there’s a setting to enable filters.
-
Modify Collection Template: If native filters aren’t working, check if collection.liquid or collection.json supports facets for Shopify’s filters.
- Showing Size & Color on Product Page:
-
Theme Settings: In Customize > Product Pages, check if the theme has settings to display variants like size and color.
-
Ensure Variants Exist: Go to Admin > Products, check that the variants have Size and Color options.
-
Modify Product Template: If they still don’t show, try editing product.liquid or product-form.liquid to include:
{% for option in product.options_with_values %}
{% endfor %}
- Use Swatches (if needed): Some themes require manual swatches setup for colors.
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat
There are two ways to separate variants as products on the collection page:
- Manual Method: You can modify the collection template to list variants separately instead of grouping them under a single product. This requires editing Liquid code and handling variant selection logic manually. You can see how Rajat explained.
- Automated Method: You can use a third-party app that modifies the template dynamically without requiring manual code changes.
I’m the owner of Variants on Collection app, which helps merchants display variants as separate products based on any combination (e.g., Color, Color & Size, etc.). It also allows showing price ranges without modifying the template. The app is also support Color, Size filters as well.. If you’re looking for an easier solution, feel free to check it out!
Thank you both. I was able to solve the issue by using an app for filters and adding variant section on the product page. Thank you for the prompt response though. Appreciate it.