Brand Slider
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 "Brand slider".
Section width
Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1470px) Width (1770px) Full width (100% of the viewport width).
Padding for 'full width' option on desktop
Determines the left and right spacing of the full width layout.
Layout style
Select the layout style for the block items of the section. There are 4 options: Style 1 Style 2 Style 3 Style 4
Layout
Select the general layout of block items to show together. The options are:
Grid
Slider
Infinite Scrolling Note: When selecting the 'infinite scroll' option, the section container will automatically be full width and have no padding.
Scroll from
Sets the direction of the scrolling within the marquee. There are two options:
Left to right
Right to left
Note: This setting only works with the 'infinite scroll' option of the layout setting above.
Scroll speed
The scroll speed of the block items. There are options: 5/10/15/20/25/30/35/40/45/50 seconds. Note: This setting only works with the 'infinite scroll' option of the layout setting above.
Show border
Displays the top border for the section.
Background color
The background color of the section.
Background gradient
The background gradient of the section.
Background image
Upload an image as the section background.
Style
Select a layout for the header block:
Title left with view all left Title left with view all right Title center with view all left Title center with view all right Title center with view all below
Title
The title of the section.
Title color
The color of the section title.
Title font size
The font size of the section title on tablet and desktop devices.
Title font size on mobile
The font size of the section title on mobile devices.
Show title border
Allows displaying the top or bottom border of the title depending on the style of the Header Block.
Title border color
The color of the title border.
Description
The description for this section.
Description color
The color of the description text.
Description font size
The font size of the description text.
Description bottom margin
Determines the spacing bottom of the description text.
View All
Enter the text for the view all button.
'View all' font size
The font size of the view all button text.
'View all' font weight
Select the position of the view all button to be either to the Left, Right or Center.
'View all' bottom margin
Determines the spacing bottom of the view all button.
Show 'view all' border
Toggle the bottom border for the view all button.
'View all' link
Specify the link for the view all button to redirect to.
'View all' link color
The text color of the view all button.
'View all' icon
'View all' icon color
The icon color of the view all button.
'View all' icon position
Select the position of the icon to be either to the left or right of text in the button.
Button label
The text that displays on the button.
Button font size
The font size of the button text.
Button top margin
Determines the top spacing of the button.
Button label color
The text color of the button.
Button link
Specify the URL for the button to redirect to.
Auto-rotate slides
Sets slider to transition automatically for a specific duration.
Change slides every
Sets a particular speed in milliseconds for the auto play slider.
Items per row
Determines the number of block columns per row on desktop devices.
Show navigation arrows
Display the arrows for the slider.
Show navigation dots
Display the dots for the slider.
Enable center mode
Make the position of the current slide to remain in the center.
Arrows
Position
Select the layout for the slider arrows. There are 3 options:
None Top right of the section Wrap the sliders in between
Horizontal position of arrows
Determine the horizontal spacing of the arrows inward relative to the slider. Note: Applies when the 'wrap the sliders in between' option is selected.
Icon color
The icon color of the arrows.
Background color
The background color of the arrows.
Background gradient
The background gradient of the arrows.
Border color
The border color of the arrows.
Icon hover color
The border color of the arrows for hover state.
Background hover color
The background color of the arrows for hover state.
Background hover gradient
The background gradient of the arrows for hover state.
Border hover color
The border color of the arrows for hover state.
Items per row on mobile
Determines the number of block columns per row on mobile devices.
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).
Image
Select/Upload an image for the block item. Recommended Image: Width x Height (186 x 74)px
Title
Enter the title underneath the image.
Text color
Apply color on the title text.
Text hover color
Apply color on the title text on hovered.
Description
Enter the text for the block description.
Description color
Apply color on the block description.
Link
Specify the link for the block to redirect to on clicked.
Enter the SVG icon that stands next to the text in the button. Note: Go to this link . Find the icon you want, then copy the SVG code and paste it here.
