How to put "add to cart" buttons on a page (not product page)?

Astronaut
1005 130 237

Cool, so for the add-to-cart functionality, you'll want to add a data attribute to that div. 

<div class="add-to-cart" data-url="{{product.url}}">Add To Cart</div>

I tested, and you already have jQuery included on your theme so you can do it this way. Add this to the bottom of the collection.liquid;

<script>

$('.add-to-cart').on('click', function(){
var product_url = $(this).data('url');

jQuery.getJSON(product_url + ".js", function(product){

var product_id = product.variants[0].id;
console.log(product_id);

jQuery.post('/cart/add.js', {

  quantity: 1,
  id: product_id

});

})

alert('You added an item to the cart');

})

</script>

That should do it. Also, I looked at some of your products and only saw one variant, so this is for a product with one variant. Just keep that in mind that "product.variants[0]" is referencing the first variant of your product, so if you needed to add a different variant you would need to change the code to reflect that. You can take that alert out if you want, I just added it so you would have some feedback if it worked. I tested it on the console on your site and it worked, so give it a shot. You may want to style the Add To Cart div so when you hover it, it turns to a pointer so people know they can click it.  If you used my alternative solution you can throw this in the style tags. Or throw this at the bottom of your theme.scss.liquid.

.add-to-cart:hover{

cursor:pointer;

}

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
11 0 0

Perfect that works great! I'll probably toy around with the styling, but the functionality was the important part and I think it's right on the money. I love the alert that the item was added to the cart.

The only thing that didn't work was the hover part to make it clearer it's a button not just text. I don't see theme.scss.liquid only theme.liquid so I added it to the bottom of that and it didn't do anything. Does it need to be inside some other pieces or something? Or does it have to be in theme.scss.liquid and if so how do I find that? I just did all the way at the bottom of theme.liquid. Also, can that functionality be made to change the text color when hovering, or something similar? I think that would be neat.

0 Likes
Astronaut
1005 130 237

you could put it in style tags at the top of the collection.liquid page if you want. Or I think your file was called timber.scss or something like that. But this should work for certain if you put it at the top of your collection.liquid.

<style>

.add-to-cart:hover{

cursor:pointer;
color:red;

}


</style>

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
11 0 0

That's PERFECT. Could not have turned out better. I am so pleased with the results, now it's just a matter of finishing the creation of the collections and updating the links on our site.

Once again, I appreciate your help so so much. I cannot thank you enough.

0 Likes
Highlighted
Astronaut
1005 130 237

You're welcome, I'm glad I could help. Starting out with shopify is daunting enough even if you already know HTML, CSS, and Javascript. Especially if it's not your occupation, it takes a lot of time to learn all of these things. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
11 0 0

It is very challenging. Plus I spend all this time learning about it, but in the future anything I do that isn't Shopify it isn't going to carry over. Unlike the common ones, HTML/CSS,Javascript, where at least what I learn can be applied in the future.

It would be nice if Shopify would provide some assistance to us where we can submit projects like this to them and have them do it rather than having to hire an expert or DIY it every time. For a system that markets so heavily to small businesses they really skimp on so many things useful to that audience. Oh well.

0 Likes
Astronaut
1005 130 237

Just thought I'd mention this, I was looking at your site on mobile and the table is breaking out of the container for the main content. I would give your <table> tag a class name like

<table class="parts-table">

Then add this underneath the other style's you added, but still in the style tags:

@media screen and (max-width:767px){
.parts-table{
table-layout:fixed;
width:100%;
}
}

That should fix it. I don't know if you know, but you can right click and "inspect" on any website and edit the HTML in there to make visual changes before you try to do it in the code. That way you know it's going to work. There's a little logo in the top right of the inspector that looks like a phone in front of a tablet, if you click that, your website will display in mobile view. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
18 2 11

Hi there!

Karl from Shogun here. I just wanted to pop by and let you know that Shogun Page Builder makes it super easy to add Add to Cart Buttons on any standard page, blog article or product page.

This can be done using the Product Box Element, and then by dragging an Add To Cart Button Element into this Product Box Element. You can find out more information about this at the link below,

https://getshogun.com/help/tutorials/shopify-specific/how-to-display-product-data-on-any-page-using-...

Best part? Shogun offers a 10-day free trial so you can test it before you go ahead and commit to using it. Support is on hand to help out if you have any other questions. :)

0 Likes