Promo box (Banner)
If you need to have banners, video, or text blocks on a page, a block “Promo box (Banner)” should be added.
Add section -> Builder -> Promo box (Banner)
Video manual list
General
In this section, you can add a URL for the banner that will redirect your customers to the needed page, when clicking on the banner. Simply click on it and choose the desired page from the dropdown list, or you can paste a link that is not on this list.
Image
In order to make your banner more attractive for the clients, you can add an image for it. You can add an image both for a desktop and a mobile version, and it can be a different picture, with different sizes. The recommended image size for the desktop is 1440 x 550 pixels. The image quality can be changed on the “Image size” scale from 200 to 2000 pixels. The recommended image size for the mobile version is 540x550px. The mobile image quality can be changed on the “Mobile image size” scale from 200 to 2000 pixels. For the mobile version, you can also set the horizontal position using a “Horizontal position for the mobile image” scale from 0 to 100%, where 50% is a center position, 0% - move to the left, 100% - move to the right. The settings will be disabled if you choose “Auto image adaptation height” in Layouts ->Height, which will come further in the promo box settings. You can also add an “Image mask” and choose the level of its opacity on the “Image mask opacity” scale from 0.1 to 1.0. An image mask is a sort of color cover that can be put over the image in order to give it a particular shade of color if it has some opacity, or to cover it completely with the color if the opacity level is at maximum.
Text
Here you can customize the text content for your banner in the promo box. There are 3 text lines that can be added. Delete the line value for the text or button if you want to hide the element and use '<br>' for a line break. Of course, the style of the text content can be changed in “Colorized style”, where you can choose one of eight possible styles for this purpose.
Button #1 - #2
For each banner in the promo box, you can add two buttons, which can be customized. There are three customization options for the buttons: Button text, URL for the button, and Button style. In the Button text, you can write the title of the button, e.g.: Shop now, or More. In the URL for the button insert the link to which the client should be redirected when clicking on the button and in the Button style you can choose one of the button styles which are offered in the dropdown list.
Other content
List
In order to add a page with a list of content for the banner, press “Select page” and choose the one from the list. You can create a list of content in your Shopify Admin -> Pages.
Custom HTML
This option allows you to replace the whole text content in the promo box with the page content. How to add and edit a page you can read here.
Video
If you want to have a video on your Home page, you can add it here in the Promo box (Banner). If this is a YouTube or Vimeo link, you can simply insert it in the “YouTube or Vimeo video URL”. If the source of the video is different, you can upload it in Shopify Admin-> Settings-> Files and add a link here. Once you have uploaded the video, copy its URL and paste into “Video URL”. You can also decide whether the video should have autoplay or control, simply by enabling or disabling such options like “Video autoplay” and “Video controls”.
Layout
Here you can choose the Type of layout for the text in the promo box. Shella theme offers a lot of types for the layout, simply choose the one, that suits best for your store. Additionally, you can choose the proper “Content position on the desktop” and “Content horizontal align”. If you need to align the text on the left or right sides and include the text into the container, enable the option “Add container”. This option works only for Type #1 (Text over the image) and “Full width” for the “Content width” set in the Builder section:
Use the scale from 0 to 100% to change the “Content width”. The width of the text can also be set from 0 to 1000 px in the “Text max width” scale, where 0 is auto and 1000 px is 100% of the width. The “Height” of the image can be changed by choosing one of the options from the dropdown list or using a “Min height” scale from 0 to 1000 px. The “Size of the columns” that suits the best for your store, can be chosen from the dropdown list. In the section “Layouts” one can also decide for which view the promo box content should be Visible: Desktop & mobile, Only desktop or Only mobile.
Animation
In this section, you can work on the animation, position, and opacity of the image in the banner of your promo box. The option “Image parallax” is available here. You can choose the suitable parallax type for you or disable it. Please note, that if the block height is not in the automatic adaptation mode, then the strength of the parallax effect will be adjusted to the selected height. If the height is too large for the image, the parallax effect may be minimal or not manifested at all. You can decide whether the image should have an animation when being hovered over with the mouse cursor by choosing the proper option from “Move image on hover to”. The positioning of the image can also be set in the “Static image position”. Just choose one of the available options from the dropdown list. In the same way, you can decide whether or when the banner image in the promo box should have an opacity. In the dropdown list “Image opacity” the options static, hover, static, and hover or none can be chosen for this purpose. You can select the needed animation option for the text from the dropdown list in “Text animation”. This option is available for the Layout type #1 (Text over the image) only.
Colorize
Here you can customize color settings for the text and background in the promo box. A “Text background” is available only for the layouts “Type #1 with Background v1-v4”, “Type #3 (Ribbon bottom the image)” and “Type #4 (Animation ribbon bottom the image)”. You can customize the “Curtain background” item for the layout “Type #1 with Curtain v1-v3” only.
We have changed colors for Text #1 - #3. And this is an example of how it may look like in a store:
EXAMPLE Promo box (OTHER CONTENT SETTINGS)
Now let’s see what we get when we add and customize our Promo box (Banner) for the “Builder” block on the Home page. We have added 2 Promo Boxes (Banners). One was for the image and another one was for the video. These were our settings:
Promo box (Banner) #1:
GENERAL
URL for banner: All Collections
Image: (an image was added)
Image size: 1450px
Mobile image: (no mobile image was selected, which is why in the mobile version the same picture will be displayed)
Mobile image size: 750px
Horizontal image for mobile image: 50%
Image mask: none
Image mask opacity: 0.5
TEXT
Text line #1: Limited Time: Online Only!
Text line #2: FINAL CLEARANCE
Text line #2: Take 20% Off ‘Sale Must-Haves'
Colorize style: Style #5
BUTTON #1
Button text: SHOP NOW!
URL for the button: All Collections
Button style: Default
LAYOUT
Type: Type #1 v1 (Text over the image)
Content position on the desktop: center
Size of the column: ½ from the line
Visible: Desktop & mobile
Promo box (Banner) #2:
Since the second banner is a video, we will not mention any other settings except video settings. We have added a YouTube link in the field “YouTube or Vimeo video” and have enabled “Video controls”.
Please note! In “Builder” settings we have made some changes in the settings for all sections, which are the following:
COLUMN SETTING
Content width: Boxed
Size of the columns: 2 items in the row
Size of the columns on mobile: 1 item in the row
Margins for the columns: None
Align of the columns: Center & right
Mobile content precedence: 2,1
Last updated
