Banners & Sliders
All of the banner sections follow the same principles. You're able to swap out images, modify the height, re-order the content, and
Last updated
All of the banner sections follow the same principles. You're able to swap out images, modify the height, re-order the content, and
Last updated
The base size for text is 100%, you can adjust the size by increasing or decreasing the percentage and will modify both the Header and Text pixel sizes.
Align the text left, right or center
The position of the text within the banner can be set to left, right and center horizontally. The text can also be set top, bottom, and center vertically. The option without top or bottom centers vertically.
The width of the text can be set with text box width
We've given the option to have a mobile image for the banners. The mobile image will show on screens small than 480px in width.
Text color, background color and image overlay colors can be set. Set to none if you don't want these options.
The background and image overlays can be set to a straight hex value color or a gradient. There is a gradient picker available to choose a pre-designed gradient or you can adjust the gradient yourself.
Animations can be added. The options are fade in, fade in up, fade in down, fade in right, fade in left and none if you don't want the section to animate.
The banner height can be set to extra small, small, medium, large, and extra large. Setting the height to original will respect the full size of the image.
If you do set the height of the banner, you'll be able to set the focal point of the image to make sure the main subject of the image will show properly.
For the banners we've provided the option to set to top margin and bottom marge separately.
If you know a little CSS, you can you these boxes to add CSS to each section. This CSS will be scoped to each section so you don't have to worry about it effecting the rest of your theme. Mobile CSS will be applied at screen sizes less than 480px.
Each pack will take the font choices from the theme. If you choose override default theme font, you'll be able to choose from any font in the font picker.
Each banner comes with 5 blocks that can be added multiple times and re-ordered and arranged any way you prefer.
The simple banner has all of the options listed above.
The video banner has all of the options listed above except instead of a background image you can use a background video.
Upload your video to the Settings > Files area in the Shopify admin. Copy the link and paste it in this field.
You can choose from extra small, small, medium, large and extra large. Or you can choose to define the aspect ratio explicitly.
The banner image with boxes has all of the options listed above with the add style element of layered boxes.
You'll be able to set the box colors. It's recommended to set box 3 to your sites background color to get the overlapping experience. However creativity is great 🎉.
This banner has all the same functionality of the simple banner with the added feature of being able to show it based on whether the customer has an account.
The visibility options allows you to set the banner to always visible, show only to logged in customers, or show only to logged out customers
The banner image with angles has all of the options listed above with the add style element of angles.
The angle options are slanted down, slanted up, pointed up, or pointed down. and the angles can be applied to the top, bottom, or both.
This banner has all the same functionality of the simple banner with the added feature of being able to show it based on whether the customer has an account.
This banner has all the same functionality of the simple banner with the exception of a background image. Instead this banner has an animated gradient.
Check animate gradient to create movement in the gradients and control the speed with animation speed.
Set the time zone you're in
Set the date you'd like the banner to show up. Before that the banner will not show up on your storefront. Then set the end date, this is the time that the banner will stop showing up on your site.
