Skip to content

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.

See Google Tag Manager for Full Examples

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.

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>

Assets are Loaded from a CDN

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