FAQs¶
Display the product image on the left column on PDP¶
Q: On the Product page, flip the product image so that its on the left and the description on the right. (Most US sites are like this)
A:
Go to Storefront > Script Manager, click Create a Script, choose:
- Location on page =
Head
- Select pages where script will be added =
All Pages
- Script type =
Script
Enter the script below to Scripts contents:
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '@media (min-width: 801px) {'
+ '.productView-details { float: right; clear: right; padding-left: 1.5rem; padding-right: 0 }'
+ '.productView-images, .productView-alsoBought--right { float: left; clear: left; padding-left: 0; padding-right: 1.5rem }'
+ '}';
document.head.appendChild(style);
})();
</script>
Display mega menu with 4 columns¶
Go to Storefront > Script Manager, click Create a Script, choose:
- Location on page =
Footer
- Select pages where script will be added =
All Pages
- Script type =
Script
Enter the script below to Scripts contents:
@media (min-width: 801px) { .navPage-subMenu-list { grid-template-columns: repeat(4, minmax(max-content,350px)) } .navPage-subMenu-item:nth-child(3n) { border-right: 1px solid #d6d6d6 } .navPage-subMenu-item:nth-child(4n) { border-right: 0 } }
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '@media (min-width: 801px) {'
+ '.navPage-subMenu-list { grid-template-columns: repeat(4, minmax(max-content,350px)) }'
+ '.navPage-subMenu-item:nth-child(3n) { border-right: 1px solid #d6d6d6 }'
+ '.navPage-subMenu-item:nth-child(4n) { border-right: 0 }'
+ '}'
;document.head.appendChild(style);
})();
</script>
YouTube Video Customization Guide for BigCommerce Theme¶
Overview¶
This document provides instructions on how to hide video titles and suggested videos in YouTube video embeds for the BigCommerce Kitchenary theme.
Required YouTube Parameters¶
To hide titles and suggested videos, add the following parameters to YouTube URLs:
Parameter | Value | Description |
---|---|---|
rel |
0 | Hide suggested videos when video ends |
showinfo |
0 | Hide video title and information |
modestbranding |
1 | Hide YouTube logo |
iv_load_policy |
3 | Hide annotations/captions |
Files to Edit¶
1. Templates HTML¶
File: templates/components/products/product-view.html
¶
Location 1 - Main video embed (line ~987):
<!-- BEFORE -->
src="//www.youtube.com/embed/{{product.videos.featured.id}}?rel=0"
<!-- AFTER -->
src="//www.youtube.com/embed/{{product.videos.featured.id}}?rel=0&showinfo=0&modestbranding=1&iv_load_policy=3"
Location 2 - Image gallery videos (line ~196):
<!-- BEFORE -->
data-video-url="//www.youtube.com/embed/{{id}}?autoplay=1&mute=1&enablejsapi=1"
<!-- AFTER -->
data-video-url="//www.youtube.com/embed/{{id}}?autoplay=1&mute=1&enablejsapi=1&rel=0&showinfo=0&modestbranding=1&iv_load_policy=3"
Location 3 - Navigation thumbnails (line ~315):
<!-- BEFORE -->
data-video-url="//www.youtube.com/embed/{{id}}?autoplay=1&mute=1&enablejsapi=1"
<!-- AFTER -->
data-video-url="//www.youtube.com/embed/{{id}}?autoplay=1&mute=1&enablejsapi=1&rel=0&showinfo=0&modestbranding=1&iv_load_policy=3"
File: templates/components/products/product-view-game.html
¶
Similar to product-view.html
, need to update these locations:
- Main video embed (line ~1037)
- Image gallery videos (line ~196)
- Navigation thumbnails (line ~315)
File: templates/components/products/videos.html
¶
Location - Featured video (line ~23):
<!-- BEFORE -->
src="https://www.youtube.com/embed/{{this.featured.id}}?rel=0"
<!-- AFTER -->
src="https://www.youtube.com/embed/{{this.featured.id}}?rel=0&showinfo=0&modestbranding=1&iv_load_policy=3"
2. JavaScript Files¶
File: assets/js/theme/product/video-gallery.js
¶
Location - setMainVideo method (line ~23):
// BEFORE
setMainVideo() {
this.$player.attr('src', `//www.youtube.com/embed/${this.currentVideo.id}`);
}
// AFTER
setMainVideo() {
this.$player.attr('src', `//www.youtube.com/embed/${this.currentVideo.id}?rel=0&showinfo=0&modestbranding=1&iv_load_policy=3`);
}
File: assets/js/papathemes/youtube-carousel.js
¶
This file already has the correct configuration in playerVars
:
playerVars: {
controls: 0,
disablekb: 1,
enablejsapi: 1,
fs: 0,
rel: 0, // ✓ Already exists
showinfo: 0, // ✓ Already exists
iv_load_policy: 3, // ✓ Already exists
modestbranding: 1, // ✓ Already exists
wmode: 'transparent',
playsinline: 1,
}
Implementation Steps¶
Step 1: Backup files¶
# Create backup before editing
cp templates/components/products/product-view.html templates/components/products/product-view.html.backup
cp templates/components/products/product-view-game.html templates/components/products/product-view-game.html.backup
cp templates/components/products/videos.html templates/components/products/videos.html.backup
cp assets/js/theme/product/video-gallery.js assets/js/theme/product/video-gallery.js.backup
Step 2: Make the changes¶
Use an editor to find and replace the YouTube URLs according to the guide above.
Step 3: Test changes¶
# Run development server
stencil start
Step 4: Deploy¶
# Build theme
stencil bundle
# Upload theme to BigCommerce
stencil push
Results Verification¶
After implementing the changes, YouTube videos will:
- ✅ Not display video title
- ✅ Not display suggested videos
- ✅ Not display YouTube logo
- ✅ Not display annotations
Troubleshooting¶
Issue: Videos still show title¶
Solution: Check all YouTube URL locations again, ensure all required parameters are added.
Issue: Videos won't play¶
Solution: Check URL syntax, ensure there are no extra or missing characters.
Issue: Changes don't take effect¶
Solution: 1. Clear browser cache 2. Check if theme has been built and deployed 3. Check browser console for JavaScript errors
Notes¶
- The
showinfo=0
parameter may not work with some newer YouTube videos due to policy changes - Test with multiple different videos to ensure consistency
- Changes only apply to embedded videos, do not affect YouTube website