Newsletter

To add this section, please follow below steps:

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Add section and choose "Newsletter".

Section settings

General

SettingsMeaning

Layout

Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width).

Padding Container Full Width

Determine the left and right spacing of the Full Width layout.

Background Color - Background Gradient

Set color (or gradient) for the section background.

Background Image

Upload/Select an image as the section background.

Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile

Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.

Content

SettingsMeaning

Text Alignment

Select the alignment of the header text to be either to the Left, Center or to the Right of the section.

Justify Content

Select the horizontal alignment of the content to be either Left, Center, or Right within the section.

Grid Gap

Determine the gap between items.

Enable Social Media Icons Position Below

Toggle social media icons position below

Block settings

[BLOCK] Newsletter

SettingsMeaning

Text

Enter in the text to show.

Title Font Size

Specify the font size of the title.

Title Font Size Mobile

Specify the font size of the title on mobile.

Title Font Weight

Select the font weight of the title

Title Text Transform

Transform the text of the title to be either normal, uppercase, lowercase or capitalize.

Font Style

Select the font style of the text.

Title Color

Apply a color to the title.

Title Margin Bottom

Determine the spacing of the title from bottom on Desktop.

Title Margin Bottom Mobile

Determine the spacing of the title from bottom on Mobile.

Description

Enter the text for the description.

Description Font Size

Specify the font size of the description on desktop.

Description Font Size Mobile

Specify the font size of the description on mobile.

Description Font Weight

Select the font weight of the description

Description Color

Apply a color to the description.

Description Margin Bottom

Determine the spacing of the description from bottom.

Description Line Height

Determine the line height of the description text.

Show input field

Toggle input field

Style Layout

Select the layout style for the block items of the block. The options are:

  • Style 1: Input field has border.

  • Style 2: The input field has a border at the bottom and the button has a transparent background.

Input max width

Determine the maximum width of the Input.

Item Border Radius

Determine the roundness of the input filed.

Input Font Size

Specify the font size of the input text.

Button

Enter the text for the button.

Button Font Size

Determine the font size of the button.

Button Width

Determine the width of the button.

Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient

Set the text color, background and border color for both the normal and hover states of the buttons.

Button Text Transform

Transform the text of the button to be either normal, uppercase, lowercase or capitalize.

Button Font Weight

Select the font weight of the button.

Placeholder Text

Enter in the placeholder text for the input.

Placeholder Color

Apply a color to the placeholder text.

Input Background Color

Set color for the input background.

Input Border Color

Set border color for the input.

Spacing Between Input And Button

Set the spacing between the input and the button.

Newsletter Content Direction

Select the newsletter content direction: row/column.

Justify Content

Select the horizontal alignment of the form field to be either Left, Center, or Right within the section.

Input width behavior

Select the newsletter Input width behavior: auto/restricted with width.

[BLOCK] Block Banner

Block Banner

SettingsMeaning

Select Image

Upload/Select an image.

Text

Enter in the text to show.

Title Color

Apply a color to the title.

Title Font Size

Specify the font size of the title.

Title Font Size Mobile

Specify the font size of the title on mobile.

Button

Enter the text for the button.

Button Link

Enter URL for the button to redirect to.

Button Color

Apply a color to the button.

Button Font Size

Determine the font size of the button.

Animation

SettingsMeaning

Image Behavior

Select animation for images

[BLOCK] Show Social Media Icons

Show Social Media Icons

SettingsMeaning

Custom Width

Custom width block if 'Enable Social Media Icons Position Below' is not checked in the settings section.

Heading

Enter in the heading for the block.

Enable Background Custom Social Icons

Enable Background Custom Social Icons

Margin Top

Determine the spacing of the block from top.

Last updated