Sticky Scrolling Banner

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 "Sticky scrolling banner".

Section settings

General

Settings
Meaning

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.

Left/Right padding

Adjust the left/right distance of the content and products sections

Product

Settings
Meaning

Collection

Select a collection that you want show in this section.

Maximum products to show

The number of products from the collection to display. Minimum: 2. Maximum: 8.

Special card layout

Settings
Meaning

Background color

Set the color for the card item's background.

Padding

Determine the padding of the card from its top, right, bottom, left.

Corner radius

Determine the roundness of the card item.

Border color

Set the border color for the card item.

Content

Settings
Meaning

Title

Enter the text for the title of the section.

Title letter spacing

Enter the letter spacing for the title.

Make the title text italic

Toggle to apply italic style to the title text.

Title font size

Determine the font size of the title.

Title font size on mobile

Determine the font size of the title on mobile.

Line height size

Determine the line height of the title.

Line height size on mobile

Determine the line height of the title on mobile.

Title bottom margin

Specify the spacing of the title from bottom.

Title bottom margin on mobile

Specify the spacing of the title from bottom on mobile.

Title font weight

Select the font weight of the title to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.

Title color

Set color for the block title.

Title color on mobile

Set color for the block title text on mobile.

Description

Enter the description text for the section.

Description font size

Determine the font size of the description text.

Description font size on mobile

Determine the font size of the description text on mobile.

Description line height

Determine the line height of the description text.

Description line height on mobile

Determine the line height of the description text on mobile.

Description bottom margin

Determine the spacing of the description from the bottom.

Description bottom margin on mobile

Determine the spacing of the description from the bottom on mobile.

Description color

Set color for the description text.

Description color on mobile

Set color for the description text on mobile.

Button label

Enter the text for the button.

Button link

Specify the link for the button to redirect to.

Button width

Determine the width for the button.

Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient

Set the text color, background and border color for both the normal and hover states of the button.

Content alignment

Select the whole position of the image to be either to the Left, Right or Center including title, description and button.

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 200px, 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 200px, 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 200px, increasing arithmetically of 5px (pixel).

Section bottom padding

Settings
Meaning

Desktop

Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 200px, 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 200px, 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 200px, increasing arithmetically of 5px (pixel).

Last updated