Videos Look Stretched or Cropped
Symptom: Video thumbnails appear distorted, stretched, or incorrectly cropped.
Possible causes: - Theme CSS conflicts - Incorrect container sizing - Custom CSS overriding gallery styles
Solutions:
Check videos per row setting:
Open the theme editor
Select the Video Gallery block
Adjust Videos per Row to give thumbnails more space
Try 3 for desktop, 2 for tablet, 1 for mobile
Inspect for CSS conflicts:
Right-click on a thumbnail and select Inspect
Look for CSS rules affecting
aspect-ratioorobject-fitTheme styles may be overriding the gallery
Add custom CSS fix:
css .youtube-gallery-thumbnail { aspect-ratio: 16/9; object-fit: cover; }
Carousel Arrows Not Showing
Symptom: Can’t navigate between videos in carousel layout.
Possible causes: - Grid layout selected instead of Carousel - Theme CSS hiding the arrows - Not enough videos to require navigation
Solutions:
Verify layout type:
Open theme editor
Select the Video Gallery block
Check Layout is set to Carousel (not Grid)
Check video count:
Arrows only appear when there are more videos than fit on screen
Add more videos or reduce videos per row
Check for CSS conflicts:
Inspect the carousel area
Look for CSS hiding the navigation:
css /* This would hide arrows */ .carousel-arrow { display: none; }
Add CSS to show arrows:
css .youtube-gallery .carousel-nav { display: flex !important; opacity: 1 !important; }
Modal Not Opening
Symptom: Clicking on a video thumbnail doesn’t open the video player.
Possible causes: - JavaScript error on the page - Browser extension blocking popups - Theme script conflicts
Solutions:
Check for JavaScript errors:
Open browser Developer Tools (F12)
Go to the Console tab
Click a video thumbnail
Look for red error messages
Test in incognito mode:
Open an incognito/private window
Visit your store
Try clicking a video
This rules out browser extensions
Disable conflicting scripts:
Some themes load scripts that conflict with modals
Check if other apps or theme features use modals
Contact support with console errors if the issue persists
Verify app embed is active:
Go to theme editor > Theme settings > App embeds
Ensure YouTube Gallery is toggled ON
Pagination Not Working
Symptom: Can’t navigate between pages of videos in Grid layout.
Possible causes: - Not enough videos for pagination - JavaScript not loading - Theme CSS conflicts
Solutions:
Check video count vs per-page setting:
Pagination only appears when videos exceed Videos per Page
If you have 10 videos and show 12 per page, no pagination appears
Reduce videos per page:
In block settings, lower the Videos per Page number
Try 6 or 9 to see pagination with fewer videos
Check JavaScript loading:
Open Developer Tools > Network tab
Reload the page
Look for YouTube Gallery script files
Ensure they load without errors (status 200)
Test click functionality:
Inspect the pagination buttons
Check they have click handlers attached
Look for CSS making them unclickable
Theme CSS Conflicts
Symptom: Gallery styling looks broken or doesn’t match the preview.
Common conflicts: - Global img styles affecting thumbnails - Grid/flexbox resets breaking layout - Z-index issues hiding elements - Font styles overriding text
Diagnosing conflicts:
Compare with another theme:
Temporarily switch to Dawn (Shopify’s default theme)
If the gallery works correctly there, it’s a theme conflict
Use browser inspector:
Right-click on the broken element
Select Inspect
In the Styles panel, look for crossed-out styles
Identify which theme CSS is overriding gallery styles
Fixing conflicts:
Add custom CSS to override problematic styles:
```css /* Reset common conflicts */ .youtube-gallery img { max-width: 100%; height: auto; }
.youtube-gallery * { box-sizing: border-box; } ```
Need help with CSS conflicts? Contact support with: - Your theme name - Screenshot of the issue - Any custom CSS you’ve added
Mobile Display Issues
Symptom: Gallery looks good on desktop but broken on mobile.
Solutions:
Check responsive settings:
Adjust Videos per Row for mobile (1-2 recommended)
Test using the theme editor’s mobile preview
Test actual device:
The theme editor preview isn’t always accurate
Test on a real phone or use browser device emulation
Check for horizontal overflow:
If content extends beyond screen width
Add CSS:
.youtube-gallery { overflow-x: hidden; }