FOURCORE.DOCS
Esses docs menu

Hero banner#

Lead a page with a large image, message, buttons, and optional product details.

Add this section#

Select Add section > Hero banner on the template you want to edit.

Settings#

The settings below follow the same order as the theme editor.

Media#

  • Image: Choose an image from your library. 2880 x 1620px recommended. Set a focal point on the image to keep the subject in frame when it is cropped.
  • Video: Choose a video from your library. Plays muted on a loop instead of the image, with a pause button.
  • Overlay opacity: Use the slider from 0 to 90 %.
  • Show frame marks: Turn this on or off. Thin brass corner marks around the picture.
  • Enable image movement on scroll: Turn this on or off.

Layout#

  • Layout: Choose Content on the picture or Content beside the picture.
  • Image position: Choose Start or End.
  • Image width: Use the slider from 40 to 70 %.
  • Height: Choose Small, Medium, Large, or Full screen.
  • Content position: Choose Top start, Top center, Top end, Middle start, Middle center, Middle end, Bottom start, Bottom center, or Bottom end.
  • Content width: Choose Narrow, Medium, or Wide.
  • Content style: Choose Plain or On a card.
  • Text alignment: Choose Start or Center.
  • Color scheme: Choose a color scheme from Theme settings > Colors.

Mobile layout#

  • Mobile image: Choose an image from your library. A taller picture for phones. Leave empty to use the main image. 1080 x 1620px recommended.
  • Height: Choose Small, Medium, Large, or Full screen.
  • Content position: Choose Top, Middle, Bottom, or Below the picture. Below the picture keeps the whole picture in view.
  • Text alignment: Choose Start or Center.

Blocks#

Subheading#

General settings#

  • Text: Enter the text to show.
  • Style: Choose Plain or With a number.
  • Number: Enter the text to show.

Mobile layout#

  • Show on phones: Turn this on or off.

Heading#

General settings#

  • Heading: Enter and format a short line of text. Italic words show in the accent color.
  • Size: Choose Medium, Large, or Extra large.

Mobile layout#

  • Size: Choose Medium or Large.
  • Show on phones: Turn this on or off.

Text#

General settings#

  • Text: Enter and format the text.
  • Size: Choose Small or Medium.

Mobile layout#

  • Show on phones: Turn this on or off.

Buttons#

General settings#

  • First button label: Enter the text to show.
  • First button link: Choose the page or address to open.
  • First button style: Choose Primary, Secondary, or Outline.
  • Second button label: Enter the text to show.
  • Second button link: Choose the page or address to open.
  • Second button style: Choose Primary, Secondary, or Outline.

Mobile layout#

  • Show on phones: Turn this on or off.

Specifications#

Top spec row#

  • Label: Enter the text to show.
  • Value: Enter the text to show.

Middle spec row#

  • Label: Enter the text to show.
  • Value: Enter the text to show.

Bottom spec row#

  • Label: Enter the text to show.
  • Value: Enter the text to show.

Mobile layout#

  • Show on phones: Turn this on or off.

General settings#

  • Product: Choose a product.
  • Label: Enter the text to show.

Mobile layout#

  • Show on phones: Turn this on or off.

Image#

General settings#

  • Image: Choose an image from your library. Such as a brand logo or a badge. 400 x 200px recommended, transparent background.
  • Width: Use the slider from 40 to 300 px.

Mobile layout#

  • Show on phones: Turn this on or off.

Custom Liquid#

General settings#

  • Liquid code: Add the custom content supplied by your app or developer. Add app snippets or other code.

App block#

Add a block supplied by an installed app. Its settings come from that app.

Tips#

  • Add your real content before fine-tuning spacing and colors.
  • Check the section at both computer and phone widths. Use Mobile layout for the phone-specific choices.