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

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

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

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.

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.

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.

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.

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.

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.

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.

site-wide-style-options.jpg

We recommend changing the settings in this order:

Size

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

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.
Position

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.

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

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.
Was this article helpful?
8 out of 50 found this helpful
Five troubleshooting and tips