Newsletter

Author: Henry Pham 296 views

Typically, the purpose of a Newsletter is to promote a product or service and create an individual touchpoint with your email subscribers. Objectives could be things like improving your open rate and click through rate, gaining new subscribers, or creating your best email yet in terms of conversions.

Another benefit of newsletters is that they can be used by nearly any type of business, no matter your scale or industry. This article on how to create a newsletter is a great place to start if you want a guide on how to craft your email marketing campaign. The store owner can achieve those emails and use them for marketing purposes.

1. Generals

From the left side (Elements tab) > Shopify elements option, you will see the Newsletter element in the list of elements. Drag and drop it to any position of the selected structure. This element should be used on any pages.

With Newsletter element, you can build some layouts below:

Newsletter layout 01
Newsletter layout 02
Newsletter layout 03

2. Content

  • Placeholder text: Placeholders are like mail merge fields that define where you want a value that will be defined later.
  • Submit button label: Enter the label of the Submit button.
  • Icon: The icon option allows you to display a small icon within the submit button.
  • Icon position: Choose the position that you wanna show the icon here. Show in front of the Text button or behind the text.
  • Icon spacing: Configure the space between the icon and the button text here.
  • Show preview messages checkbox: Tick on this checkbox to show preview messages.
  • Success message: Add the content for the Success message here.
  • Error message: Add the content for the Error message here.

Where will the customer’s email end up after they submit it?: The customer’s emails will go to the Customers option in Shopify backend.

3. Design

3.1. General

In the General tab, you can configure styles for the entire Newsletter element here.

  • Alignment: Allow you to align the Newsletter element. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.
  • Background: Configure the background color for the Newsletter element here.
  • Box Shadow: Allow you to add a shadow for the Newsletter element by changing the Blur, Horizontal, Vertical, etc…
  • Border: Choose border style for the Newsletter here. You also can choose None style to disable the border.
  • Border Radius: Allow you to configure the border-radius for the Newsletter, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.

3.2. Input

  • Alignment: Allow you to align the title of the Newsletter input. You can choose Align Left, Align Right or Align Center. This option available for desktop, tablet, and mobile devices.
  • Typography: This option allow you customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Newsletter input text here.
  • Color: Configure the color for the Newsletter input text here.
  • Color Placeholder: Configure the placeholder color for the Newsletter input text here.
  • Width: Configure the Width for the countdown item here.
  • Height: Configure the Height for the Newsletter input here.
  • Background: Configure the background color for the Newsletter input here.
  • Box Shadow: Allow you to add a shadow for the Newsletter input by changing the Blur, Horizontal, Vertical, etc…
  • Border: Choose border style for the Newsletter input here. You also can choose None style to disable the border.
  • Border Radius: Allow you to configure the border-radius for the Newsletter input, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.
  • Outline: Configure the outline layout for the Newsletter input here. You aslo can set width for the outline in this option.
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Newsletter input here. This option is available for desktop, tablet, and mobile devices.

3.3. Button

  • Typography: This option allows you to customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Newsletter button here.
  • Text Shadow: Allow you to add a shadow for the Newsletter button by changing the Blur, Horizontal, Vertical, etc…
  • Box Shadow: Allow you to add a shadow for the Newsletter button by changing the Blur, Horizontal, Vertical, etc…
  • Width: Configure the Width for the Newsletter button here.
  • Text Color: Configure the color for the Newsletter button here.
  • Background: Configure the background color for the Newsletter button here.
  • Border: Choose border style for the Newsletter button here. You also can choose None style to disable the border.
  • Border Radius: Allow you to configure the border radius for the Newsletter button, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Newsletter button here. This option is available for desktop, tablet, and mobile devices.

Note: You can configure the style of the Countdown Progress bar on both Normal and Hover mode.

3.4. Success message

  • Alignment: Allow you to align the Success message of the Newsletter element here. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.
  • Typography: This option allows you to customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Success message of the Newsletter element.
  • Text Color: Configure the color for the Success message of the Newsletter element here.
  • Text Shadow: Allow you add a shadow for the Success message by changing the Blur, Horizontal, Vertical, etc…
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Success message with other texts here, available for desktop, tablet, and mobile devices.

3.5. Error message

  • Alignment: Allow you to align the Error message of the Newsletter element here. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.
  • Typography: This option allows you to customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Error message of the Newsletter element.
  • Text Color: Configure the color for the Error message of the Newsletter element here.
  • Text Shadow: Allow you add a shadow for the Error message by changing the Blur, Horizontal, Vertical, etc…
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Error message with other texts here, available for desktop, tablet, and mobile devices.

3.6. Icon

  • Color: Configure the color for the icon on the Newsletter button here.
  • Size: Configure the size of the icon on the Newsletter button here.
  • Rotate: Configure rotate for the icon on the Newsletter button here.
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Icon with other texts here, available for desktop, tablet, and mobile devices.

You can see the video below to know how to configure the Newsletter element:

Leave a Comment

On this page