Sticky Scrolling Banner
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 "Sticky scrolling banner".
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
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.
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.
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
Content alignment
Select the whole position of the image to be either to the Left, Right or Center including title, description and button.
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).
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).
