Add or edit an image section on your site
Updated October 28, 2026
Add an image to any page from Site design > Layout > Add page section. Choose Image banner for an image with text and buttons, or Image for a picture with an optional link. Image with text is a separate section type in the same Add section dialog, and this article doesn't cover it.
There are two types of image sections that you can choose from on the Site Designer:
- Image banner section - it combines the image with the ability to add overlay text and buttons
- Image section - allows you to upload an image to give your site a unique look
Adding an Image banner section
-
From your Fourthwall dashboard, go to Site design > Layout tab, and in the dropdown, make sure you are on the page you want to add the image banner section
-
In the left-hand side menu, you need to scroll down and click where it says "Add page section."
-
This will show the section options available - see image below. There find Image banner and click "Add" to add this section.
- Once you have added the image banner, it will take you to Image banner section settings. We'll cover that in detail in the section below.
Image banner section settings
The image banner section settings has many options to customize this to your brand and liking. Let's go through the various options
Text details
Here, you can add and edit the Heading text and Description text. You can also select a Heading text size (Small, Regular, or Large). Leave these empty if you prefer no text on your banner
Buttons details
In this setting, you can add, edit, or remove buttons that are part of the Image banner section. These buttons can lead to a collection page, a blog page, a specific social media, etc - you can decide what you want to link to the call action. We recommend keeping it to 1-2 buttons to avoid too many calls of action in this section, but you can add more as it depends on your preference and how you are planning to use it!
For each button, you have the settings to edit the button text, the link/URL you want the button to lead to, and the icon you want to show next to the text, if any. The first button uses your Primary button style and every button after it uses your Secondary button style, so they can look different. Whether you can make them match depends on your theme's button controls; see Advanced button customization. You can choose section-specific colors in the advanced settings (more details here).
Background details
Here you can add or remove the image you want to use for your Image banner section background. The section supports options to adapt to the image size, or use Small, Regular, or Large presets.
You can also add an overlay effect to the image and select the overlay color, opacity, and background blend mode.
Image recommendations
The image banner section is full-width by default, so your image should be landscape-oriented and wide enough to look sharp on large screens. Keep these guidelines in mind when preparing your banner image:
- Resolution: Use an image at least 1920 px wide for full-width banners. For narrower layouts or smaller section sizes, 1200 px wide is a good starting point. The exact display size depends on your theme and your visitor's screen.
- Aspect ratio: A landscape ratio between 16:9 and 3:1 works well for most banner layouts. Taller images (closer to 1:1) may get cropped or leave large empty areas depending on your section size setting.
- File format: Fourthwall's image uploader accepts JPG, PNG, and WebP formats. Use JPG for photographs, PNG for graphics with transparency, and WebP for smaller file sizes with high quality.
- File size: Larger files slow down your page load time, which can hurt the shopping experience for your customers. Compress your images before uploading when possible.
For best results, preview your banner on both desktop and mobile after uploading. What looks great on a wide monitor may crop differently on a phone screen.
Colors & appearance details
Within the colors & appearance settings, you can edit things like the section width (original image size or full-width), section and header size, alignment of the text and button of the image banner section, and the text color for each of the text options in the section.
Advanced settings
The advanced settings let you customize this specific section further. Expand Advanced to find Customize colors, Invert colors, Adjust text size, and Add custom CSS code. The code you add or colors you select here only affect this section, not your general site.
Adjusting the section
You also have the option to "move," "hide," or "delete" the Image banner section from your layout.
- To move, click and hold down to drag the section to your desired location
- To hide, hover over the section and click on the eyeball
- To delete, click into the section, click the ⋯ menu at the top right of the section panel, and select Delete section
How do I remove padding or white space from my Image banner?
Image banner spacing can't be reduced past the Small size with a built-in setting. If your banner is already Small and you want to remove the padding, white space or remaining gap around its text and buttons, you need custom CSS. See Add custom HTML and code to your site. Fourthwall Support can't debug or rewrite that CSS for you.
The standalone Image section has its own Top padding and Bottom padding settings under Appearance.
Why is my image cropped, especially on mobile?
Fourthwall crops images to fit the section and the screen, and crops most on mobile. To keep the important part of an image in view, set the image's focal point after you upload it. Fourthwall keeps that point in frame on mobile and in sections with a different shape than your file. For an Image banner, you can also set the size to adapt to the image in Background details.
How do I add alt text to an image?
Each image you upload in Site design has its own alt text field. Describe what's in the image there. Alt text helps visitors who use screen readers and gives search engines context.
Adding an Image Section
-
From your Fourthwall dashboard, go to Site design > Layout tab, and in the dropdown, make sure you are on the page you want to add the Image section
-
In the left-hand side menu, you need to scroll down and click where it says "Add page section."
-
This will show the section options available - see image below. There find Image and click "Add" to add this section.
- Once you have added the Image section, it will take you to Image section settings. We'll cover that in detail in the section below.
Image section settings
The image section setting has various options for you to customize to your liking. Let's go through the various options
Image and Image link
Under Image, add or remove the image you want to use for the Image section. In Image link, add the URL you want the image to send visitors to when they click it. This can be a product page, a promotional page, or any relevant link.
Appearance and Advanced
You can adjust the Image section settings to fit your design:
- Top padding and Bottom padding (under Appearance): Adjust the space above and below the image.
- Customize colors (under Advanced): Change the colors of this section only.
- Invert colors (under Advanced): Flip this section between light and dark.
- Adjust text size (under Advanced): Change the text size in this section.
- Add custom CSS code (under Advanced): Apply additional styling to this section only.
- Make section full width: In themes that have this option, it expands the image to the full width of the page.
