Webshop Branding
This is designed as an index so that you can search for specific fields to see what they affect in the webshop flow. For a more thorough introduction to how to use the main branding module, we recommend viewing this article on the Complete Branding Index.
Jump to a specific section:
General
| Field | Compatible files/inputs | Max size | Affects | Please note |
|
Header logo image Header mobile logo image |
PNG, JPG | Small logo that appears in your header, on the left side | ||
| Header background colour | HTML Colour code | The main colour of the header background | ||
| Header foreground colour | HTML Colour code | The secondary colour of your header, the colour of texts and icons | Ensure this stands out against your background colour | |
| Main background colour | HTML Colour code | Background colour of the whole page | ||
| Main foreground colour | HTML Colour code | The colour of the text on top of the main background colour | Ensure this stands out against your background colour | |
| Main card background colour | HTML Colour code | The area in which the tickets/events will show in the middle of the page | ||
| Main primary background colour | HTML Colour code | The background colour of the buttons | ||
| Main primary foreground colour | HTML Colour code | The colour of the text on top of the primary background colour | ||
| Footer background colour | HTML Colour code | The background colour of the footer | ||
| Footer foreground colour | HTML Colour code | The colour of the text on top of the footer background colour | ||
| Main Event Video | mp4 | 100 MB | 4x3 aspect ratio or 1024×768 |
Landing
| Field | Compatible files/inputs | Max size | Affects | Please note |
| Header hero foreground colour | HTML Colour code | Main text on page |
The ''buy now'' button colour is used as background colour. If property is not provided colour will be taken from ''header foreground colour'' The ''pause video'' button is used as background colour with 15% opacity. |
|
| Header hero overlay with opacity | The text on the ''buy now'' button | This colour is taken from header background colour if the property is not added | ||
| Main card background colour | HTML Colour code | Background colour of the highlighted events section | ||
| Main card foreground colour | HTML Colour code | Text colour of the highlighted events section | Ensure this stands out against your background colour |
Product Page Screen
| Field | Compatible files/inputs | Max size | Affects | Please note |
| Main background colour | HTML Colour code | The main colour of the background | ||
| Main foreground colour | HTML Colour code | The colour of the text on top of the main background colour | Ensure this stands out against your background colour | |
| Main card foreground colour | HTML Colour code | Text colour of the highlighted product section | Ensure this stands out against your background colour | |
| Main card background colour | HTML Colour code | Background colour of the highlighted product section | ||
| Main primary background colour | HTML Colour code | The colour of the main button on the page | ''next button'' | |
| Main primary foreground colour | HTML Colour code | The colour of the text on the main button | ''next button'' |
Buy now screen
| Field | Compatible files/inputs | Max size | Affects | Please note |
| Main background colour | HTML Colour code | The main colour of the background | ||
| Main foreground colour | HTML Colour code | The colour of the text on top of the main background colour | ||
| Main card foreground colour | HTML Colour code | Text colour of the highlighted product section where the tickets are shown | ||
| Main card background colour | HTML Colour code | Background colour of the highlighted product section where the tickets are shown | ||
| Main primary background colour | HTML Colour code | The main colour of the button | ''next'' button | |
| Main primary foreground colour | HTML Colour code | The text colour on the button | ''next button'' |
Reservation Page Screen
| Field | Compatible files/inputs | Max size | Affects | Please note |
| Main background colour | HTML Colour code | The main colour of the background | ||
| Main foreground colour (colour with 10% opacity) | HTML Colour code | The colour of the text on top of the main background colour with opacity | 10% opacity - the degree to which the text/image is transparent | |
| Main primary foreground colour | HTML Colour code | The text colour on top of the background colour | this also applies to the text on the ''next'' button | |
| Main primary background colour | HTML Colour code | The colour of the small text at the top of the screen | ||
| Main card background colour | HTML Colour code | The colour of the section where it shows the seatmap / products / tickets | ||
| Main card foreground colour | HTML Colour code | The text colour on top of the main card background colour | this also applies to the text on the ''cancel'' button |
Distribution page screen
| Field | Compatible files/inputs | Max size | Affects | Please note |
| Main background colour | HTML Colour code | The main colour of the background | ||
| Main primary background colour | HTML Colour code | The colour of the small text at the top of the screen | This also applies to the colour of the box around the ''email'' distribution option | |
| Main foreground colour | HTML Colour code | The colour of the text on top of the main background colour | ||
| Main card background colour | HTML Colour code | The colour of the section where it shows the distribution options (email/sms) | ||
| Main card foreground colour | HTML Colour code | The text colour on the section where it shows the distribution options | ||
| Main card foreground colour (colour with 5% opacity) | HTML Colour code | The colour of the text on top of the main background colour with opacity | 5% opacity - the degree to which the text/image is transparent |
Basket Billing Screen
| Field | Compatible files/inputs | Max size | Affects | Please note |
| Main background colour | HTML Colour code | The main colour of the background | ||
| Main primary background colour | HTML Colour code | The colour of the small text at the top of the screen | This also applies to the colour of the button ''pay'' | |
| Main foreground colour | HTML Colour code | The colour of the text on top of the main background colour | ||
| Main card foreground colour | HTML Colour code | The colour of the main text on the page | Ensure this stands out against your background colour | |
| Main card background colour | HTML Colour code | The background colour of the section where it shows the buyers information and the ticketing/product information |