Promo box (Banner)

This block enables you to add a banner to the sidebar.

Others -> Search -> Search page -> Add block -> Promo box (Banner)

Section settings

You can give this block a “Title” and choose its “Default state”: open, close, fixed, or without a title.

Content

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. The recommended image size for the desktop is 1440 x 550 pixels. The size of the image can be changed on the “Image size” scale from 200 to 2000 pixels. 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 the “Colorize 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 list 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 -> Online Store -> 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. 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 it 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 layout, simply choose the one, that suits best for your store.

Animation

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.

Here is how a block “Promo box (Banner)” may look in the sidebar: