Override cart templates

With the most recent version of Snipcart, you can override any templates in the cart, pushing customization even further. You can still override the CSS of course, but we're giving you much more power.

Getting started

When you include Snipcart, you now have to create an element on which the cart will be mounted.

<!-- Snipcart required files -->
<script src="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.js"></script>
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.0.beta.3/default/snipcart.css" />

<!-- Element where you set your API key and insert your custom templates -->
<div id="snipcart" data-api-key="<API_KEY>">
</div>

In this element, you can provide your own templates. Please refer to this part of our documentation to see the list of components that can be overridden. To override a template, insert a node into div#snipcart. The node tag must be the name of the component you want to override.

<div hidden id="snipcart" data-api-key="<API_KEY>">
    <component-to-override>
        <!-- The template must have a single root element -->
        <div class="root">
        </div>
    </component-to-override>
</div>

You must provide a root node to each component you override. For example, this wouldn't be valid:

<div hidden id="snipcart" data-api-key="<API_KEY>">
    <component-to-override>
        <!-- You can't have more than one root element in your template. -->
        <div class="root">
        </div>
        <div class="root">
        </div>
    </component-to-override>
</div>

Sections

We also added some sections that are overridable, this allows you to add any elements in specific sections of the cart without requiring a full override. This can be very useful when you just add to want a custom notice or a custom field that will be supported soon. At the moment, custom fields in the cart won't be persisted, but we'll be working on something very soon, this will be supported in the final v3.0 version for sure.

They key here is the specify which section you want to override beside the component name:

<div hidden id="snipcart" data-api-key="<API_KEY>">
    <!-- Specify the section name with section attribute -->
    <component-to-override section="top">
        <div class="root">
            This will be inserted into the section named `top`.
        </div>
    </component-to-override>
</div>

You can take a look at this part of the documentation to see all overridable sections.

How does it work

Under the hood, we used Vue to build the cart. So Vue directives are supported in your custom templates. Of course, you don't need to learn Vue to write your own templates, but if you do, you might be able to push it a bit further.

We tried to encapsulate all the logic inside micro-components and component wrappers. That way, it is simpler to understand how a template works without having to know Vue. However, we kept some Vue directives like v-if and @click in our templates. We considered trying to encapsulate them into component wrappers, but realized it would create a lot of useless components, so we decided to keep them in templates.

Examples

Here are some examples of what can be done with our customizable templates.

Simplify cart items

Let's say we want to update the template of each item in the cart. We want to remove images, descriptions, etc. and just keep the bare minimum.

<div hidden id="snipcart" data-api-key="<api_key>">
   <item-line>
       <li class="snipcart__item__line snipcart__box">
           <div class="snipcart__item__line__product">
               <div class="snipcart__item__line__header">
                   <h2 class="snipcart__item__line__header__title">
                       {{ item.name }}
                   </h2>

                   <item-quantity class="snipcart__item__line__quantity" v-if="!adding"></item-quantity>
                   <div class="snipcart__item__line__header__actions">
                       <remove-item-action class="snipcart__button--icon">
                           <icon name="trash" class="icon--red"  alt="item.remove_item"></icon>
                       </remove-item-action>
                   </div>
               </div>
           </div>
       </li>
   </item-line>
</div>

Customize address fields

By default, the address fields will show your customers a nice address autocomplete component for a faster checkout experience. You might want something more classic. To do so, you can override the address-fields component like that:

<div hidden id="snipcart" data-api-key="<api_key>">
    <address-fields>
        <fieldset class="snipcart__form__set">
            <div class="snipcart__form__row">
                <div class="snipcart__form__field snipcart__form__cell--large">
                    <snipcart-label for="address1">{{ $localize('address_form.address1') }}</snipcart-label>
                    <snipcart-input name="address1"></snipcart-input>
                    <snipcart-error-message name="address1"></snipcart-error-message>
                </div>
                <div class="snipcart__form__field form__cell--tidy">
                    <snipcart-label for="address2">{{ $localize('address_form.address2') }}</snipcart-label>
                    <snipcart-input name="address2"></snipcart-input>
                    <snipcart-error-message name="address2"></snipcart-error-message>
                </div>
            </div>
            <div class="snipcart__form__field">
                <snipcart-label for="city">{{ $localize('address_form.city') }}</snipcart-label>
                <snipcart-input name="city"></snipcart-input>
                <snipcart-error-message name="city"></snipcart-error-message>
            </div>
            <div class="snipcart__form__field">
                <snipcart-label for="country">{{ $localize('address_form.country') }}</snipcart-label>
                <snipcart-typeahead type="dropdown" name="country" display="name"></snipcart-typeahead>
            </div>
            <div class="snipcart__form__row">
                <div class="snipcart__form__field snipcart__form__cell--large">
                    <snipcart-label for="province">{{ $localize('address_form.province') }}</snipcart-label>
                    <snipcart-typeahead type="dropdown" name="province" display="name"></snipcart-typeahead>
                </div>
                <div class="snipcart__form__field snipcart__form__cell--tidy">
                    <snipcart-label for="postalCode">{{ $localize('address_form.postalCode') }}</snipcart-label>
                    <snipcart-input name="postalCode"></snipcart-input>
                    <snipcart-error-message name="postalCode"></snipcart-error-message>
                </div>
            </div>
        </fieldset>
    </address-fields>
</div>

Conclusion

We suggest you take a look at our component's reference documentation. You'll find the documentation of each overridable template along with its default template.