📧 Shopify Newsletter Section – Setup & Customization Guide

This section lets you add a beautiful, customizable email subscription form to your store, with full design control over typography, colors, padding, and button animation — all editable directly from the Shopify theme editor.

---

🪜 Step 1: Add the Newsletter Section

1. In your Shopify Editor, open the page (e.g., Home Page) where you want the newsletter to appear.
2. Click “Add Section” → “Newsletter”.
3. A default newsletter block will be added — you can now customize all of its settings.

✏️ Step 2: Section Layout Options

Setting	Description
Color scheme	Select a predefined background/text color theme.
Full width	When ON, the newsletter spans the entire screen width.
Padding top / bottom	Adjust spacing above and below the section.

---

🧠 Step 3: Content Blocks

The Newsletter section is made of 3 main blocks, each editable in the sidebar:

1️⃣ Heading Block

Displays the main title (e.g., “Subscribe to our emails”).

• Heading text → The main title.
• Heading size → Choose from H0, H1, or H2.
• Controlled by these settings in the panel:
  • Heading Color
  • Font Size (Desktop / Mobile)

2️⃣ Paragraph Block

Adds a short description below the heading.

• Example: “Be the first to know about new collections and exclusive offers.”
• Controlled by:
  • Paragraph Color
  • Font Size (Desktop / Mobile)

3️⃣ Email Form Block

This is the actual signup form with:

• Email input field (rounded, shaded, and color-customizable)
• Submit button (arrow icon with animation)
• Success and error messages handled automatically.

---

🎨 Step 4: Typography Controls

All typography automatically uses the theme’s global fonts, but you can customize:

Control	Description
Heading Color	Color of the main title.
Heading Font Size	Desktop & mobile size controls.
Paragraph Color	Color of the subheading text.
Paragraph Font Size	Desktop & mobile text size.

---

💌 Step 5: Email Field Styling

You can customize how the email input box looks and feels.

Setting	Description
Email Field Radius	Controls rounded corners.
Background Color	Input background.
Border Color	Outline color of the field.
Padding (Vertical / Horizontal)	Adjust space inside the field.
Margin (Top / Bottom)	Control spacing around the input field.

🧠 Tip: The input field shadow automatically inherits the base button shadow for consistent style.

---

🔘 Step 6: Button & Icon Controls

The submit button is fully stylable with animation, hover effects, and icon options.

Setting	Description
Button Size / Radius	Controls button dimensions and corner rounding.
Button Background Color	Normal (non-hover) color.
Arrow Icon Size / Color	Adjust icon style.
Base Shadow / Hover Shadow	Customize depth and glow of button.

---

⚡ Step 7: Button Hover Animation

This section supports interactive hover effects when enabled.

Setting	Description
Enable Button Hover Animation	Turns hover effect ON/OFF.
Hover Scale	Grows button slightly (1.03, 1.06, 1.10, etc.).
Hover Translate Y	Moves button up/down on hover.
Hover Background	Sets new background color on hover.
Animation Duration (ms)	Speed of animation.
Easing	Smoothness of animation (ease-out, ease-in-out, or custom cubic-bezier).

---

🎯 Step 8: Icon Motion Effects

Make your arrow icon move or rotate during hover for an interactive touch.

Setting	Description
Icon Nudge on Hover	Shifts icon slightly to the right.
Icon Rotate on Hover	Tilts the arrow (12° or 20°).

---

🧩 Step 9: Extra Notes

• The section uses theme color schemes for background and text contrast.
• Fully responsive across all devices.
• Uses reveal animations if “Animations on scroll” are enabled in Theme Settings.
• Respects reduced motion settings for accessibility.

---

✅ Step 10: Save & Test

After customizing:

1. Click Save
2. Test your form by entering an email — you should see:
   • ✅ Success message when submitted.
   • ⚠️ Error message if an invalid email is entered.