Adding the Video Gallery Block
To display your videos, add the Video Gallery block to any page in your theme.
Add to Your Theme
Go to Online Store > Themes > Customize
Navigate to the page where you want to display videos
Click Add section or Add block
Search for Video Gallery and select it
Paste your Gallery ID in the block settings
Click Save
Tip: You can add the Video Gallery block to any page - homepage, product pages, collection pages, or custom pages.
Layout Options
Choose how your videos are displayed.
Grid Layout
The grid layout displays videos in a responsive grid with pagination:
Videos arranged in rows and columns
Pagination controls appear when there are more videos than fit on one page
Best for displaying many videos in a structured format
Carousel Layout
The carousel layout displays videos in a horizontal slider:
Navigation arrows to scroll through videos
Smooth sliding animation
Best for featured videos or when space is limited
To switch layouts: 1. Select the Video Gallery block in the theme editor 2. Find the Layout setting 3. Choose Grid or Carousel
Responsive Settings
Control how many videos appear per row on different devices.
Videos Per Row
Setting | Description | Range |
Desktop | Videos per row on large screens | 1-6 |
Tablet | Videos per row on medium screens | 1-4 |
Mobile | Videos per row on small screens | 1-2 |
Recommended settings: - Desktop: 3-4 videos - Tablet: 2 videos - Mobile: 1-2 videos
Videos Per Page (Grid Layout)
For grid layouts, set how many videos appear before pagination:
6 videos - Compact display
12 videos - Standard (default)
18 videos - Expanded
24 videos - Maximum per page
Section Header
Customize the header above your video gallery.
Section Title
Add a custom title for your gallery section:
Find the Section Title setting
Enter your title (e.g., “Our Videos”, “Product Tutorials”)
Leave blank to use the YouTube channel name
Section Button
Add a call-to-action button next to the title:
Button Text - The text displayed on the button (e.g., “Subscribe”, “View All”)
Button URL - Where the button links to (e.g., your YouTube channel)
Open in new tab - Toggle to open the link in a new browser tab
Title and Button Alignment
Choose how the title and button are positioned:
Inline - Title and button on the same row (default)
Stacked - Title above, button below
Color Customization
Match your video gallery to your brand colors.
Available Color Settings
Setting | What it controls |
Button Background | Background color of the section button |
Button Text | Text color of the section button |
Button Border | Border color of the section button |
Play Button | Color of the play icon on thumbnails |
Thumbnail Text | Color of video titles below thumbnails |
Arrow Color | Color of carousel navigation arrows |
Customizing Colors
Select the Video Gallery block in the theme editor
Scroll to the Colors section
Click on any color setting to open the color picker
Choose your color or enter a hex code
Click Save
Tip: Use your brand’s primary color for the play button and section button for a cohesive look.
Arrow Customization (Carousel)
For carousel layouts, customize the navigation arrows.
Arrow Types
Arrow - Full arrow icons (←→)
Chevron - Simple chevron icons (‹›)
Arrow Appearance
The navigation arrows feature: - Circular white background with shadow - Hover effect with subtle scale animation - Disabled state when at the beginning/end of the carousel - Positioned outside the carousel area for easy clicking
Text Alignment
Control how video titles are aligned below thumbnails:
Left - Titles aligned to the left
Center - Titles centered (default)
Right - Titles aligned to the right
Video Modal
When visitors click a video thumbnail, it opens in a modal (popup) player.
Modal Features
Video plays automatically when opened
Click the X button or outside the modal to close
Video stops when the modal is closed
Responsive sizing for all devices
Next Steps
After customizing your display:
Preview on different devices - Use the theme editor’s device preview to check mobile and tablet appearance
Test the user experience - Click through videos to ensure the modal works correctly
Adjust as needed - Fine-tune colors and layout based on your store’s design