Snippets

App Snippets are HTML template files used to extend Storefront Themes.

Snippets follow the same syntax and features of theme templates which bring a full suite of tools and context available to app developers to leverage when adding custom features to a storefront.

To see a full example of the features available with App Snippets, Assets, and Settings, take a look at the Google Tag Manager app on Github. View Google Tag Manager App on Github

Locations

Theme's on the Next Commerce platform support app_hooks which are locations within storefront themes your app can target to include your snippets without needing the customize the theme itself.

To upload your snippets and manifest.json, install App Kit to zip your snippet files and push them to Next Commerce.

App Hook Location	Description
`global_header`	Used for adding javascript and styles globally to the header of a theme. Should be loaded globally in the header, most likely in `layout/base.html`.
`global_footer`	Used for adding javascript globally to the footer of a theme. Should be loaded globally in the footer, most likely in `layout/base.html`.

Snippet Usage Example

In the example below, our app uses my-app.js to add custom functionality on the storefront that should be loaded on every page of the store.

Example App Structure

your-app
 ├── assets
 │   └──  my-app.js
 ├── snippets
 │   └──  global-footer.html
 └── manifest.json

To add my-app.js to every page of the store, add it to a snippet that uses the app_asset_url tag to reference the file source in a script tag.

Example Asset Usage in Snippet

<script src="{% app_asset_url 'assets/my-app.js' %}"></script>

All assets are loaded from a CDN, which does not support local file imports from another file. It's best to compile and minify your assets into self-contained files.

To configure the snippet to load into a theme app_hook, add it to the app manifest locations:storefront with the desired location.

Example Manifest.json

{
  "locations": {
    "storefront": {
      "global_footer": "snippets/global-footer.html",
    }
  }
}

Once you've done this, you should see my-app.js loading on every storefront page in the footer. :clap:

Locations

Snippet Usage Example

On this page