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>

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