Slideshow
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Slideshow".
Section width
Choose the maximum width of the section on the Desktop. The options are:
Default
Width (1170px)
Width (1470px)
Width (1570px)
Width (1770px)
Width (1920px)
Full width (the width of the browser)
Padding for 'full width' option on desktop
Determine the left and right spacing of the full width layout.
Background color
Toggle padding for the content.
Background gradient
Determine the section negative spacing from the top.
Background image
Select the layout of the block item to be in a Grid or Slider.
Auto-rotate slides
Toggle the feature to automatically switch between slides.
Change slides every
Select the time to automatically change to another slide. The options are: 3/4/5/6/7/8/9/10 seconds Note: Only works when using the 'Auto-rotate slides' setting
Transition effect
Choose effects when transitioning slides. The options are: Slide Fade
Navigation dots on desktop
Select the layout for navigation dots on the desktop. The options are: None Show dots with shape Show dots with number
Background - Border color - Background hover color - Border hover color
Set the background and border color for both the normal and hover states of the navigation dots.
Position on desktop
Select the position to display navigation dots on the desktop Left, Center, or Right.
Dots style
Select the style for dots. The options are: Disc Line Number Note: Only applicable when the 'dots position on desktop' setting is set to center.
Bottom spacing
Determine the spacing of the content from the bottom.
Dots opacity (80%)
Toggle the opacity of the dots to 80%.
Show dot with image
Select to display images inside dots. Note: Only works when the navigation dots on desktop is 'Show dots with shape' and the dots style is 'Disc'.
Dots size
Determine the size of the dots. Note: Only applicable for 'Show dot with image'.
Dots size active
Determine the size of the active dots. Note: Only applicable for 'Show dot with image'.
Dots size on mobile
Determine the size of the dots on mobile. Note: Only applicable for 'Show dot with image'.
Dots size active on mobile
Determine the size of the active dots on mobile. Note: Only applicable for 'Show dot with image'.
Show navigation arrows on desktop
Toggle the navigation arrows on the desktop.
Enable navigation arrows customization
Enable to be able to adjust navigation arrows with the settings below.
Width
Determine the width of the arrows.
Height
Determine the height of the arrows.
Icons size
Determine the icon size of the arrows.
Icon color - Border color - Background color - Icon hover color - Border hover color - Background hover color
Set the color, background, and border color for both the normal and hover states of the navigation arrows.
Horizontal position (unit % or px)
Determine the horizontal position of the arrow relative.
Vertical position (unit % or px)
Determine the vertical position of the arrow relative.
Video height on desktop
Determine the video height on the desktop. Note: You can adjust the height of the video to fit with the slider image by percentage. Example: 30%, 47.25%, 51%.
Video height on mobile (unit %)
Determine the video height on mobile (unit %). Note: You can adjust the height of the video to fit with the slider image by percentage. Example: 30%, 47.25%, 51%.
Auto-play video
Toggle so that the video will automatically play when going to the video slide.
Show left categories
Title
Enter the title for the left categories
Title color - Title background color - Text color
Set the color, background, and border color for the title.
Category menu
Show right banner
Toggle to display banner on the right.
Popup style
Select the style for the lookbook popup. The options are: Small popup Large popup with product image
Enable lookbook popup maximum width
Enable this setting to adjust the maximum width of the lookbook popup. Note: Only works for style 'Large popup with product image'.
Lookbook popup maximum width
Determine the maximum width of the lookbook popup.
Pin icon width on desktop
Determine the pin icon width on the desktop.
Pin icon width on mobile
Determine the pin icon width on the mobile.
Pin icon color - Pin icon shadow color - Pin icon border color
Set the color, shadow, and border color for the pin icon.
Show number on pin icon on desktop
Toggle to show or hide the number of pin icons on the desktop.
Show number on pin icon on mobile
Toggle to show or hide the number of pin icons on the mobile.
Show plus icon on pin icon
Show the pin icon with the plus sign instead of the dot.
Note: Only applies when both the 'show number on pin icon on desktop' and 'show number on pin icon on mobile' settings are disabled.
Number font size on pin icon on desktop
Set font size for pin icon text on the desktop.
Number font size on pin icon on mobile
Set font size for pin icon text on the mobile.
Truncate product title line to
Set maximum number of lines for product title. There are 2 options: 1 line 2 lines
Section top padding / Section bottom padding on Desktop, Tablet, Mobile
Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.
Desktop
Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Desktop
Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
General
Image
Select the image on the desktop. Recommended image size: width x height (1880 x 720)px.
Image for mobile
Select the image on the mobile. Recommended image size: width x height (638 x 870)px.
Image for navigation dot
Select the image for the navigation dot. Note: Only for 'dot with image' style.
Content layout
Desktop content position
Select a location to display content on the desktop:
Left
Center
Right Note: Not applicable when the 'make content full width' setting is selected.
Customize content position on desktop
Enable this setting to automatically adjust the horizontal/vertical position of content on desktop.
Horizontal position (unit % or px)
Adjust the horizontal position of the content.
Vertical position (unit % or px)
Adjust the vertical position of the content.
Show content below images on mobile
Select this setting to display content below the image on the mobile.
Show content border
Select this setting to display borders for content.
Vertical padding
Adjust the distance between the content and the border top.
Maximum content width
Adjust the maximum width of the content.
Content alignment on desktop
Align the content on desltop to the Left, Right, or Center.
Content alignment on mobile
Align the content on mobile to the Left, Right, or Center.
Make content full width
Select this setting so that the content can be as wide as the image.
Content border color - Content background color
Set the background and border color of the content.
Testimonial
Author's image
Select 1 image for the author's image.
Bottom margin
Adjust the distance of the author's image from the part below.
Author's name
Enter text for the author's name.
Text color
Select the color for the author's name.
Font size
Select the font size for the author's name on the desktop.
Font size on mobile
Select the font size for the author's name on the mobile.
Font weight
Select the font weight for the author's name.
Profile job title
Enter text for the profile job title.
Text color
Select the color for the profile job title.
Font size
Select the font size for the profile job title on the desktop.
Font size on mobile
Select the font size for the profile job title on the mobile.
Font weight
Select the font weight for the author's name.
Desktop content
Subheading
Enter text for the subheading.
Subheading letter spacing
Select the letter spacing for the subheading.
Subheading font size
Select the font size for the subheading.
Subheading bottom margin
Adjust the distance of the subheading from the part below.
Select subheading font family
Select the font family for the subheading.
Subheading font weight
Select the font weight for the subheading.
Subheading border
Toggle to show or hide the border for the subheading.
Subheading position
Adjust the position of the subheading. There are 2 options:
Above the title
Below the title
Subheading color
Select the color for the subheading.
Heading
Enter the text for the heading.
Heading letter spacing
Enter the letter spacing for the heading.
Show heading border
Toggle to show or hide the border for the heading.
Heading font style
Enter the font style for the heading.
Heading font size
Enter the font size for the heading.
Heading line height
Enter the line height for the heading.
Heading bottom margin
Adjust the distance of the heading from the part below.
Heading color
Select the color for the heading.
Description
Enter the text for the description.
Description font size
Enter the font size for the description.
Description bottom margin
Adjust the distance of the description from the part below.
Description color
Enter the color for the description.
Mobile content
Subheading
Enter text for the subheading.
Subheading font size
Select the font size for the subheading.
Subheading bottom margin
Adjust the distance of the subheading from the part below.
Subheading font weight
Select the font weight for the subheading.
Subheading border
Toggle to show or hide the border for the subheading.
Subheading color
Select the color for the subheading.
Heading
Enter the text for the heading.
Heading font style
Enter the font style for the heading.
Heading font size
Enter the font size for the heading.
Heading line height
Enter the line height for the heading.
Heading bottom margin
Adjust the distance of the heading from the part below.
Heading color
Select the color for the heading.
Description
Enter the text for the description.
Description font size
Enter the font size for the description.
Description bottom margin
Adjust the distance of the description from the part below.
Description color
Enter the color for the description.
Buttons on content
Show arrow icon
Toggle to show or hide the arrow icon on the button.
Show button as link
Toggle to show button as link.
Show text underline
Toggle to show or hide the text underline.
Link font size
Select the font size for the button as link. Note: Applies only when the 'show button as link' setting is enabled and the 'show text underline' setting is disabled.
First button label
Enter the text for the first button.
First button link
Enter the link for the first button.
First button style
Select the style for the first button. There are 2 options: Primary button Secondary button Tertiary button
Second button label
Enter the text for the second button.
Second button link
Enter the link for the second button.
Button width
Set button width for both buttons.
Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient
Set the color, background, background gradient, and border color for both the normal and hover states of both buttons.
Lookbook products
Product 1 / Product 2 / Product 3
Product
Choose a product.
Pin icon horizontal position (%)
Select the horizontal position of the pin icon.
Pin icon vertical position (%)
Select the vertical position of the pin icon.
Lookbook popup position
Choose the position of the popup when hovering on the pin icon. There are 4 options: Right of the pin icon Left of the pin icon Above the pin icon Below the pin icon
Image
Choose the banner image. Recommended image: 250 x 250px
Link
Enter the link for the banner.
Video type
Choose the video type. There are 2 options: Youtube MP4
Youtube
Video ID
Video ID for mobile
MP4
Video link
Enter the Mp4 video link.
Video link for mobile
Enter the Mp4 video link on mobile if you want another video on mobile.
Content layout
Desktop content position
Select a location to display content on the desktop:
Left
Center
Right Note: Not applicable when the 'make content full width' setting is selected.
Customize content position on desktop
Enable this setting to automatically adjust the horizontal/vertical position of content on desktop.
Horizontal position (unit % or px)
Adjust the horizontal position of the content.
Vertical position (unit % or px)
Adjust the vertical position of the content.
Alignment
Align the content to the Left, Right, or Center.
Vertical padding
Adjust the distance between the content and the border top.
Make content full width
Select this setting so that the content can be as wide as the image.
Show content border
Select this setting to display borders for content.
Content border color - Content background color
Set the background and border color of the content.
Content
Subheading
Enter text for the subheading.
Subheading letter spacing
Select the letter spacing for the subheading.
Subheading font size
Select the font size for the subheading.
Subheading bottom margin
Adjust the distance of the subheading from the part below.
Subheading font weight
Select the font weight for the subheading.
Subheading border
Toggle to show or hide the border for the subheading.
Subheading position
Adjust the position of the subheading. There are 2 options:
Above the title
Below the title
Subheading color
Select the color for the subheading.
Subheading color on mobile
Select the color for the subheading on the mobile.
Heading
Enter the text for the heading.
Heading letter spacing
Enter the letter spacing for the heading.
Heading font size
Enter the font size for the heading.
Heading line height
Enter the line height for the heading.
Heading bottom margin
Adjust the distance of the heading from the part below.
Heading color
Select the color for the heading.
Heading color on mobile
Select the color for the heading on the mobile.
Description
Enter the text for the description.
Description bottom margin
Adjust the distance of the description from the part below.
Description font size
Enter the font size for the description.
Description color
Enter the color for the description.
Description color on mobile
Enter the color for the description on mobile.
Button label
Enter the text for the button.
Button link
Enter the link for the button.
Show button as link
Toggle to show button as link.
Show text underline
Toggle to show or hide the text underline.
Link font size
Select the font size for the button as link. Note: Applies only when the 'show button as link' setting is enabled and the 'show text underline' setting is disabled.
Button width
Set button width for the button.
Button label color - Button border color - Button background color - Button label hover color - Button border hover color - Button background hover color
Set the color, background, and border color for both the normal and hover states of button.
In Theme Editor of Slideshow -> Scroll down to "BLOCK CATEGORIES" -> Select Menu Category to show categories for this block.
You need to create a menu in Navigation first
To show icons for categories, please follow below instruction to upload icons:
Prepare your Icon image with the same name as the menu name (please use PNG image format).
Rules: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space. For example: with the menu name "Pellentes Habitanto", the image name will be pellentes-habitanto.png
Recommended size for icon image: 24 x 24px
Go to Settings --> Files, upload images here:
Toggle to show or hide left categories. Note: Demo for left categories on .
Select the menu to apply to the left categories. Note: Upload images with the same name as the menu handle to show images for each category. .
Enter the YouTube video ID. Note: .
Enter the ID of the YouTube video on mobile if you want another video on mobile. Note: .
