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

customize.js

module.exports = `
<item-line>
      <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 }}
                  </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>
`

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

nuxt.config.js

{
  css: ['~/snipcart/customize.css']
}