SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Newsletter with image

Nelly

Written by Nelly

Last updated

46 views

On this page


The Newsletter with Image section allows you to combine a visually engaging image with a subscription form, making it easier to capture visitor emails while enhancing your website’s design. In this guide, you’ll learn how to customize and optimize the Newsletter with Image section for the best user experience.

NM2.png

From Theme section sidebar -> Add section -> Newsletter with image Section

1. Newsletter block

The Newsletter Block allows users to subscribe to updates, promotions, and news by entering their email. It typically includes email input field and a subscribe button.

NM3.png
  • Design newsletter: You can choose between Design 1 or Design 2.

  • Button label: Change the button text (default is "Subscribe").

  • Show icon: Enable/disable the icon on the button.

  • Width: Adjust the form button width

2. Other block

You can add blocks such as Heading, Text, and Spacer to design a Newsletter with Image section. These blocks will help structure the content effectively, making the section visually appealing and easy to read.

To customize these blocks, follow the detailed guide here.

3. How to configure Newsletter with image section?

The Newsletter with Image section combines a subscription form with a featured image, making it visually appealing and engaging for users. Below are the key settings to help you customize this section for the best layout and user experience.

3.1. General option

NM4.png
  • Image position: Choose whether the image appears before or after the newsletter form (Image first or image last)

  • Content alignment: Adjust the text alignment (left, center, or right).

  • Image: Upload or select an image to display alongside the newsletter form.

  • Image ratio: Set the aspect ratio of the image

3.2. Options for layout section

NM6.png
  • Enable section full width: Enable this option to make the section span the full width of the page.

  • Color scheme: Select a predefined color scheme for the section.

3.3. Section padding

NM5.png
  • Padding top: Adjust the space above the section.

  • Padding bottom: Adjust the space below the section.

  • Rate padding (mobile): Set the padding percentage for mobile devices.

🎁 Exclusive Deals for The4 Customers

SectionAI

🤖 SectionAI – Build Sections with AI

Generate Shopify sections from text or wireframes.
The4 users get +20,000 bonus tokens when verifying their theme license.

  • ✅ No-code section builder
  • ✅ Works with your The4 theme
  • ✅ Build FAQs, banners, product grids & more
🚀 Try Free – Claim Tokens
EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114).

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.