How to find these settings...
- Online Store
- Customize (Theme Editor)
- Top, middle dropdown
- Password
Recommended reading
In this section...
Options
Logo
When possible, it is always best practice to use a SVG or PNG file for your logos. JPEG may reduce file size, but they will also reduce clarity and you want your brand looking sharp.
It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp
Max logo width
The slider provides a minimum of 100px wide to a max of 350px with 10px steps in between. It is recommended to use an image width double this setting to keep your logos sharp.
Subheading
Highlight the purpose of the store
Subheading size
Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Text color
Choose a custom color for the text
Text hover color
Choose a custom color for links when hovered over
Button text color
Choose a custom color for the default button text and the outlined button hover text
Show newsletter
Gather users emails and permission to market to them. When they sign up, a customer account will be created for them and it will include the marketing opt in
Show social buttons
Provide options for your users to share your post to Facebook, Twitter & Pinterest or follow your existing channels
Background
Background image
The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to Full width below
- The height will depend on your Height settings below
NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
Full width
The background image has the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
Setting
Desktop Width
Minimum Image Width
Full width checked
100%
1900px
Full width unchecked
1180px
1180px
Height
The overall height of the banner in relation to the height of the screen. 0-5% is the minimum, and it steps up by 5 to a maximum of 100%.
Overlay color
A color may be applied to background images to help the text clarity
Overlay gradient
A gradient may be applied to background images to help the text clarity
Overlay opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
Background color
Choose a custom color for the background
Background gradient
Choose a custom gradient for the background
* NOTE: May not be available on all sections, blocks or templates