Jump to content

How to add 'add to cart' button in Shop block

Go to solution Solved by paul2009,

Recommended Posts

At the moment I import shop products in a product gallery block onto the homepage and I am trying to add a 'add to cart' button beneath each of the products to see if that improves conversion. Is there a way to do this?

I'm using Brine template and the site is at www.oliverjwoods.com

Here's a pic of where I'd like the buttons to go

OJW_Button_Question.thumb.png.a03644640efea1fd04529086ee5f9ec3.png

Thanks for any help!

C

Link to comment
  • Solution

I see you are using a Summary Block to display the products. Squarespace haven't added 'Add to Cart' buttons to Product Summary Blocks and it no longer appears that they will. 

There are therefore three options:

  • Use can use some code to add a cart button to each product on a Product List Page. I provided some code here to allow you to do this.
  • Use code to add the button to the Summary Items by harnessing the quick view data.
  • Use a series of Product Blocks instead. This doesn't scale but is manageable for a few products. There's a checkbox on these blocks that allows you to add the button.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009
Linked to more detailed answer

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Something like this:

.product-block .productDetails .product-title {
  font-size: 2em;
  line-height: 1.3em;
  font-weight: 600;
}

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 5 months later...

I just had a client ask me for something very similar! Google around I found this post, and thought I would share my solution... It was not manageable to add hundreds of product blocks and the summary block doesn't contain the item-id needed to link it to an Add to Cart button. It was best to use the product list page. I figured out a solution that works great on desktop and mobile.

https://www.bradgood.net/articles/how-to-add-an-add-to-cart-button-to-a-squarespace-product-list-page

Edited by bradgood
Link to comment
  • 1 month later...
On 5/23/2020 at 2:21 AM, BureauSF said:

Thanks for the lead, @bradgood - unfortunately I do not seem to get in working in Product Summery Blocks in Pacific template

I am using a different Category Filter with each Product Summary grid - would that make a difference for the code?

 

On 7/3/2020 at 12:54 PM, divar said:

Hey @bradgood I tried your code and unfortunately it doesn't seem to be working for me. Do let me know if someone is able to implement it. Thanks!

Try this plugin.

by @ThompsonWebDesign

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 5/17/2020 at 5:10 PM, bradgood said:

I just had a client ask me for something very similar! Google around I found this post, and thought I would share my solution... It was not manageable to add hundreds of product blocks and the summary block doesn't contain the item-id needed to link it to an Add to Cart button. It was best to use the product list page. I figured out a solution that works great on desktop and mobile.

https://www.bradgood.net/articles/how-to-add-an-add-to-cart-button-to-a-squarespace-product-list-page

Hey Brad, this doesn't seem to be working for me but it would be AMAZING if it did!! Can you reach out to me at hello@rentbestdressed.com to see if you can help?

Link to comment
On 8/13/2020 at 10:12 AM, bestdressed said:

Hey Brad, this doesn't seem to be working for me but it would be AMAZING if it did!! Can you reach out to me at hello@rentbestdressed.com to see if you can help?

Can you share link to page where you use Shop Block? We can help easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 9/8/2020 at 11:10 PM, JamesL-TFM said:

I am trying to add an 'add to cart' button to a summary block showing products. I have implemented @bradgood's code on my main commerce page (thanks!) but I would like to also have add to cart buttons on the pages where I show a summary of products based on tags. Does anyone have any suggestions?

 

An example website is here:

www.tendrevolution.com/limden-brook-organic

Have you found the solution yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
On 7/8/2020 at 10:41 AM, tuanphan said:

Hi Tunphan, I tried the using the plugin to work on my website and it did. But I'm having problem with customizing and editing the look. Everything looks too big, I was hoping you could help out with a code reduce the sizes of each of those blocks. Kindly respond to this as early as you can.

Although, I'm still using the free version of the plugin (I want to be sure it can be adjusted before paying). You will not be able to see the use of the free version on the published site. I have attached a screenshot of the back end view.

Here's my website: marchefresh.ca

Screenshot 2023-04-08 044238.png

Screenshot 2023-04-08 044155.png

Screenshot 2023-04-08 044126.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.