The Product Detail YouTube/Vimeo Integration Plugin for Shopware 6 smoothly combines YouTube videos with product images on your online store. Administrators can easily link YouTube or Vimeo videos to products from the backend, enhancing the product detail page for customers browsing your website. Plus, you can toggle video display on or off for each product, giving you control over how videos are shown in product detail page. 

 1. Module Configuration: Login to the Admin and choose Extensions → My extensions → Apps → Pits Product Detail Youtube Vimeo Integration for Shopware 6. 

 Figure 1. Module Configuration 

Administrators can assign YouTube URLs to products in backend which will be featured in product detail page in frontend. 

Follow the below steps to assign YouTube or Vimeo video URLs to products in administration. 

 1. Navigate to Catalogues → Products

 Figure 2. Products Tab 

 2. Choose a product and navigate to custom ‘Video URL’ tab in Product Edit Page 

 Figure 3. Video URL tab in Product Edit Page 

 3. Clicking on (+) button in grid toolbar result in a popup to add Video URL and its status. 

 Figure 4. Popup to add new video URL 

 4. Choose the videotype of the URL to be either YouTube or Vimeo in ‘Videotype’ field based on the URL to be added in ‘Video URL’ field. 

 Figure 5. Setting ‘Videotype’ of URL 

 5. Toggling the ‘Enable’ button to right allows the video URL to appear on frontend. 

 Figure 6. Adding a reference url and enabling it. 

 6. Click on ’Save Video Url’ button to save video URL and its status. 

Note: Only a specific format of youTube Video URLs is accepted and it should be in the format of ‘https://www.youtube.com/embed/videoID’ and ‘Save Video URL’ button is disabled if video URL doesn’t meet the format and the video does not exist. 

The admin grid gets updated with saved Video URL after clicking on ‘save Video URL’ as shown in Figure 7. 

 Figure 7. The video URL grid gets updated after adding a new YouTube URL 

Adding a Vimeo URL is similar in adding a YouTube URL in backend as shown in Figure 8. The administrators can choose ‘Videotype’ field as Vimeo and then add a valid vimeo URL in the format of ‘https://player.vimeo.com/video/videoID’ so it can get rendered on frontend when enabled. 

 Figure 8. Adding a reference vimeo UR 

Note: Only a specific format of vimeo Video URLs is accepted and it should be in the format of ‘https://player.vimeo.com/video/videoID’ and ‘Save Video URL’ button is disabled if video URL doesn’t meet the format and the video does not exist. 

The administrators can also edit and delete video URLs 

Edit Action 

 Figure 9: ‘Edit’ and ‘Delete’ actions in Video URL grid 

The ‘edit’ action in admin grid result in a popup to edit VideoURL and its status. 

 Figure 10: Editing the videoUR 

 Setting ‘Cover Image 

The frame of videoURL gets added to Product Media as shown in Figure 11 when a videoURL is added and enabled . The admin can set the cover image manually. Then the frame of URL becomes ‘cover image’ on product listing and detail page on frontend as shown in Figure 12. 

Note: The admin must delete video URL first before deleting video frame of URL in Product Media. 

 Figure 11. Setting ‘cover image’ to video frame generated from URL added in Product Media 

 Figure 12. URL frame becomes the cover image 

The videoURL which are enabled in backend gets rendered on product detail page within image gallery slider. In case of editing the URLs in backend, it gets reflected on frontend accordingly. The URLs which are edited on backend will be reflected on frontend as shown in Figure 14. The URLs before it undergoes editing rendered on Product Detail Page is shown in Figure 13. 

 Figure 13. The videoURL before it undergoes editing rendered on Product Detail Page 

 Figure 14. The videoURL after it undergoes editing rendered on Product Detail Page 

 English(United Kingdom), German 

Version: 1.0.0 : August, 2024 

• Initial version 

 If you have questions, use our contact form in https://www.webshopextension.com or email to support@webshopextension.com