Promo banner with product grid

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 "Promo banner with product grid".

Section settings

General

Settings
Description

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.

Block header

Settings
Description

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.

Note: Go to this link find your icon. Find the icon you want, then copy the SVG code and paste it here.

“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.

Settings
Meaning

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.

Product

Settings
Meaning

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.

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 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).

Section bottom padding

Settings
Meaning

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).

Last updated