Slideshow

Simple banner

Slideshow with Category Block on the left

To add this section, please follow below steps:

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Add section and choose "Slideshow".

Section settings

General

Settings	Meaning
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.

Slider layout

Settings	Meaning
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

Settings	Meaning
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.

Left categories

Settings	Meaning
Show left categories	Toggle to show or hide left categories. Note: Demo for left categories on Home 06 - SuperMarket.
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	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. Learn more.

Right banner

Settings	Meaning
Show right banner	Toggle to display banner on the right.

Lookbook

Settings	Meaning
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.

Section top padding

Settings	Meaning
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).

Section bottom padding

Settings	Meaning
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).

Block settings

Image slide

Settings	Meaning
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

Banner

Settings	Meaning
Image	Choose the banner image. Recommended image: 250 x 250px
Link	Enter the link for the banner.

Video slide

Settings	Meaning
Video type	Choose the video type. There are 2 options: Youtube MP4
Youtube
Video ID	Enter the YouTube video ID. Note: Find your YouTube video ID.
Video ID for mobile	Enter the ID of the YouTube video on mobile if you want another video on mobile. Note: Find your YouTube video ID.
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.

How to show Category Block for Slideshow like on the Supermarket Homepage?

• 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 Content --> Files, upload images here: