Promotion Grid

by Admin on Jan 02, 2025

1. What is Promotion Grid?

The Promotion Grid section is a versatile layout that allows you to feature promotional content in a grid format, ideal for highlighting special deals, offers, or featured collections.

2. Section Components

Section		A customizable grid layout for displaying promotional content with flexible sizing and styling options
Available block		Used to add a single image or video with customizable content, labels & buttons.

3. Location & Setup

Go to "Online Store" > "Themes" > "Customize"
Select where you want to place it
Click "Add Section"
Search for Promotion Grid
Click on it to add.

4. Highlight features

Flexible Grid Layout : Customize the number of rows and columns for various display options, supports both images and videos (YouTube and Vimeo)
Clickable promotions: Add links to images or buttons to guide customers to promotions or featured products.
Custom sale labels with multiple style options

5. Common Use Cases

🤔 How to Create a Promotional Block?

To quickly bring up a promotional block to your site, take a look at these basic settings:

STEP 1: Set up the general section:

Add the Promotion grid section, and:

Enter the Heading.
(For desktop 🖥️) Scroll down to the Desktop layout section, and adjust the Number of columns you want to have.
(For mobile 📱) Scroll down to the Mobile layout section, and choose the Number of columns to be 1 or 2.

STEP 2: Set up a block:

Add a Promotion title block, and:

“Select” an Image or Video for your promotion (or you can embed the video from URL )
Adjust the media block size using Number of columns wide and Number of rows tall settings under the Layout group (read the next part for more detailed guidance).
Add a compelling Title and Text, and change the Button label or leave it blank if you don’t need a button.
Add a Sale label with custom styling(read the next part for more detailed guidance).

STEP 3:

Click “Save ” when done.

🤔 How to modify the height and width of each media block?

Want to create promotion blocks with custom sizes and engaging content? Here's how:

STEP 1: Set up the general section:

Go to the Promotion Grid section settings
(For desktop 🖥️) Scroll down to the Desktop layout section, and adjust the Number of columns you want to have.
(For mobile 📱) Scroll down to the Mobile layout section, and choose the Number of columns to be 1 or 2.
Set the spacing between blocks in Block spacing.
Define Row heights for your media.

STEP 2: Set up a block dimensions

Click on a Promotion title block
Scroll down to Layout.
Adjust the block width in the Number of columns wide (1-6 columns)

⚠️ Note: The block width cannot exceed the section's column setting.

Adjust the block height in the Number of columns tall (1-3 rows)

STEP 4:

Click “Save” when done.

🤔 How to Add a Sale Label to a Promotion block?

Want to make your promotions stand out with a sale label? Here’s how:

STEP 1: Access Sale Label settings

Click on your promotion block
Locate the Sale Label settings group

STEP 2: Enter content for the sale label:

Use the fields for Line 1 , Line 2 , and Line 3 to add promotional text like "SALE," "50% OFF," or other messages.

Tip : Keep messages short and impactful.

STEP 3: Adjust the appearance of the sale label:

Pick a Sale Label Style : Square , Circle , Flag (ribbon-like), or Angle (corner placement).
Set the Font Size for each line by choosing a percentage value between 50% and 200%.
Choose the Sale label position on an image: Top left , Top right , Bottom left , or Bottom right.

STEP 4: Customize the label's color:

Under Color, select the Background Color from the available color options.
Choose the Text Color to ensure the message is clear and eye-catching.

STEP 5: Click “Save” when done.

🤔 What customization options can you give your Promotion Grid?

For the whole Promotion Grid section:
✨ Change color scheme:	Click on the Promotion Grid section, and choose the overall scheme you want to use in both light and dark mode in the Color schema.
✨ Change the heading size:	Click on the Promotion Grid section, and choose the Heading size to be Small , Medium , or Large .
✨ Change the Heading tag (for SEO purposes)	Click on the Promotion Grid section, find and choose the Heading tag from the list.
✨ Change the heading alignment	Click on the Promotion Grid section, find and choose the Heading alignment to be Left , Right , or Center.
✨ Change the section width, add padding, or add a divider	Click on the Promotion Grid section, and scroll down to the Section layout group, and you will be able to change those settings.
For a single *Promotion title* block:
✨Change the overlay content position	Click on a *Promotion title* block, and scroll down to the Overlay content group, choose the Overlay content position to be Top , Right , or Bottom.
✨Adjust the opacity of the overlay layer	Click on a *Promotion title* block, and scroll down to the Overlay content group, adjust the Overlay opacity from 0 to 100%.
✨ Place text outside the media	By default, the text is above (overlay) the media, if you want to put the text outside, then: Click on a *Promotion title* block Scroll down to the Overlay content setting group. Turn off the Overlay content toggle. Scroll up to the Media position setting, decide your text position to be on top of the image ( Image second ) or at the bottom of the image ( Image first ).
✨ Add an icon on top of the text	Click on a *Promotion title* block, and scroll down to the Layout group, choose the Icon you want from the list.

Need help? Contact our support team at Omni Themes Support .