• Shopify Section

Promotions - grid

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.

Install this section

Included in all Design Packs plans. Try free for 14 days.
Install now — free trial →
  • Works with any Shopify theme
  • Customize in Shopify editor
  • No developer required

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.

Curabitur id nulla ut nunc aliquam sodales.

Mauris nibh enim, ornare at consequat sed, placerat quis libero. Curabitur id nulla ut nunc aliquam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nulla ut nunc aliquam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.

• Style variations

Same section. Completely different stores.

Every example below uses the same Promotions - grid section just configured differently in the Shopify editor.