Design

Learn how to customize your site’s template, images, colors, fonts, and navigation. Plus, learn tips for getting the most out of your design.

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. Templates look great on a wide variety of device sizes too—from mobile to desktop and everything in between. We recommend you spend a little time in the design editor to really make your site your own.

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. While the preview you see mirrors the live version of your site, any design changes you make to your site are private until you publish them. So have fun and play around.

Changing your template

  1. Visit the Settings > Design section of the app and select Customize.
  2. In the Template section, select your current template to open the menu.
  3. Select different templates to preview them in the editor.
  4. Preview different pages for a given template.
  5. 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. By default, we'll use an image from one of your linked platforms, and if that photo works for you, awesome! If not, there are a few things to consider when picking and uploading a new cover image:

  • Subject – In general, choose a photo where the subject is in the center with generous space around all sides.
  • Crop – Most templates will crop and scale your photo in two ways: in landscape on wider displays (like desktop and tablets) and square on smaller displays (like phones). That means your photo needs to work well in both contexts. So be mindful of how close your subject is to the edges.
  • Size – If you upload a small image your photo will look pixelated and blurry when scaled up in templates. In general, try to upload the largest image you can while staying below our 10 MB limit. Shoot for at least 1500-2000 pixels wide. Go big.
  • Format – We accept JPG, GIF, or PNG.
  • Don’t – Upload a photo with type or a logo baked in. Or at least test it carefully if you do. Browser windows come in all shapes and sizes, so there’s no guarantee that some of the type baked in to your image won’t get cropped out.

Uploading a cover image:

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

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:

  • SVGs are infinitely scalable, so we can make them any size and they’ll always look great.
  • 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, it might be best to reach out to your designer for help.

SVG best practices:

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

Uploading a logo:

  1. Visit the Settings > Design section of the app and select Customize.
  2. In the Images > Logo section, select the button or drag your logo in.
  3. Preview your logo on any page of your design.
  4. 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 - Typically applies as a site-wide background color.
  • Foreground - Typically applies to text and other accent elements that sit on top.

To change your colors:

  1. Visit the Settings > Design section of the app and select Customize.
  2. In the Colors section, use the color picker or paste a specific HEX color.
  3. Preview your colors on any page of your design.
  4. Once finished making changes, publish or discard your new design.
Design tip! As you’re picking colors, 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 - Typically applies to navigation and header / title elements in most templates.
  • Body - Typically applies to body text and smaller captions.

To change your fonts:

  1. Visit the Settings > Design section of the app and select Customize.
  2. In the Fonts section, select your current font to open the menu.
  3. Select different fonts to preview them in the editor.
  4. Preview your fonts on any page of your design.
  5. Once finished making changes, publish or discard your new design.
Design tip! More expressive fonts like Anton or Bagnard (called Display fonts) typically work better as Header fonts. Body fonts are typically set in more readable fonts like Inter or Source Serif Pro (Serif and Sans-serif). 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.

Customizing your header

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 rearranged or turned off and on. Here's how:

  1. Visit the Settings > Design section of the app and select Customize.
  2. In the Header section, for any page you can drag the grabber icon up or down to reorder it, or select the eye icon to show and hide it.
  3. Preview your header on any page of your design.
  4. Once finished making changes, publish or discard your new design.
Good to know! Hiding the Music, Merch, Videos, or Tour page will also hide all sub-pages related to it. For example, hiding the Music page will hide all album pages. It will also remove those pages from your Dashboard stats.

The footer of your site, typically shown at the bottom of your template, is made up of your site's Links. 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, and seeing how many looks best in your template.

Regardless of the links you choose, each one takes your fans to some other website, and each can be rearranged or turned off and on. Here's how:

  1. Visit the Settings > Design section of the app and select Customize.
  2. In the Footer section, for any link you can drag the grabber icon up or down to reorder it, or select the eye icon to show and hide it.
  3. Preview your footer on any page of your design.
  4. Once finished making changes, publish or discard your new design.
Good to know! Unlike pages in your header, a link in your footer will continue to work even if it's hidden. This allows you to add a link for any URL you'd like to share with fans, so that you can still post it and track its usage without having to show it on your site. Footer links will also show in all countries, regardless of the link's availability.

Previewing your changes

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 changes as you make them. You can navigate to different pages of your preview site by clicking links inside the window, or by using the address bar at the top of the window. Remember that any pages hidden in your header won't be shown here.
  • Mobile / Desktop Preview - You can get a good idea of how your design changes will look in a mobile or desktop browser by toggling the Mobile / Desktop button in the top right of the Design editor. However, if you're currently managing your design from your phone, only the Mobile preview will be available.
  • Preview in Browser - Simulated browsers are handy, but sometimes you want to see your changes in a real browser. To do that, use the Preview button in the top left of the Design editor, and it will open a full preview of your unpublished template in a new browser tab. Keep in mind that this page is actually live on the internet, in order for you to be able to share it with other team members, or view it on other devices. However, it will remain hidden from search engines and anyone else that doesn't have the unique URL.

Publishing your changes

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, your Publish button will become enabled. When you're ready, hit the button and your new template will be live to the world.

Discarding your changes

The Design editor is your behind-the-scenes playground to try any new template or customization idea you want. Sometimes you'll love the results, and sometimes you won't. Any time you've made some design tweaks, 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.