Promotions - grid – 🎒 Design Packs

• Shopify Section

Promotions - grid

The "Promotions - grid" section creates a dynamic grid layout perfect for showcasing promotional content, featured collections, or any visual marketing materials. It's highly customizable and supports multiple content types in a visually appealing grid format.

Key features include:

Flexible grid layout:
Adjustable columns (2-7 columns)
Custom spacing between items
Multiple block sizes (horizontal, vertical, big, small)
Optional custom row height
Responsive design that adapts to mobile screens

Three types of promotional blocks:

1. Standard Promotion (image and text):

Inset image with adjustable size
Heading and rich text
Custom button with link
Customizable colors for text, background, and buttons

Background Image Promotion:

Full-bleed background image
Semi-transparent overlay
Text content positioned over image
Custom text and button styling

Video Promotion:

Support for MP4/MOV video files
Autoplay, loop, and controls options
Custom poster image
Text overlay with customizable styling

Advanced features:

Entrance animations for grid items
Custom typography options
Mobile-specific layouts (1 or 2 columns)
Intersection Observer for performance
Custom CSS support for both desktop and mobile
Accessible button and link handling
SEO-friendly markup structure

The section is particularly effective for:

Creating visual product showcases
Building promotional landing pages
Highlighting multiple collections or categories
Creating engaging visual stories
Mixing different types of content (images, videos, text) in an organized grid

All elements are fully responsive and maintain their visual hierarchy across different screen sizes, with special consideration for mobile viewing experiences.