I am trying to remove the dropdown from the product listing page where when I click on “Add to cart” button it opens another dropdown to select variants of the product.
Now all the variants are displayed on the page already. So I just wanted to remove this extra step and add the variant I’m adding to cart directly without the dropdown.
Note - The product inside does have the option to select all the variants which is fine. I just wanted to remove the dropdown from all product listing and let users select the specific product.
Is there anything I can do to implement this? Thanks.
Thank you for reaching out. That’s a very interesting question and I can definitely see how it could be useful hide this option from the collection page, especially on mobile devices.
As you are using a third party theme, the best option would be to contact your theme developers and see if they can support this customization or have a guide that is specific to your current theme. Otherwise, you can follow this guidewhich has been accepted as solution on a similar thread.
Keep in mind before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to.
If you don’t feel comfortable editing theme code, you can always hire Shopify Expertwho can implement the change for you. You can also look into app solutions on our App Store. Apps like Variator show variants as separate products on collection pages. This allows users to find the right product directly from the shop without having to open a product and select the product variant from the drop-down.
Thanks for the help Iris! Is there any chance you know where exactly am I supposed to paste the text in the code? Like where exactly in the code do i paste the line? Also is theme.liquid same as theme.css or do i need a different code for this?
