Design

Understanding design templates

Supertape templates are designed exclusively for the needs of bands and their fans. Each one is expertly crafted with a unique vibe and layout, with just the right amount of customizability to make your site feel custom and branded.

Customizing your design

You’ll find the Design editor in the Settings > Design section of the app. This is your sandbox to play with all sorts of looks and styles for your site, all behind-the-scenes.

Changing your template

Visit the Settings > Design section of the app and select Customize.
In the Template section, select your current template to open the menu.
Select different templates to preview them in the editor.
Preview different pages for a given template.
Once finished making changes, Publish or Discard your new design.

Adding a cover image

Your cover image is where you can really set the vibe and tone for your site. Each template uses the cover image a little differently, but it will always be prominently featured on your home page in some way.

Cover image best practices

Crop – Choose an image (or crop one) so the subject is in the center with generous space around all sides.
Size – Upload the highest quality image you can while staying below our 10 MB limit. At least 1500-2000 pixels wide.
Type – Don’t use an image with type or a logo baked in, or at least test it carefully on different browser sizes if you do.
Format – We accept JPG, GIF, or PNG.

Uploading a cover image

Visit the Settings > Design section of the app and select Customize.
In the Images > Cover section, select the button or drag an image in.
Preview your cover image on the home page of your design.
Once finished making changes, Publish or Discard your new design.

Adding a logo

Nothing make’s your site feel more official than adding your own logo. By default we’ll use your artist name as the main link to your site’s home page, but if you’ve got one, we really recommend taking the time to get your logo on your site.

For logos, we only accept SVG files. This is for two reasons:

Scalability - SVGs are infinitely scalable, so they look great at any size.
Flexibility - We can colorize them to match your design’s Foreground color.

If you don’t already have an .SVG version of your logo, the best way to get one might be to reach out to your designer to see if they can help you export one.

If you have an .AI or .EPS file of your logo, you can use those to convert your logo to .SVG, but that can be tricky without the right software. Again, ask your designer for help.

Logo best practices

Crop - Crop out any white space around your logo.
Color - Make it black and white so it’s easier for us to color.
Strokes - Expand all strokes to paths using “Convert to Outlines” in vector editing apps.
Fonts - Convert all typefaces to outlines as an embedded font might not always render properly.
Images - Don’t embed raster images and make sure all elements in your SVG are vector-based.

Uploading a logo

Visit the Settings > Design section of the app and select Customize.
In the Images > Logo section, select the button or drag your logo in.
Preview your logo on any page of your design.
Once finished making changes, Publish or Discard your new design.

Customizing your colors

Colors are a great way to establish your band’s brand. If there are colors and palettes you use in other mediums, try them out on your site so your fans have a consistent experience form channel to channel.

There are two main color settings for your design:

Background color - Typically applies as a site-wide background color.
Foreground color - Typically applies to text and other accent elements that sit on top.

Editing a color

Visit the Settings > Design section of the app and select Customize.
In the Colors section, use the color picker or paste a specific HEX color.
Preview your colors on any page of your design.
Once finished making changes, Publish or Discard your new design.

Pro tip! Be aware of how your Background and Foreground colors contrast with one another. Ensure there’s enough contrast that your site is still readable.

Customizing your fonts

Supertape offers a set of hand-curated, open-source fonts that offer a wide range of styles.

There are two main font settings for your design:

Header font - Typically applies to navigation and header or title elements. More expressive fonts like Anton or Bagnard (called Display fonts) work well.
Body font - Typically applies to body text and smaller captions. More readable fonts like Inter or Source Serif Pro (Serif and Sans-serif) work well.

Editing a font

Visit the Settings > Design section of the app and select Customize.
In the Fonts section, select your current font to open the menu.
Select different fonts to preview them in the editor.
Preview your fonts on any page of your design.
Once finished making changes, Publish or Discard your new design.

Pro tip! If your brand typically uses Serif or Sans-serif typefaces, pick a font that has a similar vibe to carry through your band’s brand.

Pages in your header represent your site’s main navigation. Typically shown at the top of your template, each page in your header represents a section of your site (Music, Merch, Tour, etc), and each can be renamed, rearranged, or turned off and on.

Visit the Settings > Design section of the app and select Customize.
In the Header section, for any page you can drag the arrows up or down to reorder it, or select the three dots to edit the name or hide the page.
Preview your header on any page of your design.
Once finished making changes, Publish or Discard your new design.

Good to know! Hiding these pages will also hide all sub-pages on your site and in your Dashboard. For example, hiding the Music page will hide all album pages.

The footer of your site, typically shown at the bottom of your template, can link to your platform profiles and other external URLs, in any order you’d like.

While you can technically show as many links as you’d like in your footer, we recommend narrowing it down to a few priority links that aren’t already featured on your site.

Visit the Settings > Design section of the app and select Customize.
In the Footer section, hit the + button to add a new link, drag the arrows up or down to reorder one, or select the three dots to delete one from your footer.
Preview your footer on any page of your design.
Once finished making changes, Publish or Discard your new design.

Hiding the Supertape logo

If you’d like to hide the Made with Supertape logo in the footer of your site, no worries:

Visit the Settings > Design section of the app and select Customize.
Scroll to the Spread the love section at the bottom and select the eye icon.
Publish or Discard your design.

Good to know! Supertape is a 3-musician company, and this badge is one of the main ways artists discover us.

Previewing your design

Supertape offers a few ways to preview your design changes behind-the-scenes, to make sure you’re happy with how they look and feel, before publishing them to the world.

Preview Window - Our simulated browser in the Design editor is the quickest way to preview your design and navigate around your site as you make changes.
Preview Device - Get a good idea of how your design changes will look in on different devices by toggling the Mobile / Desktop button in the top right of the Design editor.
Preview in Browser - Use the Preview button in the top left of the Design editor to open a full preview of your unpublished design changes in an actual browser.

Publishing your design

Once you’ve customized your design using any of the methods mentioned above, and previewed your changes to make sure you’re happy with everything, a Publish button will become enabled. When you’re ready, hit the button and your new template will be live to the world.

Discarding your design

Any time you’ve made some design changes the Discard Changes button will appear at the bottom of the Customize sidebar, and selecting it will reset your unpublished design to match your currently live site. You’re safe to experiment with all kinds of ideas.