Slideshow
This section enables the display of a series of banners with or without text lines for efficiently interacting with your customers and highlighting important information.
Slideshow
Section layout
Use the "Height" options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:
"Adapt to media". Displays an image in its original aspect ratio.
"Fixed in px". This option helps to change an image size in pixels by specifying the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 1000 pixels.
"Proportion of height". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%*.
* The "Proportion of height" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "Mobile settings" subsection.
"Proportion of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
"Fullscreen". Set this option to show media in the full width of a page. The image width will match the page width set in global settings if the "Enable page width limit" option is ticked under Theme settings -> Page layout.
"Fullscreen without header". Using this option, the media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
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". Read more about the described options by navigating to the following help page.
* The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in Theme settings -> Page layout.
In the "Pagination style" drop-down, one can specify the slide navigation type: "Counter", "Numbers", or "Bullets". To deactivate the pagination, select the "Hide" option.
Here is how the "Counter" option might be displayed in a store:
Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use the "None" option.
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.
Animations
To activate the self-running slide presentation, tick the "Auto-rotate slides" checkbox. This option works on all screen sizes. Additional settings will be available for viewing after the option is activated:
The slide speed rotation can be adjusted in seconds on the "Change slides every" scale from 3 to 9 seconds.
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 control auto-rotating slides and activate them when needed. The option works in conjunction with the "Auto-rotate slides" feature.
The effect of replacing slides with one another can be controlled using options from the "Slide transition" drop-down. You can use the transition animation in different ways by applying one of the options: "Enable for slides and texts", "Enable only for slides", and "Enable only for texts". Decide whether to deactivate the smooth animation using the "Disable" option.
Using the slide animations, set up the speed of slide transitions from smooth to swift (from 1 to 15) on the "Slide transition 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-down lists, as these settings may conflict. Use the "None" option for the unnecessary feature.
To add a dynamic image motion to a static image, select the option under the "Image behavior" drop-down:
"None". Disables smooth image motion.
"Ambient movement". The option adds a slight circular movement to an image.
"Zoom in out". Creates a smooth zoom-in and then zoom-out effect on the image.
"Zoom out in". Applies a zoom-out effect followed by image enlargement.
"Zoom random". Using multiple pictures in a slideshow, this option randomly zooms in or out as each image changes.
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 "Zoom in" and "Zoom out" options create a zoom effect when the mouse hovers over, either enlarging or decreasing the image. You can activate opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Background" or "Gradient" in the "Slide" block. To use this option, ensure that the "Opacity" is set to transparent. The overlay opacity and zooming effect on an image can be achieved by selecting the "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" option, you can apply changes to the mobile mode regardless of the desktop settings. Activate the option to view additional functionality.
The "Height" of an image on mobile can be changed by operating one of the options:
"Same as on desktop". Choose the option to apply the same settings as on the desktop set in the main section.
"Adapt to image". Displays the image in its original aspect ratio.
"Fixed in px". This option helps to change an image size in pixels by specifying the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
"Proportion of height". Select the option to adjust the image height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%.
"Proportion of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
"Fullscreen". Set this option to show media in the full width of a page.
"Fullscreen without header". Using this option, the media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
The "Text position" can be placed "Below the image" or "Over the image". Display text over the image in the "Top", "Middle", or "Bottom". Select the desired option in the drop-down list. The examples of available options can be viewed on the following help page.
Slide
Tip: To activate the slide transition effect, use multiple Slide blocks. Click the Add Slide button to add more blocks. In the current block, customize each banner separately.
Slide link
Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.
Media
Tip: The "Image" settings described below can be used for the desktop and mobile.
Use the "Mobile settings" to apply the required changes specifically for mobile.
In the "Image" selector, press "Select" to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).
Media overlay
Turn on the "Enable" option to display the related settings.
Adjust the transparency of an image color overlay using the "Opacity" scale, which ranges from 0 to 100%.
In the "Type" picker, select one of the options: "Background" or "Gradient".
By selecting the "Background" option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.
Press the "Gradient" option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option here.
Heading
Use the "Heading" field to insert a title. The "Size" can be changed to 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 "Color" picker. The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option.
Text
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 select a page in the "Custom HTML". Alternatively, connect only a page with the block using the "Custom HTML" selector. Press the "Select" button to choose the created page from the list or add a new one by pressing the "Create page" button. 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 "Color" 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 available styles that can be applied in the section: "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, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Content box
Tip: Use the options in the "Mobile settings" subsection to modify the section layout on mobile. Read details here.
The "Position" option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains the settings, such as "Left", "Center", and Right". Select the desired option by operating the drop-down that best fits your needs. The "Auto" option sets the pre-designed parameters of the theme style.
If you need to align the text for the desktop to "Left", "Center", or "Right", select one of the options in the "Alignment" picker.
The "Width" scale allows you to adjust the width of the text box, changing the parameters from 30% to 100%.
Activate the "Enable background" option to view additional background settings.
Use the "Opacity" scale to change the text box background transparency from 0 to 100 %, where 0% is an invisible background and 100% is opaque.
In the "Background", specify the color from the color picker. By default, the color is set to transparent.
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.
Animation
Note! This feature requires using more than one "Slide" block.
Use the "Content animation" drop-down to set how the Content box occurs in each slider or simple banner. Select one of the desired options from the list:
"Static". This option disables the animation effect of the Content box.
"Up". The Content box appears from the bottom to the top of the banner after each slider rotates.
"Down". Use the option to display the Content box from the top of the banner after changing a slider.
"Left". Select the option to show the Content box from right to left after the rotation.
"Right". Show the Content box appeared from left to right after each rotation of the slider.
First additional image/Second additional image
Note! Additional images will only appear on the desktop. These settings are not compatible with smaller screens, like mobile devices.
Enable the "Show image" option to activate the related settings:
To add an illustration overlay on top of the main image, click "Select" using the "Image" picker. The recommended image ratio is one-to-one (width-to-height).
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% means it shows 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 subtle 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 image, hit the "Show ticker" checkbox. The related settings will be displayed after activating the option:
In the "Text" input field, add any promotion or proposition strings.
The "Position" picker includes options to arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.
Using the "Speed" slider, you can adjust the running line speed in seconds from 1 to 5.
The ticker background color can be set 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 to mobile mode regardless of the desktop settings by activating the "Enable" option. Additionally, related settings will appear after activating the option.
Image
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" to upload the one you need. The recommended image ratio is two-to-one (width-to-height).
Check the "Show media overlay" option to display the color overlay of the image. This option works with the configured settings of the media overlay in the block. Find more details here.
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.
Last updated