Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Newsletter Section
The Flex theme includes a 'Newsletter' homepage section if you'd like to encourage your customers to stay in the loop with your company! While the Flex theme also offers a newsletter popup and a footer newsletter form, adding the signup as a whole homepage section may better suit your design and is a great alternative to have.
The newsletter section includes options to add images, specify your text and colors. Additionally, you can adjust the width and spacing, select a load in animation, and add custom CSS within the theme editor section settings.
By default, after a customer signs up for your newsletter, their email address (and first and last name, if applicable) are stored in your customer database.
In order to send email marketing to them, however, you will need a third-party email marketing provider as well as a way to synchronize your customer database with the email marketing system's lists.
List of common email marketing provider integrations
In order to set up the Newsletter, head into Customize (your Theme Editor) > Sections > Add Section > Newsletter.
Newsletter Section Settings
The section settings determine the look and layout of this section! Within the newsletter section settings, you can select options for form fields and text, colors, background image, featured image, layout, and advanced CSS.
Show first name/Show last name
If you'd like the newsletter signup form to include the first and last name fields in addition to the email field, you can enable these in the section settings.
You can then choose whether or not you'd like the form fields to display form label inside form field, or above it. This can be decided by going into Theme Settings > Elements > Forms.
If you'd like the form labels (first name, last name, email) to be placed inside the form fields, you can enable the 'use placeholders' setting. If you'd like the form labels to be displayed above the fields, you can leave this unchecked.
Additionally, you can select which button style you'd like the form button to be! With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).
Heading/Subheading
If you'd like to add a heading and/or subheading to the newsletter section, you can enter text into these fields.
Text alignment
Here you can choose the alignment of your text. Choose from left, center, or right.
Background/Text Colors
You can choose specific colors for the text and the background of the newsletter section with these color pickers.
Background image/Darken background image
If you'd like to upload a background image instead of a background color, you can upload the image here. A size of 1600 x 300px is recommended. You can then decide to darken the background image as well. This may help to improve legibility of your text on top, especially if the background image is a busy patten, or close to the text color.
Feature image
If you'd like to add an image to sit next to the form in the newsletter section, you can add a feature image. A size of 1024 x 1024px is recommended, and the image will either display on the left or the right, depending on what image position you set.
Image cropping
If you've uploaded a feature image, you can crop it to same height as your text content with the 'image cropping' setting. You'll most likely want to make use of this setting if you've uploaded an image size that is different than the recommended size! The cropping options are left, center, right, and none.
Image position
If you've uploaded a feature image, choose either left or right for the 'image position' setting.
Width
The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set the newsletter section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is a newsletter section followed by an image with text overlay section:
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'
CSS Class/Custom CSS
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
More information about using the Advanced CSS feature.
Theme Wide Form Settings
Additionally, there are some settings for the signup form that will apply to all forms theme-wide. The ability to show placeholder text for the fields within all forms and select the button style for the submit button.
These settings can be found by going into Customize (your Theme Editor) > Theme Settings > Elements > Forms:
Use placeholders
If you want the labels for the form fields to display within the field, you can enable the 'use placeholders' setting. This will move the text from above the field, to inside it.
Button style
With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).
Examples
Example 1 - Techno Demo Shop
Example 2 - Wink Demo Shop
Mobile Layout
When viewed on a mobile device, the newsletter section will resize to responsively fit into your screen. The newsletter form fields will stack vertically.
