Add button to collection list - Brooklyn Theme

Solved
MaxxVE
Excursionist
20 0 2

Hi,

 

 I am using the Brooklyn theme. I have a collection list on my homepage “The Au Naturale Collection”. I would like to add a “Shop Now” button to it. Please help. Thank you in advance!

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2300 413 541

This is an accepted solution.

It would require CSS knowledge to implement specific styling, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

In case you're unfamiliar with CSS you'll likely want to hire a Shopify developer to assist you.

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 8 (8)
diego_ezfy
Shopify Partner
2300 413 541

@MaxxVE 

  • From Shopify Admin select Online Store and click on Themes
  • Click on Actions > Edit Code
  • Search for product-grid-item.liquid (or something similar!)
  • Find <div class="product-item--price">, and add the following code before, or after, the closing </div> tag depending on if you want the button and quantity selector above or below the price
<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form> 
  • Hit Save

Let me know whether it works.

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
MaxxVE
Excursionist
20 0 2

I am going to try this. For some context, i would like for it to look like this. 

609E565F-9F7C-4101-B7CC-895A89D0CC21.jpeg

diego_ezfy
Shopify Partner
2300 413 541

This is an accepted solution.

It would require CSS knowledge to implement specific styling, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

In case you're unfamiliar with CSS you'll likely want to hire a Shopify developer to assist you.

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

MaxxVE
Excursionist
20 0 2

I was hoping that wouldn’t be the case. Thank you so much!

diego_ezfy
Shopify Partner
2300 413 541

@MaxxVE you're welcome, sorry I couldn't help this time.

Wishing you a great weekend!

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
MaxxVE
Excursionist
20 0 2

I have one more question for you.

 

Could you give me a code to remove some of the space between the “Review” heading and the video?

diego_ezfy
Shopify Partner
2300 413 541

@MaxxVE 

Kindly post a new question with a screenshot attached & tag me, I'll help you out!

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
mjdubarr
Tourist
30 0 3

The button works!

 

But it goes straight to checkout. How can they stay browsing in the shop after adding to cart?