Default's Theme Components

Here's the documentation of components of the default theme

address-fields

Displays a form to edit an address.

Usage of address-fields

<address-fields name="<string>"> </address-fields>

  • name: string – The name of the address to edit.

Default Template

<div>
    <overridable name="address-fields" section="top"></overridable>

    <fieldset class="snipcart__form__set" v-if="!state.addressNotFound">
        <div class="snipcart__form__row">
            <div class="snipcart__form__field snipcart__form__cell--large">
                <snipcart-address-autocomplete label="address_form.address1" name="billingAddress"></snipcart-address-autocomplete>
            </div>

            <div class="snipcart__form__field snipcart__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">
            <div class="snipcart__form__field__checkbox">
                <snipcart-checkbox name="addressNotFound"></snipcart-checkbox>
                <snipcart-label for="addressNotFound">{{ $localize('address_form.dont_see_address' )}}</snipcart-label>
            </div>
        </div>
    </fieldset>

    <fieldset class="snipcart__form__set" v-else>
        <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>
</div>

billing

Component that gathers billing address and customer information

Usage of billing

<billing> </billing>

    Default Template

    <snipcart-form @submit="save">
        <overridable name="billing">
            <div class="snipcart__box">
                <div class="snipcart__box__header">
                    <div class="snipcart__box__title">
                        <div class="snipcart__box__badge snipcart__box__badge--highlight">1</div>
                        <h2 class="snipcart__subtitle">
                            {{ $localize('billing.title') }}
                        </h2>
                    </div>
                </div>
    
                <overridable name="billing" section="top"></overridable>
                
                <fieldset class="snipcart__form__set">
                    <div class="snipcart__form__field">
                        <snipcart-label for="name">
                            {{ $localize('address_form.name') }}
                        </snipcart-label>
                        
                        <snipcart-input name="name"></snipcart-input>
                        <snipcart-error-message name="name"></snipcart-error-message>
                    </div>
    
                    <div class="snipcart__form__field">
                        <snipcart-label for="email">
                            {{ $localize('address_form.email' )}}
                        </snipcart-label>
    
                        <snipcart-input name="email"></snipcart-input>
                        <snipcart-error-message name="email"></snipcart-error-message>
                    </div>
                </fieldset>
    
                <address-fields></address-fields>
    
                <hr class="form__separator"></hr>
    
                <fieldset class="snipcart__form__set">
                    <div class="snipcart__form__field">
                        <div class="snipcart__form__field__checkbox">
                            <snipcart-checkbox name="useDifferentShippingAddress"></snipcart-checkbox>
    
                            <snipcart-label for="useDifferentShippingAddress" class="snipcart__form__label--checkbox">
                                {{ $localize('billing.use_different_shipping_address') }}
                            </snipcart-label>
                        </div>
                    </div>
                </fieldset>
    
                <overridable name="billing" section="bottom"></overridable>
    
                <div class="snipcart__form__footer">
                    <submit-button type="submit" class="snipcart__cart__button--medium snipcart__cart__button--highlight">
                        {{ $localize('billing.continue_to_shipping') }}
                    </submit-button>
                </div>
            </div>
        </overridable>
    </snipcart-form>

    billing-completed

    Usage of billing-completed

    <billing-completed context="<string>"> </billing-completed>

    • context: string – Context in which this component is rendered

    Default Template

    <transition name="snipcart__transitions__slide--vertical">
        <overridable name="billing-completed" :class="cssClasses">
            <div class="snipcart__box">
                <div class="snipcart__box__header">
                    <div class="snipcart__box__title">
                        <div class="snipcart__box__badge" v-if="checkout"><icon name="checkmark" class="snipcart__icon--large snipcart__icon--blue-dark"></icon></div>
                        <h2 class="snipcart__subtitle">
                            <icon name="user" class="snipcart__icon--left snipcart__icon--blue-dark" v-if="checkout"></icon>
                            {{ $localize('billing.title') }}
                        </h2>
                    </div>
    
                    <a href="#" @click="edit" v-if="checkout" class="snipcart__actions__link">{{ $localize('actions.edit')}}</a>
                </div>
                
                <div class="snipcart__checkout__step__cols">
                    <div class="snipcart__checkout__step__col">
                        <div class="snipcart__checkout__step__icon">
                            <icon name="user" class="snipcart__icon--blue-dark"></icon>
                        </div>
                        <div>
                            <h3 class="snipcart__checkout__step__title">{{ $localize('customer.information') }}</h3>
                            <span>{{ cart.billingAddress.name }}<br />{{ cart.email }}</span>
                        </div>
                    </div>
    
                    <div class="snipcart__checkout__step__col">
                        <div class="snipcart__checkout__step__icon">
                            <icon name="location" class="snipcart__icon--blue-dark"></icon>
                        </div>
                        <div>
                            <h3 class="snipcart__checkout__step__title">{{ $localize('billing.address') }}</h3>
                            <span>{{ cart.billingAddress | address }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </overridable>
    </transition>

    card-icon

    Usage of card-icon

    <card-icon> </card-icon>

      cart

      Usage of cart

      <cart editingCart="<boolean>"> </cart>

      • editingCart: boolean – Indicates if the cart is currently opened as a side-panel over the checkout screen.

      Default Template

      <transition name="snipcart__cart__transition">
          <layout>
              <div class="snipcart__layout__header">
                  <div v-if="editingCart">
                      <overridable name="cart" section="edit-cart-header">
                          <header class="snipcart__cart__edit__header">
                              <h1 class="snipcart__cart__edit__header__title">
                                  {{ $localize('header.title_cart_summary') }}
                              </h1>
      
                              <close-cart-action class="snipcart__actions__link">
                                  {{ $localize('actions.back_to_checkout') }}
                              </close-cart-action>
                          </header>
                      </overridable>
                  </div>
                  <overridable name="cart" section="header" v-else>
                      <cart-header title="header.title_cart_summary"></cart-header>
                  </overridable>
              </div>
              <loading-screen message="cart.loading" class="snipcart__layout__content" :class="layoutContentCssClasses">
                  <overridable name="cart" v-if="hasItems">
                      <section class="snipcart__cart__content">
                          <item-list item-template="item-line" class="snipcart__items__list"></item-list>
      
                          <div class="snipcart__cart__footer">
                              <div class="snipcart__cart__footer__col cart__footer__discount-box snipcart__cart__actions">
                                  <discount-box></discount-box>
                              </div>
      
                              <div class="snipcart__cart__footer__col">
                                  <div class="snipcart__cart__fee__container">
                                      <cart-summary-fees class="snipcart__cart__totals">{{ $localize('cart.shipping_taxes_calculated_at_checkout')}}</cart-summary-fees>
                                  </div>
      
                                  <footer class="snipcart__cart__actions" v-if="editingCart">
                                      <close-cart-action class="snipcart__cart__button snipcart__cart__button--secondary">
                                          <span class="snipcart__cart__button__grid">
                                              <span class="snipcart__cart__button__content--left">
                                                  <icon name="back-arrow"></icon>
                                              </span>
                                              <span class="snipcart__cart__button__content">
                                                  {{ $localize('actions.back_to_checkout') }}
                                              </span>
                                          </span>
                                      </close-cart-action>
                                  </footer>
      
                                  <footer class="snipcart__cart__actions" v-if="!editingCart">
                                      <cart-button 
                                          class="snipcart__cart__button--large snipcart__cart__button--highlight"
                                          icon-right="continue-arrow"
                                          @click="checkout">
                                          {{ $localize('actions.checkout') }}
                                      </cart-button>
                                  </footer>
                                  
                                  <footer class="snipcart__cart__payment__methods" v-if="!editingCart">
                                      <h3 class="snipcart__cart__payment__methods__title">
                                          <icon name="lock"></icon>
                                          {{ $localize('cart.secured_by') }}
                                      </h3>
      
                                      <payment-methods class="snipcart__cart__payment__methods__list"></payment-methods>
                                  </footer>
                              </div>
                          </div>
                      </section>
                  </overridable>
                  <empty-cart v-else></empty-cart>
              </loading-screen>
          </layout>
      </transition>

      cart-button

      Component that renders a button

      Usage of cart-button

      <cart-button type="<string>" icon="<string>" iconRight="<string>" disabled="<boolean>" loading="<boolean>" loadingMessage="<string>"> </cart-button>

      • type: string – Button type

      • icon: string – Icon to show on the left-side of the button

      • iconRight: string – Icon to show on the right-side of the button

      • disabled: boolean – Indicates if the button is disabled or not.

      • loading: boolean – Indicates if the button is in loading state.

      • loadingMessage: string – The message to display when the button is in loading state.

      cart-header

      Component that shows the number of items in the cart and a way to close the cart.

      Usage of cart-header

      <cart-header title="<string>"> </cart-header>

      Default Template

      <header class="snipcart__modal__header" v-if="!loading">
          <close-cart-action class="snipcart__modal__close">
              <icon class="snipcart__modal__close__icon snipcart__icon--blue-dark" name="back-arrow" />
              <span class="snipcart__modal__close__title">
                  {{ $localize('actions.continue_shopping') }}
              </span>
          </close-cart-action>
      
          <h1 class="snipcart__modal__header__title" v-if="title">
              {{ $localize(title) }}
          </h1>
      
          <div class="snipcart__modal__header__count">
              <icon name="cart" class="snipcart__cart__icon snipcart__icon--blue-dark" />
              {{ itemsCount }}
          </div>
      </header>
      <header class="snipcart__modal__header" v-else>
          <close-cart-action class="snipcart__modal__close">
              <icon class="snipcart__modal__close__icon snipcart__icon--blue-dark" name="back-arrow" />
              <span class="snipcart__modal__close__title">
                  {{ $localize('actions.continue_shopping') }}
              </span>
          </close-cart-action>
      </header>

      cart-summary

      Usage of cart-summary

      <cart-summary> </cart-summary>

        Default Template

        <div @click="summaryClicked">
            <transition name="snipcart__cart__summary__small__transition">
                <overridable name="cart-summary">
                    <div class="snipcart__cart__summary">
                        <section class="snipcart__cart__summary__content snipcart__box snipcart__box--no-margin">
                            <div class="snipcart__cart__summary__actions snipcart__box__header">
                                <h2 class="snipcart__subtitle">
                                    {{ $localize('cart.summary') }}
                                </h2>
        
                                <edit-cart-action class="snipcart__actions__link">{{ $localize('actions.edit') }}</edit-cart-action>
                            </div>
        
                            <overridable name="cart-summary" section="items">
                                <cart-summary-items-list class="snipcart__cart__summary__items"></cart-summary-items-list>
                            </overridable>
        
                            <hr class="snipcart__form__separator snipcart__cart__summary__separator" />
        
                            <loading-overlay>
                                <div class="snipcart__cart__summary__totals">
                                    <cart-summary-fees></cart-summary-fees>
                                </div>
                            </loading-overlay>
                        </section>
        
                        <footer class="snipcart__cart__summary__footer">
                            <h3 class="snipcart__cart__summary__footer__title">
                                <icon name="lock"></icon>
                                {{ $localize('cart.secured_by') }}
                            </h3>
        
                            <payment-methods />
                        </footer>
                    </div>
                </overridable>
            </transition>
        
            <transition name="snipcart__cart__summary__overlay__transition">
                <div class="snipcart__cart__summary__overlay" v-if="editing" @click="closeCart"></div>
            </transition>
        
            <cart :editingCart="true" class="snipcart__cart__summary__edit" v-if="editing" @close="cartClosed" />
        </div>

        cart-summary-expanded-item

        Usage of cart-summary-expanded-item

        <cart-summary-expanded-item item="<CartItem>"> </cart-summary-expanded-item>

        cart-summary-fees

        Components that shows the cart fees such as taxes, shipping, grand total, etc.

        Usage of cart-summary-fees

        <cart-summary-fees> </cart-summary-fees>

          Default Template

          <div class="snipcart__cart__summary__fees">
              <div class="snipcart__cart__summary__fees__notice" v-if="!hasShippingAddress">
                  <slot>
                      {{ $localize('checkout.shipping_taxes_calculated_when_address_provided') }}
                  </slot>
              </div>
          
              <div class="snipcart__cart__summary__lines">
                  <div class="snipcart__cart__summary__lines__item" v-if="discountsTotal">
                      <span class="snipcart__cart__summary__lines__title">{{ $localize('cart_summary.discount') }}</span>
                      <span class="snipcart__cart__summary__lines__amount">{{ discountsTotal | money(cart.currency) }}</span>
                  </div>
          
                  <div class="snipcart__cart__summary__lines__item" v-if="subtotal">
                      <span class="snipcart__cart__summary__lines__title">{{ $localize('cart_summary.subtotal') }}</span>
                      <span class="snipcart__cart__summary__lines__amount">{{ subtotal | money(cart.currency) }}</span>
                  </div>
          
                  <div class="snipcart__cart__summary__lines__item" v-if="shipping.cost != null">
                      <span class="snipcart__cart__summary__lines__title">{{ $localize('cart_summary.shipping') }}</span>
                      <span class="snipcart__cart__summary__lines__amount">{{ shipping.cost | money(cart.currency) }}</span>
                  </div>
          
                  <div class="snipcart__cart__summary__lines__item" v-for="tax in taxes" :key="tax.name">
                      <span class="snipcart__cart__summary__lines__title"> {{ tax.name }}</span>
                      <span class="snipcart__cart__summary__lines__amount">{{ tax.amount | money(cart.currency) }}</span>
                  </div>
          
                  <div class="snipcart__cart__summary__lines__item">
                      <span class="snipcart__cart__summary__lines__title snipcart__cart__summary__lines__title--highlight">{{ $localize('cart_summary.total')}}</span>
                      <span class="snipcart__cart__summary__lines__amount snipcart__cart__summary__lines__amount--highlight">{{ total| money(cart.currency) }}</span>
                  </div>
              </div>
          </div>

          cart-summary-item

          Component that renders an item from `CartSummaryItemsList` component.

          Usage of cart-summary-item

          <cart-summary-item item="<CartItem>"> </cart-summary-item>

          • item: CartItem – The item associated to the component instance.

          Default Template

          <slot v-bind="item">
              <li class="snipcart__cart__summary__item">
                  <span class="snipcart__cart__summary__item__name">
                      {{ item.name }}
                  </span>
          
                  <span class="snipcart__cart__summary__item__quantity">
                      {{ $localize('cart_summary.quantity') }}{{ item.quantity }}
                  </span>
          
                  <span class="snipcart__cart__summary__item__price">
                      {{ item.price | money(currency) }}
                  </span>
              </li>
          </slot>

          cart-summary-items-list

          This component renders the list of items in the cart for the summary visible during checkout process.

          Usage of cart-summary-items-list

          <cart-summary-items-list tag="<string>" itemTemplate="<string>"> </cart-summary-items-list>

          • tag: string – Sets the root element tag.

          • itemTemplate: string – Sets the template to use for each item in the cart.

          checkout

          Usage of checkout

          <checkout> </checkout>

            Default Template

            <with-cart @ready="cartReady">
                <layout class="snipcart__layout--large snipcart__cart__checkout__container">
                    <overridable name="checkout" section="header" :class="layoutHeaderCssClasses">
                        <div class="snipcart__layout__header">
                            <header class="snipcart__modal__header snipcart__modal__header--fixed snipcart__checkout__header">
                                <close-cart-action class="snipcart__modal__close">
                                    <icon name="back-arrow" class="snipcart__modal__close__icon snipcart__icon--blue-dark" alt="actions.close_cart" />
                                    <span class="snipcart__modal__close__title">
                                        {{ $localize('actions.continue_shopping') }}
                                    </span>
                                </close-cart-action>
            
                                <media name="mobile, tablet" class="snipcart__modal__header__summary">
                                    <div class="snipcart__modal__header__summary__title" @click.prevent="showSummary">
                                        <icon name="cart" class="snipcart__icon--blue-dark"></icon>
                                        <span>
                                            {{ total | money(cart.currency) }}
                                        </span>
                                        <icon :name="summaryIcon" class="snipcart__icon--blue-dark snipcart__icon--medium"></icon>
                                    </div>
            
                                    <cart-summary  class="snipcart__cart__summary__small" v-if="summaryVisible" @close="closeSummary">
                                    </cart-summary>
                                </media>
                            </header>
                        </div>
                    </overridable>
                    <overridable name="checkout" :class="layoutCssClasses">
                        <div class="snipcart__layout__content">
                            <loading-screen message="cart.loading" class="snipcart__checkout__content">
                                <div class="snipcart__layout__cols">
                                    <div class="snipcart__layout__col snipcart__layout__col--large">
                                        <checkout-step name="billing" title="billing.title" number="1" />
                                        <checkout-step name="shipping" title="shipping.title" number="2" />
                                        <checkout-step name="payment" title="payment.title" number="3" />
                                    </div>
            
                                    <media name="large" class="snipcart__layout__col">
                                        <cart-summary />
                                    </media>
                                </div>
                            </loading-screen>
                        </div>
                    </overridable>
                </layout>
            </with-cart>

            checkout-step

            Usage of checkout-step

            <checkout-step number="<string>" name="<string>" title="<string>"> </checkout-step>

            close-cart-action

            Will close the cart when clicked

            Usage of close-cart-action

            <close-cart-action tag="<string>"> </close-cart-action>

            • tag: string – Allow to use a custom tag for this action

            decrement-quantity-action

            Usage of decrement-quantity-action

            <decrement-quantity-action tag="<string>"> </decrement-quantity-action>

            • tag: string – Allow to use a custom tag for this action

            disabled-checkout-step

            Usage of disabled-checkout-step

            <disabled-checkout-step> </disabled-checkout-step>

              discount-box

              Usage of discount-box

              <discount-box> </discount-box>

                edit-cart-action

                Component that renders a link to edit the cart during checkout process.

                Usage of edit-cart-action

                <edit-cart-action> </edit-cart-action>

                  edit-shipping-address-button

                  Usage of edit-shipping-address-button

                  <edit-shipping-address-button> </edit-shipping-address-button>

                    empty-cart

                    Component used when cart is visible without items in it.

                    Usage of empty-cart

                    <empty-cart> </empty-cart>

                      Default Template

                      <section class="snipcart__cart__content snipcart__cart__content__empty">
                          <div class="snipcart__cart__content__empty__title">
                              {{ $localize('cart.empty') }}
                          </div>
                      
                          <div class="snipcart__cart__content__empty__actions">
                              <close-cart-action class="snipcart__cart__button snipcart__cart__button--secondary">
                                  <span class="snipcart__cart__button__grid">
                                      <span class="snipcart__cart__button__content--left">
                                          <icon name="back-arrow"></icon>
                                      </span>
                                      <span class="snipcart__cart__button__content">
                                          {{ $localize('actions.back_to_store') }}
                                      </span>
                                  </span>
                              </close-cart-action>
                          </div>
                      </section>

                      icon

                      Display one of the built-in icons

                      Usage of icon

                      <icon name="<string>" custom="<boolean>" width="<number>" height="<number>" alt="<string>"> </icon>

                      • name: string – Name of the icon to show

                        Can be one of: back-arrow, box, card, cart, checkmark, chevron-down, chevron-up, continue-arrow, green-check, location, lock, mastercard, minus, paypal, pin, plus, trash, user, visa, spinner, spinner-white, card-alipay, card-amex, card-default, card-diners, card-discover, card-elo, card-hipercard, card-jcb, card-maestro, card-mastercard, card-paypal, card-unionpay, card-verve, card-visa, back-arrow, box, card, cart, checkmark, chevron-down, chevron-up, continue-arrow, green-check, location, lock, mastercard, minus, paypal, pin, plus, trash, user, visa, spinner, spinner-white, card-alipay, card-amex, card-default, card-diners, card-discover, card-elo, card-hipercard, card-jcb, card-maestro, card-mastercard, card-paypal, card-unionpay, card-verve or card-visa

                      • custom: boolean

                      • width: number – Width of the icon in number of pixels

                      • height: number – Height of the icon in number of pixels

                      • alt: string – Alt text to use for accessibility

                      increment-quantity-action

                      Usage of increment-quantity-action

                      <increment-quantity-action tag="<string>"> </increment-quantity-action>

                      • tag: string – Allow to use a custom tag for this action

                      item-custom-fields

                      Usage of item-custom-fields

                      <item-custom-fields> </item-custom-fields>

                        item-description

                        Usage of item-description

                        <item-description> </item-description>

                          item-image

                          Usage of item-image

                          <item-image alt="<string>"> </item-image>

                          item-line

                          Component that shows the details of an item in the cart. Child of `item-list`.

                          Usage of item-line

                          <item-line tag="<string>" item="<CartItem>"> </item-line>

                          Default Template

                          <li class="snipcart__item__line snipcart__box">
                              <figure class="snipcart__item__line__media" v-if="showLargeImage">
                                  <item-image class="snipcart__item__line__image"></item-image>
                              </figure>
                              <div class="snipcart__item__line__product">
                                  <div class="snipcart__item__line__header">
                                      <figure class="snipcart__item__line__media snipcart__item__line__media--small" v-if="showSmallImage">
                                          <item-image class="snipcart__item__line__image"></item-image>
                                      </figure>
                          
                                      <h2 class="snipcart__item__line__header__title">
                                          {{ item.name }}
                                      </h2>
                                      
                                      <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 class="snipcart__item__line__content">
                                      <div class="snipcart__item__line__body">
                                          <div class="snipcart__item__line__info">
                                              <item-description></item-description>
                                          </div>
                                          <div class="snipcart__item__line__variants">
                                              <item-custom-fields v-if="!adding"></item-custom-fields>
                                              <item-quantity class="snipcart__item__line__quantity" v-if="!adding"></item-quantity>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>

                          item-list

                          Component that shows the cart items list.

                          Usage of item-list

                          <item-list tag="<string>" itemTemplate="<string>"> </item-list>

                          • tag: string – Set the root element tag, default

                          • itemTemplate: string – Template used to render each item line.

                          item-quantity

                          Usage of item-quantity

                          <item-quantity> </item-quantity>

                            layout

                            Usage of layout

                            <layout headerTitle="<string>" contentCssClass="<any>" headerCssClass="<any>"> </layout>

                            • headerTitle: string

                            • contentCssClass: any

                            • headerCssClass: any

                            loading-overlay

                            An overlay to show on top of content that is being loaded / updated.

                            Usage of loading-overlay

                            <loading-overlay icon="<string>" message="<string>"> </loading-overlay>

                            • icon: string – The loading icon

                            • message: string – Loading message

                            loading-screen

                            Component that renders a loading screen while an async operation is in progress.

                            Usage of loading-screen

                            <loading-screen message="<string>" tag="<string>"> </loading-screen>

                            • message: string – The loading message

                            • tag: string – Sets the root element tag.

                            Default Template

                            <component :is="tag">
                                <slot v-if="!loading"></slot>
                                <overridable name="loading-screen" v-else>
                                    <div class="snipcart__loading__screen">
                                        <div class="snipcart__loading__screen__content">
                                            <icon name="spinner" class="snipcart__loading__screen__icon"></icon>
                                            <span class="snipcart__loading__screen__content__message">
                                                {{ localizedLoadingMessage }}
                                            </span>
                                        </div>
                                    </div>
                                </overridable>
                            </component>

                            media

                            Component that can conditionnalty show content depending on the viewport.

                            Usage of media

                            <media name="<string>" tag="<string>"> </media>

                            • name: string – The name of the media query

                            • tag: string – Sets the root element tag.

                            payment

                            Usage of payment

                            <payment> </payment>

                              payment-card-form

                              Component that renders a credit card form.

                              Usage of payment-card-form

                              <payment-card-form> </payment-card-form>

                                payment-completed

                                Component that renders when the payment is completed.

                                Usage of payment-completed

                                <payment-completed> </payment-completed>

                                  payment-methods

                                  Component that shows the list of accepted payment methods. You must override this component if you want to change this list.

                                  Usage of payment-methods

                                  <payment-methods> </payment-methods>

                                    Default Template

                                    <ul class="snipcart__payment__methods">
                                        <li class="snipcart__payment__methods__item">
                                            <icon name="visa" alt="Visa" class="snipcart__icon--brand"></icon>
                                        </li>
                                        <li class="snipcart__payment__methods__item">
                                            <icon name="mastercard" alt="Mastercard" class="snipcart__icon--brand"></icon>
                                        </li>
                                    </ul>

                                    remove-item-action

                                    Usage of remove-item-action

                                    <remove-item-action tag="<string>"> </remove-item-action>

                                    • tag: string – Allow to use a custom tag for this action

                                    shipping

                                    Component that renders the shipping box, it shows the shipping address form or shipping method picker depending on its state.

                                    Usage of shipping

                                    <shipping> </shipping>

                                      shipping-address

                                      Component that allows a customer to change / define its shipping address.

                                      Usage of shipping-address

                                      <shipping-address> </shipping-address>

                                        Default Template

                                        <snipcart-form @submit="save">
                                            <overridable name="shipping-address">
                                                <div class="snipcart__box">
                                                    <div class="snipcart__box__header">
                                                        <div class="snipcart__box__title">
                                                            <div class="snipcart__box__badge snipcart__box__badge--highlight">2</div>
                                                            <h2 class="snipcart__subtitle">{{ $localize("shipping.title") }}</h2>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="snipcart__shipping__address--readonly">
                                                        <div class="snipcart__shipping__address__header--readonly">
                                                            <h3 class="snipcart__title--small">{{ $localize("shipping.shipping_to") }}</h3>
                                                        </div>
                                                    </div>
                                                    
                                                    <address-fields name="shippingAddress"></address-fields>
                                                        
                                                    <div class="snipcart__form__footer">
                                                        <submit-button :loading="state.saving" class="snipcart__cart__button--medium snipcart__cart__button--highlight">
                                                            {{ $localize('actions.use_this_address') }}
                                                        </submit-button>
                                                    </div>
                                                </div>
                                            </overridable>
                                        </snipcart-form>

                                        shipping-completed

                                        Usage of shipping-completed

                                        <shipping-completed context="<string>"> </shipping-completed>

                                        • context: string – Context in which this component is rendered

                                        Default Template

                                        <div class="snipcart__box">
                                            <div class="snipcart__box__header">
                                                <div class="snipcart__box__title">
                                                    <div class="snipcart__box__badge" v-if="checkout"><icon name="checkmark" class="snipcart__icon--large snipcart__icon--blue-dark" /></div>
                                                    <h2 class="snipcart__subtitle">
                                                        <icon name="box" class="snipcart__icon--left snipcart__icon--blue-dark" v-if="!checkout"></icon>
                                                        {{ $localize('shipping.title') }}
                                                    </h2>
                                                </div>
                                                <a href="#" @click.prevent="edit" class="snipcart__actions__link" v-if="checkout">Edit</a>
                                            </div>
                                            
                                            <div class="snipcart__checkout__step__cols">
                                                <div class="snipcart__checkout__step__col">
                                                    <div class="snipcart__checkout__step__icon">
                                                        <icon name="location" class="snipcart__icon--blue-dark" />
                                                    </div>
                                                    <div class="snipcart__address__display">
                                                        <h3 class="snipcart__checkout__step__title">{{ $localize('shipping.address') }}</h3>
                                                        <span>{{ cart.shippingAddress | address }}</span>
                                                    </div>
                                                </div>
                                        
                                                <div class="snipcart__checkout__step__col">
                                                    <div class="snipcart__checkout__step__icon">
                                                        <icon name="box" class="snipcart__icon--blue-dark"></icon>
                                                    </div>
                                                    <div>
                                                        <h3 class="snipcart__checkout__step__title">{{ $localize('shipping.method') }}</h3>
                                                        <span>{{ shippingDetails.method }}</span>
                                                    </div>                
                                                </div>
                                            </div>
                                        </div>

                                        shipping-method

                                        This component renders the shipping method picker.

                                        Usage of shipping-method

                                        <shipping-method> </shipping-method>

                                          Default Template

                                          <snipcart-form @submit="save">
                                              <overridable name="shipping-method">
                                                  <div class="snipcart__box">
                                                      <div class="snipcart__box__header">
                                                          <div class="snipcart__box__title">
                                                              <div class="snipcart__box__badge snipcart__box__badge--highlight">2</div>
                                                              <h2 class="snipcart__subtitle">{{ $localize("shipping.title") }}</h2>
                                                          </div>
                                                      </div>
                                                      
                                                      <div class="snipcart__shipping__address--readonly">
                                                          <div class="snipcart__shipping__address__header--readonly">
                                                              <h3 class="snipcart__title--small">{{ $localize("shipping.shipping_to") }}</h3>
                                                              <edit-shipping-address-button class="snipcart__actions__link">
                                                                  {{ $localize("actions.edit") }}
                                                              </edit-shipping-address-button>
                                                          </div>
                                          
                                                          <div class="snipcart__shipping__address__content--readonly">
                                                              <strong class="snipcart__notice--with-icon"><icon name="location"></icon>{{ formatAddress(shippingAddress) }}</strong>
                                                          </div>
                                                      </div>
                                                      
                                                      <shipping-rates-list class="snipcart__shipping__rates" item-template="shipping-rates-list-item"></shipping-rates-list>
                                          
                                                      <div class="snipcart__form__footer">
                                                          <submit-button class="snipcart__cart__button--medium snipcart__cart__button--highlight">
                                                              {{ $localize("payment.continue_to_payment") }}
                                                          </submit-button>
                                                      </div>
                                                  </div>
                                              </overridable>
                                          </snipcart-form>

                                          shipping-rates-list

                                          Component that renders the list of available shipping methods.

                                          Usage of shipping-rates-list

                                          <shipping-rates-list tag="<string>" itemTemplate="<string>"> </shipping-rates-list>

                                          • tag: string – Sets the root element tag, default is `ul`.

                                          • itemTemplate: string – The item template to use, default is `shipping-rates-list-item`.

                                          shipping-rates-list-item

                                          Usage of shipping-rates-list-item

                                          <shipping-rates-list-item rate="<ShippingRate>"> </shipping-rates-list-item>

                                          • rate: ShippingRate – The shipping rate associated to the component instance.

                                          Default Template

                                          <li class="snipcart__shipping__rates__item">
                                              <span>
                                                  <snipcart-radio name="selectedRate" class="snipcart__shipping__rates__item__label--highlight">
                                                      {{ rate.description }}
                                                  </snipcart-radio>
                                              </span>
                                              <span></span>
                                              <span class="snipcart__shipping__rates__item--right snipcart__shipping__rates__item__price">
                                                  {{ rate.cost | money(currency) }}
                                              </span>
                                          </li>

                                          snipcart-address-autocomplete

                                          Dropdown with autocomplete for addresses.

                                          Usage of snipcart-address-autocomplete

                                          <snipcart-address-autocomplete name="<string>" label="<string>" name="<string>" type="<string>"> </snipcart-address-autocomplete>

                                          • name: string – Component name

                                          • label: string – Component label

                                          • name: string – Form element name.

                                          • type: string – Form element type

                                          snipcart-checkbox

                                          Checkbox form element.

                                          Usage of snipcart-checkbox

                                          <snipcart-checkbox name="<string>" type="<string>"> </snipcart-checkbox>

                                          • name: string – Form element name.

                                          • type: string – Form element type

                                          snipcart-error-message

                                          Displays the error message associated with the form field.

                                          Usage of snipcart-error-message

                                          <snipcart-error-message name="<string>" type="<string>"> </snipcart-error-message>

                                          • name: string – Form element name.

                                          • type: string – Form element type

                                          Default Template

                                          <div class="snipcart__field__error">
                                              {{ error }}
                                          </div>

                                          snipcart-form

                                          Displays a form.

                                          Usage of snipcart-form

                                          <snipcart-form> </snipcart-form>

                                            snipcart-input

                                            Standard input (textbox) form element.

                                            Usage of snipcart-input

                                            <snipcart-input text="<string>" placeholder="<string>" name="<string>" type="<string>"> </snipcart-input>

                                            • text: string – The initial value of the input.

                                            • placeholder: string – The placeholder of the input.

                                            • name: string – Form element name.

                                            • type: string – Form element type

                                            snipcart-label

                                            Label for a form field.

                                            Usage of snipcart-label

                                            <snipcart-label for="<string>"> </snipcart-label>

                                            • for: string – The form field this label is linked to.

                                            snipcart-radio

                                            Radio button form element.

                                            Usage of snipcart-radio

                                            <snipcart-radio name="<string>" type="<string>"> </snipcart-radio>

                                            • name: string – Form element name.

                                            • type: string – Form element type

                                            snipcart-typeahead

                                            Typeahead (autocomplete) form element.

                                            Usage of snipcart-typeahead

                                            <snipcart-typeahead loading="<boolean>" label="<string>" results="<TypeaheadValue>" type="<string>" initialValue="<string>" showResults="<boolean>" reverse="<boolean>" display="<string>" icon="<string>" name="<string>" type="<string>"> </snipcart-typeahead>

                                            • loading: boolean – Indicates if the component is performing an async operation and is loading.

                                            • label: string – Label of the form field.

                                            • results: TypeaheadValue – List of results to show in the dropdown options.

                                            • type: string – Type of the form element.

                                            • initialValue: string – The initial value of the form element.

                                            • showResults: boolean

                                            • reverse: boolean

                                            • display: string

                                            • icon: string

                                            • name: string – Form element name.

                                            • type: string – Form element type

                                            submit-button

                                            Component that renders a submit button that can be used in the cart / checkout templates.

                                            Usage of submit-button

                                            <submit-button type="<string>" icon="<string>" iconRight="<string>" disabled="<boolean>" loading="<boolean>" loadingMessage="<string>"> </submit-button>

                                            • type: string – Button type

                                            • icon: string – Icon to show on the left-side of the button

                                            • iconRight: string – Icon to show on the right-side of the button

                                            • disabled: boolean – Indicates if the button is disabled or not.

                                            • loading: boolean – Indicates if the button is in loading state.

                                            • loadingMessage: string – The message to display when the button is in loading state.

                                            textbox

                                            Usage of textbox

                                            <textbox value="<string>" id="<string>" icon="<string>" inputCssClasses="<any>"> </textbox>