# Assets

Source: https://developers.swell.is/apps/assets

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 7MB. Images are not resized on upload. The sizes below are recommendations, not enforced, but images outside them are cropped to fit.

### 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`

Square, minimum 512×512, PNG or SVG. Displayed at 72px and smaller.

#### Gallery images

Screenshots for the App Store listing. Place files in `assets/screenshots/` and declare each in the `images` array in swell.json. 16:9, minimum 1600×900, PNG, JPEG, WebP or GIF. Up to four are shown, in array order.

For a video, set `preview_video_url` to a YouTube or Vimeo URL. It appears as the first gallery item.

#### 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**

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

Minimum 1600×900. Required for storefront apps only.

#### 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**

```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 will be to display images in notification emails. Here’s an example of how referencing an asset URL from a notification template will work:

**notifications/welcome/tpl**

```html
<!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`.

> **Note:** 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.