Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Troubleshooting Five

This guide explains questions and issues that may come up when using the Five template.

Tip: For general help, see the Five template guide.

Add a site-wide banner color

To display a solid color instead of an image for your site-wide banner:

  • Ensure the Header Background Image tweak doesn't have an image loaded. (To remove one, click the tweak and then click Remove.)
  • Set the color with the Header Background tweak.

This banner color will display on pages without page banners.

Background image isn't fixed on mobile

Many mobile browsers, including IOS, don't support fixed background images. To achieve a similar effect, experiment with the Size: Cover and Size: Contain background image style options. Note that background image style settings apply to both mobile and desktop.

For more help, visit our troubleshooting cropping tips.

Blog list display options

As well as Five's general style options for Blog Pages, you can use Blog List Display in the Blog section to choose how much text displays on the landing page:

  • Full - Full posts display. Thumbnail images display in excerpts.
  • Header And Footer Only - Only the title and metadata (comments, likes, shares, etc) display. The date and author display if you've enabled them.
  • Header Only - Only the post title displays. The date and author display if you've enabled them.

Can't add lowercase letters to Image Block captions

Captions added to Image Blocks on the Five template will always be capitalized. As Five captions are fairly small by default, this helps make the captions more visible.

Can't change Newsletter Block header color

In the Five template's Site Styles, the Heading Color tweak in the Newsletter Block section isn't active. Instead:

  1. In Site Styles, scroll up to the Main Content section.
  2. Use the Heading 2 Color tweak to set the color. This affects all Heading 2 text on your site.

Extra content appears on checkout page

Sidebar 1 content appears on your checkout page, even if you've hidden sidebars on your site.

To remove or edit this content, temporarily enable Sidebar 1 on any page on your site:

  1. Go to the Pages panel.
  2. Hover over any page and click the gear-icon to open page settings.
  3. In the Page Layout drop-down menu, choose One Sidebar.
  4. Click Save.
  5. Hover over the content until the Sidebar One Content annotation appears.
  6. Click Edit.
  7. Delete or edit the blocks.

After you've finished, you can go back to page settings and choose Page Layout: Full Width to remove the sidebar.

How do I change the size of the site title on mobile?

On mobile, the site title's size scales relative to your site's body text. To change this:

  1. In the Home Menu, click Design, then Site Styles.
  2. In the Main Content section, change the Body Text tweak. This affects all the normal (body) text on your site.

Remove the sidebar or sidebars

Open page settings in the Pages panel by clicking for that page. In the Page Layout drop-down menu, choose Full Width to hide all sidebars.

To remove the sidebar across your site, make this change for every page on your site.

Sidebar content shows up in search results

Content in your sidebars appears in search results, even if the sidebars are hidden. To remove the content from your site, temporarily enable your sidebars.

To do this without affecting your live site:

  1. Go to the Pages panel.
  2. In the Not Linked section, use the + icon to create a new, blank Layout Page.
  3. Open the page's settings by clicking the .
  4. Use the Page Layout drop-down to select Two Sidebars.
  5. Click Save.
  6. Use the page editor to delete the content from the sidebars. This affects all sidebars on your site.
  7. Click Save.
  8. Click the to re-open the page settings and delete the page.

Styling site-wide banners

When you add a site-wide banner image in Site Styles, options for styling it appear. You can style the banner image to repeat, display at the banner height or width, or fill the banner container completely.


We recommend changing the settings in this order:


Choose how your banner fits within the banner area. Options are:

  • Auto - The image retains its original width and height. This is good for smaller images you want to repeat.
  • Cover - Scales the image as large as needed to completely cover its container (full-bleed). As a result, the banner may look different between pages, depending on the length of the page content.
  • Contain - Scales the image so its longest edge fits inside the banner area.

Repeat your banner image. This works with the Size: Auto and Size: Contain settings. Repeating is most effective for patterns and less effective for photographs.

  • No-repeat - Display the image only once.
  • Repeat - Repeat the image in all directions.
  • Repeat-x - Repeat in a row across horizontal axis.
  • Repeat-y - Repeat in a row down the vertical axis.

Set the position of the banner image.

Fix Position

When checked, the image's position remains stationary behind scrolling content. When unchecked, it scrolls up and down with the page.

This effect won't appear on some mobile devices, including iOS.

Tip: Site-wide banner images have the same style options as background images.

There’s a big blank space above the page content on mobile, but the site looks normal on desktop

This can happen if you remove page banners by setting the Banner Area Height tweak to 0px in the Header section of Site Styles. In the mobile view for Five, the banner displays by default. If no banner image is set for the page, it displays as a blank space.

If you want to remove the banner space on mobile as much as possible without using custom code, here’s one method:

  1. Go to the Header section of Site Styles.
  2. Select Banner Content: Page Title Description.
  3. Uncheck Page Thumbnail as Banner.
  4. Open the Page Title and Site Tagline tweaks and set the font size to 8px.
  5. Set the Page Title Color and Site Tagline Color to transparent.
  6. Set the Header Background and Banner Overlay Color to transparent.
  7. Reduce Banner Area Spacing to 0px.

Page banner videos

Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.

Was this article helpful?
9 out of 54 found this helpful