--- title: Add or edit an image section on your site shortDescription: Add and customize image banner and image sections on your Fourthwall site, including recommended image sizes, formats, and layout options. articleType: Tutorial primaryTopic: site-designer-image-sections categories: - Store Design - Creator Dashboard tags: - image text - banner button - image - image banner - banner - image section tasks: - add image banner to page - upload image to page section - customize image section appearance - link image or banner button to URL - move hide or delete page section - choose the right image size and format for banners terms: - image banner - add image - edit site - store design - website layout - header image - call to action button - CTA - full width image - image resolution - image size requirements - banner image format - recommended image dimensions - JPG PNG WebP upload labels: - image-text - banner-button - image - image-banner - banner - image-section contextString: Available on all Fourthwall plans. Accessed via the site designer in the creator dashboard. breadcrumbPath: "Getting started > Design my storefront" path: getting-started/design-my-storefront/add-or-edit-image-section relatedModules: - name: theme-editor-layout-checkout route: /admin/dashboard/store-design/layout/checkout - name: theme-editor-layout-home route: /admin/dashboard/store-design/layout/index - name: theme-editor-layout-memberships-feed route: /admin/dashboard/store-design/layout/memberships_feed - name: theme-editor-layout-memberships-perks route: /admin/dashboard/store-design/layout/memberships_perks - name: theme-editor-layout-coming-soon route: /admin/dashboard/store-design/layout/password last_updated: '2026-05-14' --- # Add or edit an image section on your site The Fourthwall site designer offers two types of image sections: an **Image banner section** (background image with overlay text and call-to-action buttons) and an **Image section** (standalone image with an optional click-through link). Both are added from the Layout tab in your dashboard. Use the Image banner when you want a call-to-action over an image. Use the Image section when you want a clean visual without overlaid text. ## How to add an Image banner section The Image banner section combines a background image with overlay text and clickable buttons. To add one: 1. In your Fourthwall dashboard, go to **Site design** > [**Layout tab**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect). 2. In the dropdown at the top, select the page where you want to add the section. 3. In the left-hand menu, scroll down and click **Add page section**. 4. Find **Image banner** in the section options and click **Add**. [Image: Add page section dialog with Image banner option highlighted] You'll be taken to the Image banner section settings immediately after adding it. ## Image banner section settings The Image banner section has five groups of settings. Each controls a different aspect of the section's appearance. ## Text details Add or edit the **Heading text** and **Description text** for your banner. Choose a **Heading text size**: Small, Regular, or Large. Leave both fields empty if you want the banner to show only the image with no text overlay. [Image: Image banner text details settings with heading and sub-header fields] ## Buttons details Add, edit, or remove buttons that appear on the Image banner. Each button has three fields: the button text, the link or URL the button leads to, and an optional icon next to the text. Buttons can link to a collection page, a blog post, a social media profile, or any URL. The button color comes from your site's primary color set in **Colors & appearance**. To override the color for this section only, use the advanced settings. We recommend keeping buttons to 1-2 per banner to avoid too many calls to action in one section. [Image: Image banner button settings with text, link, and icon options] ## Background details Upload or remove the background image for the Image banner. The section supports sizing options: adapt to the image size, or use Small, Regular, or Large presets. You can also add a color overlay on top of the image, control the overlay opacity, and set the background blend mode. [Image: Image banner background settings with overlay color and opacity controls] ## Image recommendations for banners The Image banner section is full-width by default. Use a landscape-oriented image wide enough to look sharp on large screens. - **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. Compress your images before uploading when possible. 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 and appearance details Adjust the section width (original image size or full-width), section and header size, text and button alignment, and the text color for each element in the section. [Image: Colors and appearance settings for section width, alignment, and text color] ## Advanced settings Add custom CSS code or set section-specific colors. Changes made here only affect this Image banner section and do not change your global site styles. [Image: Advanced settings with custom CSS code and section color options] ## How to move, hide, or delete an Image banner section To reposition, hide, or remove an Image banner section: - To move it, click and hold on the section in the layout panel, then drag it to your preferred position. - To hide it, hover over the section and click the eye icon. - To delete it, click into the section and click **Delete section** at the bottom left of the settings panel. ## How to add an Image section The Image section adds a standalone image to a page without overlay text or buttons. To add one: 1. In your Fourthwall dashboard, go to **Site design** > [**Layout tab**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect). 2. In the dropdown at the top, select the page where you want to add the section. 3. In the left-hand menu, scroll down and click **Add page section**. 4. Find **Image** in the section options and click **Add**. [Image: Add page section dialog with Image option highlighted] You'll be taken to the Image section settings immediately after adding it. ## Image section settings ### Image setting Upload or remove the image you want to display. You can also add an **Image link**: a URL the image navigates to when a visitor clicks it. This can be a product page, a collection, a promotional page, or any relevant URL. [Image: Image section settings with image upload and link URL fields] ### Appearance and advanced settings Adjust the Image section with these options: - **Make Section Full Width.** Expands the image to fill the entire page width. - **Top and Bottom Padding.** Controls the spacing above and below the image. - **Custom CSS Code.** Applies additional styling scoped to this section only. - **Customize Section Colors.** Changes the background color associated with the image section. Changes only affect this section. [Image: Image section appearance settings with full width, padding, and CSS options]