Promo banner with product grid
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 "Promo banner with product grid".
Section width
Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width).
Padding for 'full width' option on desktop
Determine the left and right padding of the section when the full width layout is selected.
Background color
Apply Color on the background of the section.
Background gradient
Apply Color on the background gradient of the section.
Background image
Upload / Select 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.
Title bottom margin
Determine the spacing of the title from bottom on desktop.
Title bottom margin on mobile
Determine the bottom spacing of the section title on the mobile.
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.
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 font weight of the "View all"
“View all” bottom margin
Determine the top spacing of the "View all" Desktop.
Show “View all” border
Enable “View all” Border?
“View all” link
Set URL for the “View all” to redirect to if the "Redirect To URL" is selected.
“View all” link color
Apply a color to the “View all” text.
“View all” icon
Enter the SVG icon that stands next to the text in the button.
“View all” icon color
The color of the icon on the “View all” text.
“View all” icon position
Select the position of the icon to be either to the left or right of text in the button.
Spacing between “View all” and icon
Determine the spacing between the icon and the “View all” text.
Banner
Upload an image as a press cover, or any multi-purpose image.
Title
Enter in the title for the section.
Title color
Apply a color to the title.
Title font size
Specify the font size of the title.
Title font size on mobile
Specify the font size of the title on the mobile.
Button label
Enter the label for the button.
Button link
Enter the link for the button.
Button font size
Determine the font size of the button.
Button label color, Button background color, Button label hover color, Button background hover color
Set the text and background colors for both the normal and hover states of the buttons.
Products list
Select products to display in the grid
Image ratio
Select the ratio type of the product image:
Portrait Square
Portrait aspect ratio
Determine the ratio of the width / height of the image if the Portrait option of Product Image Ratio is selected.
Show border
Toggle border
Border color
Set color for the border/underline of the title.
Product title
Font size
Set the font size of the product title on tablet and desktop devices
Font size on mobile
Set the font size of the product title on mobile devices.
Color
Set the text color of the product title.
Product price
Font size
Set the font size of the product price on tablet and desktop devices
Font size on mobile
Set the font size of the product price on mobile devices.
Price color
Set the text color of the product price.
Price background color
Set the background color of the product price
Price hover color
Set the text color of the product price when hovering over the product.
Price background hover color
Set the background color of the product price when hovering over the product.
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).
Note: Go to this link . Find the icon you want, then copy the SVG code and paste it here.
