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

New Member
11 0 0

Hello,

This may be a basic question, but I'm not developer (at all) so please speak to me like I'm slow. Haha.

On our website, in addition to the main products we sell we also sell repair parts for those products. Each model has its own repair page with a repair guide and list of parts. Rather than forcing the customer to search out each product individually, I'd like to make it so they can click to add whichever repair parts they need to their cart from the repair page.

I liked the idea of using the buy button to do this until I learned the buy button wouldn't share a cart with the regular online store cart, which would be incredibly confusing and problematic.

So is there a way I can just add a bit of code that would make a link to add the product to cart?

0 Likes
Astronaut
765 80 155

Hmm, Im not sure how this page you're talking about populates the "lists of parts", if you had a collection that had the all the parts as products, you would loop through the collection to populate the list, because you'll need some information from the product to push the item to the cart. Here's how a basic setup would work:

{% for product in collections.your-repair-collection.products %}

<div class="product-item" id="{{ product.title|handleize|downcase}}">
{{ product.title }}
</div>

<!-- the data-url is what is important here ------------->

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

That's your html, and then you would use javascript to push the item to the cart with shopify's ajax API. So this would be at the bottom of the page in script tags:

<script>

//--- when you click any of the add to cart buttons run this function --->

$('.your-add-to-cart').on('click', function(){

var product_id;
var product_url = $(this).data('url');

// -- We have the product url now, and declared a variable for the id which we will set later
// -- now we are getting the products JSON object, which we need to push to the cart

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

// -- We assign the product_id variable to the product's variant ID you want to add, [0] is
// -- assuming you don't have any other variants for pricing, it would be the first variant

product_id = product.variants[0].id;

// This is where we send it to the cart

      jQuery.post('/cart/add.js', {
        quantity:1,
        id:product_id
      });
})


})


</script>

And that's just a basic example. I tried to comment it out above to make it easier to understand what's going on. 

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

Thanks for the response Ninthony.

Well, the simple answer for how I'd populate the products is I haven't yet. Essentially all that I have, currently, is that all my repair products exist on Shopify, and then I have pages for each model that currently just show a repair diagram with a list of parts. Currently if the customer wants to buy a part, they'd have to reference the parts list and note all the parts they would need, then search out each product and add to cart from each product's page.

What I envision is to have the repair diagram at the top of the page, below which is a table divided into the columns: part number, item name, price, link to product, button to add to cart. That way, a customer can either visit the part's page for more information, or they can just add it to the cart.

If I could have it so all I have to do is put the part number (SKU) in the one column and could use variables to autofill the other columns, that would be a big plus, but if I have to input everything manually I'm not opposed.

Hopefully what I'm saying makes some sense. As I mentioned, I'm not a developer AT ALL so I'm really just flying by the seat of my pants here.

0 Likes
New Member
11 0 0

I made a sketch of what I would like as an example. Hopefully if I explained it poorly that will demonstrate what I would like.

 

0 Likes
Astronaut
765 80 155

That seems entirely doable, like I said you'd just have to get those repair parts into a collection and loop through them, each iteration of the loop being a row of the table. Do you have a link to your store so I can see how you're repair pages are set up? There's a smart way of how to go about doing it so that it's mostly automated after you make it the first time, but I'm having trouble wrapping my mind around it because I'm not sure how it's set up. You'll probably need to hire a shopify expert, I'm still pretty new but if I can help I will.

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

Hi Ninthony,

The page is https://www.miracowaterers.com/

The top tab that says "Repair Parts" is basically all that's set up right now. Basically to sum up how I organized it, there's 5 models of main product. Each model has "sub-models" distinct from one another. I divided up the repair section by model, so there's 5 sections, plus a catch all for discontinued models, giving us 6 sections. In each section, it lists all the sub-models in each model. On the sub-model page is where there's a repair diagram and list of parts (that currently is just an image, but I would like to be clickable links to the product).

Essentially: Choose your model >> Choose your sub-model >> List of parts

Example: LilSpring >> 2700 >> parts

I added tags to all my repair parts corresponding to which sub-model(s) they are used on, and I'm creating collections for each sub-model. What I'm imagining is on each repair page I would add the repair guide image, and then below that I would have a table set up, ideally with variables where I just tell it to fill based off the corresponding collection. But, if there's a better way you can think of to accomplish the same goal, I'd be open to hearing that as well. Again, I'm NOT an expert, I'm totally winging it here just trying to make the website not suck for customers.

Thanks a ton for your help.

0 Likes
Astronaut
765 80 155

No, that's exactly how I would approach it. So what I would do would be to make a new snippet called "repair-parts.liquid"

Once you have all the parts that you need in the collections they need to be I would do it by making your snippet repair-parts.liquid something like this:

<table>
  <tr>
  <th>Parts</th>
  <th>Item Name</th>
  <th>Price</th>
  <th>Link</th>
  <th>Add to Cart</th>
  </tr>
  {% for product in collection %}
  <tr>
    <td>
      {{ product.title }}
    </td>
    <td>
      {{ product.description }}
    </td>
    <td>
      {{ product.price | money }}
    </td>
    <td>
          <a href="{{ product.url}}">More Info</a>
    </td>
    <td>
          <div class="add-to-cart">Add To Cart</div>
    </td>
  </tr>
  {% endfor %}
</table>

So, that is essentially a template for what all these pages are going to look like, I'm not going to get into Add To Cart functionality or anything, you should just take everything a step at a time. 

Okay, so this snippet is set up for you to inject any collection you want into it. So the way you would do that is on the "page" with your part's list, under the diagram you would include this snippet WITH the collection you want to assign to it. So it would be like this:

MIRAFOUNT 3330 PARTS LIST

<!-- Under here is your diagram image -->

<img src="//cdn.shopify/yada-yada/mirafount3330.jpg">

<!-- Now you include your snippet with your collection -->

{% assign collection = collections.mirafount3330.products %}
{% include 'repair-parts' with collection %}


The keyword here is "collection", I just made it that so it makes sense. But that can be anything you want, you just need to make sure it's the same on your snippet file and where you assign the collection. So I could have said:

{% assign whoopidydoop = collections.mirafount3330.products %}
{% include 'repair-parts' with whoopidydoop %}

As long as in your snippet file when you're referencing the for loop you use the same name:

<table>
  <tr>
  <th>Parts</th>
  <th>Item Name</th>
  <th>Price</th>
  <th>Link</th>
  <th>Add to Cart</th>
  </tr>
  {% for product in whoopidydoop %}
  <tr>
    <td>
      {{ product.title }}
    </td>
    <td>
      {{ product.description }}
    </td>
    <td>
      {{ product.price | money }}
    </td>
    <td>
          <a href="{{ product.url}}">More Info</a>
    </td>
    <td>
          <div class="add-to-cart">Add To Cart</div>
    </td>
  </tr>
  {% endfor %}
</table>

Try getting that set-up and get back to me if you're having any trouble.

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

So I was following along and I think I got everything, except the liquid wasn't working on the repair pages. It would just show up as typed.

But, I came up with an idea.

So I'm making the collections for each sub-model, right? The collection page by default is almost what I'd need, I could just put the diagram in the description which would display at the top and the products in the collection would be below. But, it isn't exactly what I'm looking for because it displays each product in a way that's good for most websites, but what I want is just a simple table with nothing extra.

I looked into it a bit and saw that custom templates can be made so I went ahead and tried it. I made a new template and copy/pasted your table into it (I did modify your table because I actually changed the repair parts on shopify so that their part # precedes the item name like "(123) Product Name" so I made the table just 4 columns). At first, it made a table with just the headers, the products weren't listing. But, with a little Google-fu and some troubleshooting, I got it to work! At least, to work about 90% of the way I guess.

To make it work I'll need to change the links in the model repair pages to the new collections instead of the pages. But that's no problem. I will hold off on doing that until I have all the collections ready to go, and in fact it's kinda nice that I can create all the new collections before I have to start switching it over. That way if it isn't ready right away we don't have it sitting halfway changed.

I changed just one collection to the new template for now, that way I can make sure it'll work before changing them all. You can see it here:

https://www.miracowaterers.com/collections/bigspring-6400-repair-parts

There's just 2 problems left to address that you might be able to help with.

1. The table takes up too much space. I'd prefer it to be tighter vertically, there's currently a lot of space between rows. Any idea how to change that?

2. Make the add to cart a functional button.

Again, I cannot overstate how much I appreciate your help. Getting to where I'm at now without your help would've taken me so much longer, and in all likelihood I would've just given up.

0 Likes
Highlighted
Astronaut
765 80 155

I wasn't thinking about not being able to use liquid in the pages, sorry about that. What you could do is what I suggested before but do it on the "page.liquid" file instead and use if statements to check the page handle. So you could have your diagram on your page, and then under page.content you could say:

{% if page.handle == 'mirafount-3330-parts-list'%}

{% assign collection = collections.mirafount3330.products %}
{% include 'repair-parts' with collection %}

{% elsif page.handle == 'some-other-collection' %}

{% assign collection = collections.some-other-collection.products %}
{% include 'repair-parts' with collection %}

{% endif %}

I think that would work and you could keep doing it as many times as you needed. But if whatever you're doing works for you, then go with that. 

As for your slim down question. In your timber.scss file in your assets folder, Ctrl + F and search for "padding: 15px" and then check to see if there's a th and td somewhere outside of the brackets. It could be wrapped in a table css as well. It might look like this:

table{
  th,td{
  text-align:left;
  padding: 15px;
  border: 1px solid #ececec;
  }
}

change the padding to:

padding: 5px 15px;

the first number is the top and bottom padding, the second number is the left and right padding. Alternatively, you can put this at the top of your page and it should overwrite it:

<style>

th, td{

padding: 5px 15px!important; 

}

</style>

I'll come back to the add to cart functionality. Let me know if you get this fixed.

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

Yes, that worked perfectly to fix the spacing issue. So now all that's left is the add to cart functionality. If that's not doable, what I have now is 1,000 times better than what I had before and what I was going to do, and I think it would be ok. If it can be done, let's do it, if not, oh well.

Also, I kind of like that they are kept on the collections rather than being pages because I need to have the collections either way, and this way I don't have one collection for it and one page for it, it's all contained in one entity. Should I ever need to go in and modify something, it just makes it simpler I think. But thanks for going through the code for pages, I am trying to learn more about this stuff so it's helpful.

0 Likes