Ui Customization

customize ui components

Customizing components is easy with snipcart. We let you the possibility to inject a string components templates into @nuxtjs/snipcart.

The only thing you will have to do is to create snipcart/customize.js and/or snipcart/customize.css at your root folder.

Make sure snipcartCustomize is an absolute path. Checkout example for more information.

For now we only accept those two files

It should looks like

module.exports = `
      <li class="bg-red 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 }}

                  <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>

You will be able to use your custom css with the css global configuration.

  css: ['~/snipcart/customize.css']
Edit this page on GitHub Updated at Mon, Oct 18, 2021