Design Video Layout for Product Page

This article guides you on how to design a video layout for your product page with GemPages.

How to design a 3-row video layout for the product page?

First, follow these steps to access the product page that you want to design a video layout for:

• Go to Shopify admin dashboard > GemPages Builder > Pages.
• Select Product to choose from your existing product pages, or hit Create new page > Product page to build a new one.

• Choose Elements in the left sidebar, and you’ll see all available layouts.

• Select the preferred layout to add your video in the next steps.

Then, you can create the video layout using video elements and/or custom code elements. 

Use Video Element

Step 1: Back to Element and scroll down until you see the Media section

Step 2: Use the Video element if you want to display only video, or the Video Banner one in case you prefer a text overlaying the video.

Step 3: Click the video to configure it. In the Video URL section, choose the Video source from the dropdown and enter the weblink.

Step 4: Upload a video thumbnail and select options for the video:

• Autoplay: video autoplay when users visit your product page
• Enable sound: turn on/off the video sound when playing on the page
• Loop video: replay the video automatically when it ends
• Show control bar: show/hide the control bar (i.e., play button, pause button, etc.)
• Lazy load: load the video only when it’s visible on screen

Use Custom Code Element

Step 1: Back to Element, scroll down to the Advanced section, and select the Custom Code element.

Step 2: Hit Edit code to open the custom code box.

Step 3: Under the HTML tab, paste the video’s embed code, then hit the Save button. For example, we use the embed code of a TikTok video.

Step 4: You can not see the video instantly in the editor; however, you can preview the product page to check the result.