How to Integrate Videowise with Page Builders

General Notes Before You Start

• Make sure your Videowise video widgets are created and published in your Videowise dashboard.

• Copy the Videowise video widget snippet/code block you want to embed.

• Depending on the page builder, you’ll paste this snippet into an element that supports custom HTML or Liquid/JavaScript.

How to Add Videowise Video Widgets in Shogun Page Builder

1. Open Shogun Page Builder and navigate to the page where you want to add the video widget.

2. Within the Shogun editor, find and add a Custom Code element (or HTML block) to the desired section of your layout.

3. Paste your Videowise video widget code snippet into that element.

4. Adjust the size and placement of the block within Shogun’s layout grid.

5. Preview the page to ensure the widget loads correctly.

6. Save and publish your changes.

• Use full-width rows for immersive video experiences.

• On mobile views, make sure the widget appears above the fold if video is a key hook.

How to Add Videowise Video Components in PageFly Page Builder

1. Open PageFly from your Shopify admin and go to the page you want to edit.

2. In the PageFly editor, add a Custom HTML block (or a “Video/Widget” block if available).

3. Paste the Videowise widget embed code into the block.

4. Adjust the layout settings to control alignment, padding, and responsiveness.

5. Use PageFly’s mobile view toggle to ensure it looks good on smaller screens.

6. Save and publish.

• Place video widgets near product listings or CTA buttons to drive engagement with shoppable videos.

• Consider pairing video components with text blocks for storytelling and context.

How to Add Videowise Widgets on GemPages

1. Open GemPages from your Shopify dashboard.

2. Edit the page where you want to display the video widget.

3. Drag a Custom Code element (or an HTML embed element) into the layout where you want the video.

4. Paste the Videowise widget code snippet into that block.

5. Adjust the width and alignment as needed within GemPages.

6. Use the desktop and mobile preview modes to confirm responsiveness.

7. Save and publish the page.

• For product landing pages, use a layout that places the video next to key product details.

• On long-form pages, consider adding multiple video widgets at logical storytelling points.

Best Practices Across All Page Builders

• Use videos above the fold for hero banners, product intros, or key value proposition areas.

• Mid-page placements work well for product demos or social proof.

• Lower down, use testimonial or UGC-style video widgets to reinforce trust.

• Always test video widgets on desktop and mobile views.

• Avoid excessive padding/margins that shrink video visibility on phones.

• Page builders sometimes delay load scripts. If video widgets load slowly:
• Check if your builder supports deferred loading or lazy load settings.
• Keep video widget code as close to the intended visual section as possible.

• Most page builders offer preview modes. After embedding:
• Preview the page in both desktop and mobile views.
• Verify the video loads and plays correctly.
• Ensure shoppable interactions (tap/hover hotspots, product info) work as expected.

Final Tips

• When embedding multiple video widgets, test page performance and load time. If performance slows, consider using carousels or stories widgets to consolidate content.

• For product landing pages built in Shogun, PageFly, or GemPages, placing a Quickshop carousel widget right above or below your product grids can meaningfully improve conversions.

• If your theme has a video shortcode block, sometimes you can paste the Videowise snippet there instead of a raw HTML block — test both to see which loads faster.