Add or edit an image section on your site
Updated May 14, 2026
A picture is worth a thousand words; thus, the Image Section will help your store stand out visually! Adding images helps define your brand and improve the shopping experience, whether it's with a sleek logo, a strong header, or an amazing product show-off.
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 button's color is based on your site color & appearance settings and uses the primary color. 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: Keep images under 10 MB. Larger files slow down your page load time, which can hurt the shopping experience for your supporters. 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.
Advance settings
The advanced settings allow you to customize this specific section further by adding custom CSS code or customizing colors for the Image banner section. The code you add or colors you select here, will only impact this section and 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 and click on "delete section" at the bottom left
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 banner, 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 setting
The image setting is where you add or remove the image you want to use for the Image section. You can also add an image link with a URL where you want the image to direct users when they click the image. This can be a product page, a promotional page, or any relevant link.
Appearance and advanced setting
You can adjust the Image Section settings to fit your design:
- Make Section Full Width: Expands the image to fit the entire width of the page.
- Top & Bottom Padding: Adjusts spacing around the image to control its placement and balance.
- Custom CSS Code: Allows you to apply additional styling for advanced customization. (only impacts this section)
- Customize Section Colors: Change the background colors associated with the image section. (only impacts this section)
