Making Your Hero Banner Full Width & Full Screen

Step 1: Access the Hero Banner Settings

1. Log in to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Click the Edit Theme button on your Surge theme to open the Theme Editor.
4. On the left-hand sidebar, click on the Hero Banner section.

Step 2: Adjust Section Width

To make the banner span the entire width of the browser:

1. In the Hero Banner settings panel, look for the Section Width dropdown.
2. Select the option labeled Contain Content (Note: Depending on your version, this may be labeled or updated to Full Width).
3. Once selected, you will see the image stretch toward the edges of the screen.

Step 3: Remove Container Padding & Rounded Corners

Even after setting the width to full, you might notice small gaps or rounded edges. To get a true "edge-to-edge" look:

1. Scroll down within the Hero Banner settings until you find Container Corner Radius.
2. Drag the slider down to 0.
3. This eliminates the "rounded" look and ensures the banner hits the exact corners of the screen.

Step 4: Save Your Changes

1. Review the desktop and mobile previews to ensure the banner looks exactly how you want it.
2. Click Save in the top right corner.

See this video for a quick visual guide: