Your app can contain static assets for various purposes including images and documents. When installed, an app can reference metadata to retrieve a CDN URL to a named asset. One use case, for example, is to provide a logo for your app to be displayed in the Swell dashboard and elsewhere. Another is to reference static assets in notification emails.

Assets are placed in the assets/ directory of your App root. The maximum file size for an asset is currently 10MB.

App details

An app may display its logo and other details in various areas of the Swell dashboard and App Store.

App icon

To display a custom icon for your app, add an image with the name icon in the assets folder, for example:

assets/icon.png

Preview images

To display a preview image that will appear in the App Store or Storefront catalog, first define the path(s) in swell.json:

swell.json
{
  ...
  "preview_src": "assets/preview.png",
  "preview_mobile_src": "assets/preview-mobile.png"
}

Then add the specified files to the assets folder. When the app is pushed using the CLI, the files will be uploaded and associated with your app's metadata.

Marketing highlights

You can display up to 3 highlight sections on the app's detail page in the App Store or Storefront catalog. Each section describes a unique proposition offered by the app, along with an image representing its content.

Define 3 highlights in swell.json:

swell.json
{
  ...
  "highlights": [
    {
      "id": "sleek-design",
      "title": "Sleek & modern design",
      "description": " A clean, elegant layout with refined typography and ample white space for a premium look.",
      "image_src": "assets/feature-sleek-design.png"
    },
    {
      "id": "customization-options",
      "title": "Progressive customization options",
      "description": "Easily tailor colors, fonts, and layouts to match your brand's identity.",
      "image_src": "assets/feature-customization-options.png"
    },
    {
      "id": "innovative-growing",
      "title": "Innovative & growing theme",
      "description": "Continuously updated with new features and improvements to keep your store ahead.",
      "image_src": "assets/feature-innovative-growing.png"
    }
  ]
}

Then add the specified files to the assets folder. When the app is pushed using the CLI, the files will be uploaded and associated with your app's metadata.

Notification assets Coming soon

One of the key use-cases for app assets is to display images in notification emails. Here’s an example of how to reference an asset URL from a notification template:

notifications/welcome/tpl
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ subject }}</title>
  </head>
  <body>
    <h1>Welcome to {{ store.name }}</h1>
    <img src="{{ assets.welcome_png.url }}" />
    ...
  </body>
</html>

In this example, you can see that we have access to special property assets which contain an index of all the assets in your app. The naming convention of indexes in this object is to underscore file names. For example, in this case, assets/welcome.png becomes asset.welcome_png.

The schema for an asset in this context is the same as a :files record in Swell. The name of the asset is a snake-case version of its filename.