Slideshow

This section allows you to display a series of banners with or without text lines for efficiently interacting with your customers and highlighting important information.

Slideshow

Layout

The "Height" can be changed to "Adapt to image", "Fullscreen", "Fullscreen without header" or "Fixed". When using the "Fullscreen without header" option, the image will be cropped at the top and bottom, so check the following settings on the storefront to ensure they meet your needs.

If you choose the "Fixed" option, use the "Fixed height" scale to control the image height from 100 to 1000 pixels.

Use the "Width" drop-down to apply one of the options: "Standard" (boxed), "Wide" (full width of a screen), or "Fixed". Once the last option is selected, you can manually change the width from 450 to 2000 pixels using a "Fixed width" setting. The margins will be set to the left and right when using "Fixed". To read more about the described options, view the following help page.

If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".

On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

In the "Pagination style" drop-down, one can specify the slide navigation type: "Counter", "Numbers", or "Dots".

Here is how the "Counter" option might be displayed in a store:

Animation

To activate the self-running slide presentation, tick the "Auto-rotate slides" checkbox. This option works on all screen sizes.

Decide whether to use the play button next to the slider pagination by checking or deactivating the "Show play button" checkbox. This option allows visitors to stop auto-rotating slides and activate them when needed.

The slide speed rotating can be changed in seconds on the "Change slides every" scale from 3 to 9 seconds.

The effect of replacing slides with one another can be controlled using options from the "Slider animations" drop-down. You can use the transition animation in different ways by using one of the options: "Enable for slides and texts", "Enable only for slides", and "Enable only for texts". Select whether to disable the smooth animation by using the "Disable" option.

Using the slide animations, set up the speed of slides transition from smooth to swift (from 1 to 15) on the "Slider animations speed" scale.

Note! The "Image behavior" and "Desktop hover animation" provide settings for adding image animation. Decide on an image animation effect from one of the drop-downs as these settings may not work together. Use the "None" option for the unnecessary feature.

To add dynamic image motion, select the option of "Image behavior": "Ambient movement", "Zoom in out", "Zoom out in", or "Zoom random". Deactivate the smooth image motion by using the "None" option.

Desktop hover animation

If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the "Inherit global settings" option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image desktop hover animation" drop-down. Read the details on the following help page.

The options "Zoom in" and "Zoom out" place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Image overlay background" or "Image overlay gradient" (read the details above). To use this option, make sure that the "Image overlay opacity" is set up to be transparent. The overlay opacity and zooming effect on an image can be achieved with an active "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". The option "None" deactivates the animation.

You can read more about the described options on the following help page.

Mobile settings

Using the "Enable mobile settings" option, you can apply changes to the mobile mode regardless of the desktop settings.

The "Height" of an image on mobile view can be changed to "Same as on desktop", "Adapt to image", "Fullscreen", "Fullscreen without header", or "Fixed". When using the "Fullscreen without header" option, the image will be cropped at the top and bottom, so check the following settings on the storefront to ensure they meet your needs.

If you choose the "Fixed" option, use the "Fixed height" scale to control the image height from 100 to 700 pixels.

The "Text position" can be placed "Below image", "Over the image, top", "Over the image, middle", or "Over the image, bottom". Select the desired option in the drop-down list.

Slide

Tip: To activate the slide rotating effect, use more than one "Slide" block. Click the "Add Slide" button to add more blocks than given. In the current block, configure each banner individually.

Image

Tip: The "Image" settings described below can be used for the desktop and mobile.

Use the "Mobile settings" to apply the required changes for mobile.

In the "Main image" selector, press "Select image" to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height respectively). Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.

If you need to change the "Image overlay background", select the color from the color picker. By default, the color is set to transparent.

Press "Image overlay gradient" to apply the gradient vector. Read details on how to use the option here.

Adjust the transparency of an image gradient overlay using the "Image overlay opacity" scale from 0 to 100%.

Text

The option "Desktop text position" helps to place texts in different positions: "Top left", "Top", "Top right"; "Center left", "Center", "Center right"; or "Bottom left", "Bottom", "Bottom right". Choose an option that best fits your needs in the drop-down.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Desktop text alignment" drop-down.

In the "Text box desktop background", you can set the color from the color picker. By default, the color is set to transparent.

Use the "Text box desktop opacity" scale to change the text box background opacity from 0 to 100 %, where 0% is an invisible background, and 100% is opaque.

The "Text box desktop width" scale allows setting the text width from 30% to 100%.

In the following example, you can view how the described settings might display in a banner with the next text parameters:

You can read more about the described options on the following help page.

Use the "Heading" field to insert a title. The "Heading size" can be changed for the h1 tag and h2 tag. The h1 tag includes the "Large" option. For the h2 tag, you can choose to display in "Large", "Medium", or "Small" sizes.

If you need to change a title color, use the "Heading color" picker. The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option.

Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading.

Additionally, you can insert a text paragraph in the "Description" placeholder and connect a page in the "Custom HTML". Or just connect a page with the block using the "Custom HTML" selector. Press "Select page" to choose the created page from the list or add a new one by pressing the button "Create page". If you press the "Create page" button, you will be redirected to your Shopify admin -> Online Store -> Pages. Read details on how to create pages in the following article.

If you need to change the description color, use the "Text" picker. The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option.

Here is an example of how the text settings can be displayed over the background color:

Button/Second button

Change the internal button text in the "Label" field. Leave the field blank to hide the button.

To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.

Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.

Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.

First additional image/Second additional image

Note! Additional images will only appear on the desktop. These settings do not work on smaller screens, such as mobile devices.

To add an illustration overlay on top of the main image, click "Select image" using the "Image" picker. The recommended image ratio is one-to-one (width-to-height respectively).

The position of the image can be determined using the following scales:

In the "Width" scale, set the image size. It can be changed from 1% to 70%.

Assign an image to the left or right side of the screen using the "Left" scale, where 0% means an image appears on the left and 100% - shows it on the right.

The "Top" scale controls the required image appearance on the top or bottom of the main image. Set the point to 0 % to place an image at the very top and 100% at the bottom of the main image.

Activate the "Enable shadow" checkbox to add a slight shadow outside an image.

An example of the described settings can be viewed below:

Ticker

Note! Use the ticker to overlay the image on the desktop view. It will be disabled on mobile by default.

To add a ticker overlayed on the main, hit the "Show ticker" checkbox.

In the "Text" input field, add any promotion or proposition strings.

Using the "Speed" slider, you can adjust the running line speed in seconds from 1 to 5.

The "Position" picker includes options to arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.

The ticker background color can be raised as solid or transparent in the "Background opacity" scale. The parameters vary from 0 to 100 pixels.

Use the "Background" and "Text" color pickers to colorize the ticker accordingly.

Here are example settings of the ticker:

Mobile settings

The settings described below can be applied for mobile mode regardless of the desktop settings by activating the "Enable mobile settings" option.

Here you can select an image for mobile individually. Otherwise, the same image as for the desktop will be shown on mobile view. Press on "Select image" to upload the one you need. The recommended image ratio is two-to-one (width-to-height respectively).

Check the "Show image overlay" option to display the color overlay of the image. This option works with the configured settings of the image overlay in the block. Find more details here.

Text

The heading size on mobile can be set in the corresponding drop-down by selecting one of the options: "Large", "Medium", or "Small". The "Same as on desktop" option saves the changes applied to the desktop.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Text alignment" drop-down. To clarify the use of parameters, check the following help page.