Pages

Add or edit a Hero Banner section

Add a prominent introduction to a page with a headline, supporting text, and a background. You can also include a button linking to another page.

Before you start

  • Content → Pages → page editor → Hero Banner
  • You need Pages: View permission to open this section. Creating, editing, or deleting a page requires the corresponding Create, Edit, or Remove permission.

What success looks like

  • The section is saved with the page. Customers see it when the page is published.

Quick start

The shortest path through this area.

  1. 1In Content → Pages, open the page. Drag Hero Banner from Add sections onto the canvas, or click Edit on an existing Hero Banner.
  2. 2Open Title and Supporting text to write your message. Use Background and Alignment to adjust its appearance. If you want a link, open Button, turn on Show a button, and enter its text and destination.
  3. 3Check the Desktop, Tablet and Mobile previews. Click Apply to page, then Save in the page editor. To show the page to customers, select Published and save it.
  4. 4In Title or Supporting text, you can also change the text size, weight and color. Click Back to return to the section controls.
  5. 5In Background, choose Solid color, Gradient or Image and set the height. Image backgrounds also have fit, repeat, position and overlay controls.
  6. 6In Button, turn on Show a button to include the link. Set its Text and Destination, then choose its style, colors, size and corners. Turn Show a button off if you do not need it.
  7. 7Use Preview to check the saved page. To leave a section without applying edits, click Cancel and, if prompted, Discard changes.

How this area works

Reference information for the choices on this page.

Fields and options
  • Background: For a gradient, choose the start color, end color, and direction. For an image, choose cover, contain, original, or stretch, and adjust repeat, position, and overlay.
  • Height: Choose small, medium, or large to set the hero’s height.
  • Button: Link to a storefront path or a full external URL. Choose the button style, fill and text colors, size, and corner shape.

Troubleshooting

Choose the symptom that matches what you see.

My section changes were not saved

Click Apply to page after editing the section, then click Save in the page editor. Both steps are needed to keep the change after you leave.

I want to leave without keeping my edits

Click Cancel in the section editor. If prompted, choose Discard changes to abandon the edits or Keep editing to return to them.

Continue with a related guide

Still stuck?

Open a support ticket. We’ll include this guide so you only need to explain what happened and where you got stuck.

Sign-in is required to protect store information.

Open support ticket