4 Common Configurations to Customize
Snipcart's Checkout Experience

Well, another year is coming to an end. Nostalgic, we took some time to look back on the impressive amount of support efforts we deployed as our user base grew significantly. We quickly realized there were common, repetitive patterns throughout all those support tickets and emails. So for this post, we decided to bundle up four of the most frequently asked technical questions regarding Snipcart. I believe this can hold significant value for you, our new, actual or future users. In short, those four tips will allow you to customize your cart's behavior, strengthen your website-cart integration, and set up an e-commerce buying process that suits your specific needs as an online merchant.

EDIT: Since we first published this post, we released native inventory management in the dashboard. You might want to check it out! ;)

Here are the four most popular use-cases our users have asked help with this year:

1. Updating custom field value with JavaScript

More often than not, merchants using Snipcart need to sell products that come in different sizes, colors, or that simply offer a certain level of customization pre-checkout. If you need to let customers choose product options before adding them to their cart, know that it can be effectively handled with Snipcart using our custom fields and JavaScript. Let's see how we could go about it.

First of all, let's add a Snipcart button:

<button class="snipcart-add-item" id="my-button"
 data-item-id="1"
 data-item-url="/"
 data-item-name="Item"
 data-item-price="20.00"
 data-item-custom1-name="Text"
 data-item-custom2-name="Size"
 data-item-custom2-options="Small|Medium|Large">
   Buy now
</button>

This button simply triggers Snipcart's shopping cart. What we need to do next is to add a textbox that will update the Text custom field when the user changes it.

<input type="text" id="my-text" />

The first step will be to bind to the change event of the textbox to update the button with JavaScript. Please note that, since jQuery is required by Snipcart, we will use it in all the demos involving JavaScript for this post.

$('#my-text').change(function() {
    $('#my-button').data('item-custom1-value', $(this).val());
});

It is very important to use the data method like I did above. The data object is a bit weird in jQuery; if you were to update it using the attr method, for instance, it wouldn't work.

Now let's add a select dropdown in the page. Choosing an option from it will update the selected value of Snipcart's custom field.

<select id="my-size">
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
</select>

We will then use a few lines of JavaScript to update the field, like we did for the first text custom field:

$('#my-size').change(function() {
    $('#my-button').data('item-custom2-value', $(this).val());
});

This is basically the same thing as the first example. We could do something more generic and elegant, but for demo purposes, I like to keep it simple. :)

If you have multiple Snipcart buttons on the same page, you will need to make sure that changing custom field values like we did in this article will not affect every button. This is why I used id and not a more generic selector like $('.snipcart-add-item') in the demo.

2. Specify item quantity on-page, before cart checkout

Another use case we've been asked a lot to cover over the last couple of months is to select the quantity before adding the item to the cart.

It's already documented, but there's still the data-item-quantity attribute that can be useful for really simple scenarios. You can use it directly when defining a Snipcart button:

<button class="snipcart-add-item" id="my-button"
 data-item-id="1"
 data-item-url="/"
 data-item-name="Item"
 data-item-price="20.00"
 data-item-quantity="10">
   Buy now
</button>

The HTML definitions above will add the item as usual, but its quantity will be 10 by default. Now let's add a textbox that will be used to enter the quantity we want to add to the cart.

<input type="number" id="my-quantity" />

Using the same technique we did before, we'll update the data attribute when the input's value is changed.

$('#my-quantity').change(function() {
    $('#my-button').data('item-quantity', $(this).val());
});

Simple enough, right?

3. Show a continue shopping button

Another frequently asked question: How can I add a Continue shopping button to my cart? It's documented as well, but we thought it was worth another blog reminder. We have some configuration available via our JavaScript API that can help with this trick.

Note that the code below needs to be added after the snipcart.js file has been included on your website.

Snipcart.execute('config', 'show_continue_shopping', true);

This quick line should get you a Continue shopping button in the first step of the cart, allowing your customers to easily return to your store and add more products to their cart!

4. Using multiple buy buttons for product variants

Simple example: let's say you are selling t-shirts. So you have green t-shirts and red t-shirts. You could use our custom fields to easily update the color from the cart, but the problem is that each t-shirt color has its own SKU (or data-item-id in Snipcart's language).

We might add this feature in the future like we did for the altering of price with custom fields, but it's not done yet. And you may need it right away, like a few of our actual merchants. So let's see how we can handle this scenario.

The trick here will be to have multiple Snipcart buttons, but to hide / show them depending on a selection that will take place directly on your website.

First of all, let's define the two products:

<button class="snipcart-add-item"
 data-item-id="TSHIRT_RED"
 data-item-url="/"
 data-item-name="Red T-shirt"
 data-item-price="20.00">
   Buy now
</button>

<button class="snipcart-add-item" style="display: none"
 data-item-id="TSHIRT_GREEN"
 data-item-url="/"
 data-item-name="Green T-shirt"
 data-item-price="20.00">
   Buy now
</button>

Yes, I used inline styles (I hope you'll forgive me). What happened here is this: I defined two products, the Red T-shirt and the Green T-shirt. The last one is hidden by default, so a customer on your site would just be able to purchase the Red one.

Now we need to allow the end customer to choose his t-shirt color. To do so, we'll just add a simple select element. To make it easy to select the correct element afterward, each of the options value will be the unique ID of the products.

<select id="select-color">
    <option value="TSHIRT_RED">Red</option>
    <option value="TSHIRT_GREEN">Green</option>
</select>

We need to bind to the change event of this dropdown and hide / show the correct Snipcart buttons.

$('#select-color').change(function() {
    var s = $('.snipcart-add-item[data-item-id="' + $(this).val() + '"]');
});

The s variable will be the selected Snipcart button. Just to make it clear: when selecting an option from the dropdown, we find the correct button. If Green were selected, for instance, the selector would be:

.snipcart-add-item[data-item-id="TSHIRT_GREEN"]

Our last step will be to hide and show the buttons.

$('#select-color').change(function() {
    // Hide all the buttons by default
    $('.snipcart-add-item').hide();
    
    // Show the selected button
    var s = $('.snipcart-add-item[data-item-id="' + $(this).val() + '"]');
    s.show();
});

I think this little trick can be very useful, especially when your product variants are not only impacting the price, but also the weight, the SKU, and other attributes that can't be changed with custom fields at the moment.

Conclusion

We hope these four little configurations will help you make the most out of Snipcart for your e-commerce projects. We'll include this post in our Guides & Tutorials documentation section, which we invite you to check out should you need help or inspiration. As always, we're all ears if you have any feedback or features suggestions for the upcoming year: just add your thoughts to our public UserVoice forum, or shoot us an email at geeks@snipcart.com.

If you need help with any of these configurations (or anything else, really), know that you can reach us at any time via our support platform and email.


Is there something in particular you'd like us to discuss on the blog? If so, go ahead and hit the comments. And if you think the post could be helpful or inspiring to other users, please, take a second to share it on Twitter.

Suggested posts: