Application Form Header Image

If you want to add a large header image to your BrandChamp application form, use the image picker button in the toolbar and provide the URL to the image to use.

Image Size

If you have configured Shopify integration and are using the application form embedded within your Shopify website, then the image size really depends on your Shopify layout, so you will have to test and see what works. In general though, an image width of around 1000px or less should be fine.

If you are not using an embedded application form and instead using the one hosted on https://<company-name>.brandchamp.io/#/apply, then an image size of around 500px should be fine. Again, some testing will need to be done to confirm it looks ok.

Scaling across different device sizes

Once you have inserted your image, to ensure it scales correctly you'll need to add a small bit of HTML by hand.

Firstly, click the edit HTML button (to the left of the image button - shown below), then find the <img ... > tag for the image you just inserted.

Add the following text just before the closing ">" bracket of the img tag:

style="width: 100%; height: auto"

So, if your original img tag looked like:

<img src="https://yoursite.com/path-to-your-image.png">

It should now look like:

<img src="https://yoursite.com/path-to-your-image.png" style="width: 100%; height: auto">

As shown below:

If you resize the browser window now, you should be able to see the image in the Preview pane stretch accordingly.