Adding Add to Cart Button & Getting Rid of Variant Selector on Collection Pages - Shopify Brooklyn Theme

Table of Contents

1. Introduction
2. Adding an Add to Cart Button to Collection Pages
3. Adding a Cart Drawer
4. Flexibility with the Brooklyn Theme
5. Efficient Use of Timber JS
6. Getting Rid of the Variant Selector
7. Setting Default Options
8. Part Three: Variant Selectors
9. Conclusion
10. FAQs

Adding an Add to Cart Button to Collection Pages

Welcome back to Studio Raven! In this article, we will be discussing how to add an add to cart button to collection pages for the Shopify Brooklyn theme, which uses Timber JS. This is a follow-up to our previous video, where we covered the basics of adding an add to cart drawer button. There are many things that you could want to be doing, whether that be just adding an add to cart button to collection pages, specifically adding one for the cart drawer, learning to be more flexible with the Brooklyn theme, or just learning to use Timber JS more efficiently.

Getting Rid of the Variant Selector

One of the questions we received in the comments was from Lotus Shields, who asked how to get rid of the color selector on just a collection page, not the product page, so that it's just the add to cart button on the collections page. What this question means is how to get rid of the variant selector. The video that we uploaded does not have variants on the products, so we're going to show an example that does have variants.

To get rid of the variant selector, we need to go to the online store and open our Brooklyn theme and edit the code for that. We have the product grid item, and if we scroll down, we still have the code here from last time. What we can do to figure this out ourselves is to right-click and choose inspect. This will open a little pop-up that gives us more information about what we're looking at. If we hover over this, we see that this whole section here is called radio wrapper js product form items. If we go any further, then that's the whole form for adding to cart.

We need to make sure that there is a default, and it looks like there is, in fact, a default for the first available variant. If you don't want to choose the default, it will already choose a default for you. So, if we save this code now, simply having added the comments onto both of these lines, and we go back to our collections page and refresh, our changes have gotten rid of the variant selector for Dexter.

If we click on the other items here, Johnny Bravo still adds to cart without issue. If we click on Courage, that also still adds to cart. If I click on Dexter, Dexter adds to cart, but the first available variant, which is DD, is being selected as default. Of course, your customers could always click on the product itself and then select what they want from there and add it to their cart.

Setting Default Options

If we wanted to have a default variant of our own choosing, then instead of saying if the variant is equal to the first selected variant, we could simply hard code, which means get rid of the references to any variant or product and replace them with the variant ID and the product ID that we want. This could be for another video if you are interested in setting defaults, values for these add to carts, in perhaps a part three.

Part Three: Variant Selectors

In part three, we're going to talk more about those variant selectors and getting those to work the way we want and perhaps even setting our own custom default options.

Conclusion

Thank you for reading this article on how to get rid of the variant selector on collection pages for the Shopify Brooklyn theme. We hope that this has been helpful to you and has answered your question. If you have any more questions, please ask them in the comments below. We try to answer as many questions as we can, and when we see a very good question or something we may have forgotten to address, we will make a video and be as clear as we can.

FAQs

Q: How do I get rid of the color selector on just a collection page, not the product page? A: To get rid of the variant selector, you need to go to the online store and open your Brooklyn theme and edit the code for that. We have the product grid item, and if we scroll down, we still have the code here from last time. What we can do to figure this out ourselves is to right-click and choose inspect. This will open a little pop-up that gives us more information about what we're looking at. If we hover over this, we see that this whole section here is called radio wrapper js product form items. If we go any further, then that's the whole form for adding to cart.

Q: Can I set my own custom default options? A: Yes, you can set your own custom default options by hard coding the variant ID and the product ID that you want. This could be for another video if you are interested in setting defaults, values for these add to carts, in perhaps a part three.