Newsletter
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Newsletter".
Section settings
General
Settings | Meaning |
---|---|
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
Settings | Meaning |
---|---|
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
Settings | Meaning |
---|---|
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:
|
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
Settings | Meaning |
---|---|
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
Settings | Meaning |
---|---|
Image Behavior | Select animation for images |
[BLOCK] Show Social Media Icons
Show Social Media Icons
Settings | Meaning |
---|---|
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