Revolution Slider

“Revolution Slider” is a “Builder” block, which enables you to add images as sliders on your page to make an effect of animation.

Add section -> Builder -> Revolution Slider

Revolution Slider

Here you can choose what kind of slide transitions it will be. This is the main difference between the “Revolution Slider” and the “Slick Slider”. One can set the time of the speed, with which the sliders will be changed. In order to have such an effect on your page, you need to add a block “Revolution Slider” first and then add blocks “Slide for Revolution”, where you can select the images for the sliders and customize them. The number of “Slide for Revolution” blocks depends on the number of slides you want to have.

Layout

Here you can choose the height of the image from the dropdown list of “Height”. The “Minimum height” and “Image height size” can be set on the scale from 0 to 1000px. The size of the columns can be chosen from the dropdown list “Size of the column”. The sliders have Arrows or Bullets, which help to navigate to the next or to the previous slider. You can choose either one of them, both of them, or none for your sliders. One can also decide how often the sliders should be changed by the next ones using the “Delay (seconds)” scale from 3 to 15 seconds. If you need the parallax effects for the image or its content, you may set it on the “Parallax of the image” scale from 0 to 16 and on the “Parallax of content” scale from 0 to 16. If you enable the option “Preload spacer”, the space for the “Builder” section, where the “Revolution Slider” is built-in will be removed for ca. 2-3 seconds while the store page will be loading. Once the page is loaded the whole block will be displayed again.

Slide for Revolution

General

In this section, you can add a URL for the slide that will redirect your customers to the needed page, when clicking on the slider. 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

You can add an image both for a desktop and a mobile version. The recommended image size is 1440 x 550 pixels. For the mobile version you can 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 settings.

Text

Here you can customize the text content for your slide. 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

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. 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 on the slide. 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 the height of the image.

Here you can choose the Type of layout for the text on the slide. 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 a container, enable the option “Add container”. (This option works only for the Layout 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-size and 1000 px is 100% of the width.

Effects

In this section, you can add the unique effects, which make the block “Slide for Revolution” so extraordinary. First of all, you can set a time for the particular slide, which will be needed for the slide transition. It may differ from another slider’s time settings, or it can be the same if you choose 0 on the “Delay” scale from 0 to 60 seconds. In “Slide animation” you can add the code for the slide transitions. The codes for this purpose you can find in Slide Transitions. In “HTML layer animation” you can add the code for the layer transitions. The code for this purpose you can find in Layer Transitions.