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

tip

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 29 Next 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.

info

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

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.
view_product	Used for tracking product_view type javascript events. Should be placed just before the closing </body> tag on the catalogue/product.html template. Used
add_to_cart	Used for tracking add_to_cart type javascript events. Should be placed just before the closing </body> tag on the catalogue/product.html template
start_checkout	Used for tracking started_checkout type javascript events. Should be placed on the checkout/checkout.html template
complete_checkout	Used for tracking conversion type javascript events. Should be placed on the checkout/checkout.html template

Snippet Usage Example

In the example below, our app uses my-app.js to add custom funcationality 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

In order to add my-app.js to every page of the store, we'll 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>

caution

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

In order to configure the snippet to load into a theme app_hook we'll add it to the app manifest locations:storefront configured with the desired location.

Example Manifest.json

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

Once you've done this, you should now see that my-app.js is being loaded on every page on the storefront globally in the footer. 👏