Brand Slider

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 "Brand Slider".

Section Settings

General

SettingsMeaning

Layout

Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width).

Padding Container Full Width

Determine the left and right spacing of the Full Width layout.

Spacing Top / Spacing Bottom

Determine the spacing of the device from the top and bottom for Desktop, Tablet and Mobile device.

Style Layout

Select the layout style for the block items of the section. The options are: - Style 1: The block items are listed typically. - Style 2: Each block items has some top and bottom padding along with box shadow.

Layout

Select the general layout of block items to show together. The options are: Grid and Slider.

Background Color

Apply the color for the section background.

Background Gradient

Apply the gradient color for the section background.

Background Image

Select/Upload an image as the section background.

Title

Enter the title for the section.

Title Color

Apply color on the title of the section.

Title Font Size

Determine the font size of the title.

Title Font Size Mobile

Determine the font size of the title on mobile device.

Title Margin Bottom

Determine the spacing of the title from the bottom content.

Enable Border Title

Toggle the underline of the title throughout the width of the section and title is automatically aligned to the left side.

Title Border Color

Apply the color on the title underline / border.

Description

Enter the description text for the section.

Description Color

Apply color on the section description.

Description Font Size

Determine the font size of the description text.

Description Margin Bottom

Determine the spacing bottom of the description text.

View All

Enter the text for the View All button.

View All Font Size

Determine the font size of the View All button text.

View All Alignment

Select the position of the View All button to be either to the Left, Right or Center.

View All Font Weight

Select the font weight of the View All button text. The options are: Normal, Medium, Semi bold, Bold, Bolder, Black.

View All Margin Bottom

Determine the spacing bottom of the View All button.

Enable View All Border?

Toggle the View All button border.

View All Link

Specify the link for the View All button to redirect to.

View All Color

Apply color on the View All button text.

View All Icon

Enter the SVG icon that stands next to the text in the button.

Icon View All Color

Apply color on the icon of the view all button.

View All Icon Side (Left / Right)

Select the position of the icon to be either to the left or right of text in the button.

Button Text

Enter the text for the button at the bottom of the section.

Button Font Size

Determine the font size of the button text.

Button Spacing Top

Determine the top spacing of the view all button.

Button Color

Apply color on the view all button text.

Button Link

Specify the URL for the button to redirect to.

Alignment

Select the alignment of the button relative to the section. The options are: Left, Right, Center.

Grid Gap

Determine the gap between each block items

Item Per Row

Select the number of columns per row.

Enable Arrows?

Toggle to show arrows for slider.

Enable Dots?

Toggle to show dots for slider.

Arrows Layout

Select the layout for the slider arrows. - Style 1: The arrows are to the top right of the section. - Style 2: The arrows wrap the sliders in between.

Arrows Position Horizontal

Determine the horizontal spacing of the arrows inward relative to the slider.

Color - Background Color - Background Gradient - Border Color - Hover / Active Color - Hover / Active Background Color - Hover Active Background Gradient - Hover Active Border Color

Apply color on text background and border of the arrows for both normal and hovered/clicked states.

Item Per Row Mobile

Select the column count on mobile for slider.

Enable Image Zoom Hover?

Toggle to let image zoomed in on hovered.

Block Settings

[BLOCK] Image

SettingsMeaning

Image

Select/Upload an image for the block item. Recommended Image: Width x Height (186 x 74)px

Image Spacing Bottom

Determine the spacing of the image from its bottom.

Image Border Radius

Determine the roundness of the image border.

Enable Border?

Toggle to show the border on the image.

Border Radius

Determine the border radius of the block item.

Border Color

Apply color on the border of the block.

Border Color Hover

Apply the color on the border of the block on hovered.

Title

Enter the title underneath the image.

Title Font Size

Determine the font size of the title.

Title Font Size Mobile

Determine the font size of the title on Mobile.

Title Font Weight

Select the font weight of the title. The options are: Normal, Medium, Semi bold, Bold, Bolder, Black.

Text Color

Apply color on the title text.

Text Hover Color

Apply color on the title text on hovered.

Title Spacing Bottom

Determine the spacing of the title from the bottom.

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.

Box Shadow

Select when the box shadow appears. The options are: None, Box Shadow (static), and Box Shadow Hover (box shadow appears on hovered).

Horizontal Length

Determine the offset of the box shadow to the right.

Vertical Length

Determine the offset of the box shadow to the left.

Blur Radius

Determine the how blur the box shadow is.

Spread

Determine the far the thickness of the box shadow maintains.

Opacity

Determine the transparency of the box shadow.

Inset?

Toggle to set the box shadow falls inward or outward.

Last updated