Slick Slider

“Slick 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 -> Slick Slider

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 “Slick Slider” first and then add blocks “Slides for Slick”, where you can select the images for the sliders and customize them. The number of “Slide for Slick” 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” can be set on a 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. You can also decide how often the sliders should be changed by the next ones using the “Speed (seconds)” scale from 2 to 15 seconds.

Slide for Slick

After you have added the content block “Slick Slider” you can add the block “Slide for Slick” and customize it.

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, and it can be a different picture, with different sizes. 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. The recommended image size for the mobile version is 540x550px. The size of the mobile image 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 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. 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 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 the 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 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 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 “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 max 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.

Animation

In this section, you can work on the text animation. 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 slider. 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.

EXAMPLE Slick slider

Now let’s see what we get when we add and customize our blocks “Slide for Slick” directly after the block “Slick slider” on the Home page. We have added 1 “Slick Slider” block and then 3 “Slide for Slick” blocks. These were our settings:

“Slick Slider” block settings:

LAYOUT

Height: Preset #1 (height 550px)

Min height: 0 px

Size of column: ½ from the line

Arrows: enabled

Bullets: enabled

Speed (seconds): 7

All 3 “Slide for Slick” blocks settings:

GENERAL

URL for banner: All Collections

Image: (3 images were added, 1 to each block)

Image size: 1100px

Mobile image: (no mobile image was selected, which is why in the mobile version the same picture will be displayed)

Mobile image size: 550px

Horizontal image for mobile image: 50%

Image mask: none

Image mask opacity: 0.5

TEXT

Text line #1: FINAL CLEARANCE

Text line #2: Take 20% off “Sale Must-Haves”

Colorize style: Style #5

BUTTON #1

Button text: DISCOVER MORE

URL for the button: All Collections

Button style: Secondary

LAYOUT

Type: Type #1 v4

ANIMATION

Text animation: Move Bottom

And this is what we have got. This is a mobile version of the “Slick Slider” block. Here is the third image displayed: