What is a Split Video & Text Section widget?
The Split Video & Text Section is a new widget that offers a dynamic way to showcase videos alongside text content on your online store. This feature enables you to engage visitors effectively by combining visual and textual elements in a single, eye-catching layout.
By utilizing this widget, you can create visually captivating and informative sections that combine video content with textual information.
Disclaimer for Using Debutify Theme Widgets
When using widgets in the Debutify Theme, you are fully responsible for their configuration, content, and compliance with applicable laws and regulations. Debutify is not liable for any outcomes or consequences resulting from their use.
For the full disclaimer and additional details, please read the complete article here: Disclaimer for Using Debutify Theme Widgets.
Your commitment to transparency and ethical practices is crucial for building trust and maintaining a compliant online presence.
How to Enable/Disable Split Video & Text Section Widget?
The enablement or disablement of widgets depends on the version of your Debutify Theme. Please follow the correct guide based on your theme version:
How to Enable or Disable the Debutify Theme Widgets on versions 7.1 and above?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Click on the Theme settings icon.
STEP 3
Scroll down and locate the Debutify Widgets tabs. You’ll find the following categories:
Debutify Free Widgets
Debutify Paid Widgets
Expand the relevant widget category by clicking on the arrow next to the tab name.
STEP 4
To enable a widget, check the box next to the widget name. To disable it, simply uncheck the box.
How to Enable or Disable the Debutify Theme Widgets between versions 6.0 and 7.0.2?
STEP 1
Sign in to your Debutify Theme Login Portal at platform.debutify.com, and navigate to the Widgets section.
STEP 2
Choose your widget from the Widgets menu, either by searching or filtering by category.
STEP 3
To enable or disable your chosen widget, click on the toggle switch.
STEP 4
To enable the widget, confirm by clicking Enable in the confirmation message that appears.
To disable the widget, confirm by clicking Disable in the confirmation message that appears.
Note: Enabling or disabling widgets on Debutify Login Portal is available only in Debutify Theme versions 6.0 to 7.0.2. Please make sure your theme is within this version range to access this feature.
How to Manage Split Video & Text Section Settings?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Go to Sections, scroll down, and then locate Template.
STEP 3
Click Add section, then choose Split Video & Text Section.
How to Customize Display Settings for Split Video & Text Section?
STEP 1
Check the boxes to determine where the section will appear:
Desktop: Display the section on desktop devices only.
Mobile: Display the section on mobile devices only.
Both Desktop and Mobile: Ensure the section is visible across all devices.
💡 Pro Tip: Consider Your Audience: If most visitors use mobile, enabling the section on mobile is essential. For complex layouts, you might prefer desktop-only visibility to ensure the best viewing experience.
STEP 2
Locate the Container size setting and choose between Default and Full:
Default: A standard container width that maintains a structured layout.
Full: Expands the section to the full width of the screen for a more immersive look.
💡 Pro Tip: Match Your Brand Aesthetic: A full-width design feels modern and dynamic, great for showcasing video content. The default width works well if you prefer a more traditional, centered layout.
STEP 3
Use the slider to adjust the Text section radius. Increasing the radius rounds the corners of the text section background, creating a softer, more approachable look.
💡 Pro Tip: Experiment with Styles: A slight corner radius can make your design look friendlier. If you’re aiming for a sleek, professional appearance, keep the radius small or at zero.
STEP 4
Go to the Section style setting and choose from the following background styles:
Blank Background: A clean, minimalist look for a simple and professional design.
Accent Background: Adds a splash of color or visual texture to make the section stand out.
Border Top: Features a decorative border at the top of the section for a subtle visual element.
Border Bottom: Features a decorative border at the bottom of the section for a subtle visual element.
Border Top and Bottom: Features a decorative border both at the top and bottom of the section for a subtle visual element.
💡 Pro Tip: Brand Consistency: Pick a style that complements your store’s branding. A blank background works well for a minimalist store, while an accent background can highlight a special promotion. If you just want a touch of detail, the border top option provides a subtle flourish.
How to Customize Video Settings for the Split Video & Text Section?
STEP 1
Upload a video in .mp4 or .mov format.
File size limit: Up to 1GB
Max resolution: 4096x2160 (4K)
💡 Pro Tip: Optimize for Performance: Compress your video while keeping quality high. A smaller file size means faster loading and a smoother user experience.
STEP 2
If you don’t upload a video file, you can paste a video URL from YouTube, Vimeo, or Daily Motion.
💡 Pro Tip: Use a Trusted Source: Choose a reliable video hosting platform with fast loading times and adjustable playback quality to improve user satisfaction.
STEP 3
Check the boxes to:
Autoplay video: Start the video automatically on load.
Show video controls: Allow users to pause, play, or adjust volume.
Balance Engagement & Usability: Autoplay can grab attention, but give users control to avoid frustration. Consider user preferences and GDPR guidelines (if applicable) for autoplaying media.
STEP 4
Go to Video height, and choose from:
Adapt to video: Matches the video’s original aspect ratio and size.
Large, Medium, Small: Pre-set sizes to fit different design needs.
💡 Pro Tip: Match Your Layout: If your store’s design is minimal, a smaller video height might look cleaner. For a feature product demo, go larger to make the video the focal point.
STEP 5
Use the slider to round the corners of the video section, from subtle curves to more pronounced edges.
💡 Pro Tip: Stay Consistent: If you’ve rounded corners on images or text sections elsewhere, match that style here for a cohesive brand identity.
STEP 6
Go to Video loading type, and choose from:
Lazy: Loads the video only when it enters the viewer’s viewport, improving initial page load speed.
Eager: Loads the video immediately when the page is opened.
💡 Pro Tip: Optimize Page Speed: Use lazy loading to enhance performance on pages with multiple media elements, ensuring visitors stay engaged.
STEP 7
Go to Video position to set position by device.
Desktop: Choose left or right placement relative to the text.
Mobile: Choose top or bottom placement for better vertical scrolling alignment.
💡 Pro Tip: Think Mobile-First: Mobile viewers may prefer the video on top for immediate engagement. On desktop, placing the video on the left (if it’s the main attraction) can draw eyes naturally as users read left to right.
STEP 8
Choose left, center, or right alignment for your text content to complement the video placement.
💡 Pro Tip: Readability Matters: Left alignment is often easiest to read, while center alignment can create a balanced, modern look. Select based on your content’s tone and length.
STEP 9
Select text section layout:
No overlap: Text and video are side-by-side or stacked without overlapping.
Overlap: Text partially overlaps the video section, creating a layered, dynamic design.
💡 Pro Tip: Highlight Key Messaging: Overlapping can draw attention to a key statement, but ensure the text remains legible against the video background.
How to Customize Section Padding for the Split Video & Text Section?
STEP 1
Use the slider to increase or decrease the top and bottom padding.
Increasing the padding adds more space around the content.
Decreasing it brings the content closer to the edges.
💡 Pro Tip: Maintain Balance: Avoid making the padding too tight, as it can make your section look crowded. Conversely, too much padding might create unnecessary blank space. Aim for a balanced look that complements the rest of your page.
How to Customize Heading, Text, and Button Blocks for the Split Video & Text Section?
When you first add the Split Video & Text section to your theme, it automatically comes with three predefined blocks— a heading, text, and button—to ensure the section is ready for basic content right away. If you need to provide your customers with more than one call-to-action or highlight multiple destinations, you can easily add an additional button block.
Heading: Perfect for titles or important announcements.
Text: Ideal for descriptions or supporting information.
Button: Great for calls-to-action leading customers to product pages, sign-up forms, or more content.
STEP 1
Customize the Heading block:
Select the Heading Block and input your desired heading text in the Heading field.
Use the slider to adjust the heading font size until it looks balanced and clear on the page.
💡 Pro Tip: Match Your Brand Voice: Choose a heading size that complements your store’s typography. Larger headings can emphasize importance, while smaller ones maintain a subtle, refined look.
STEP 2
Customize the Text block:
Select the Text Block you added and use the text field to add content, such as product details, a brief description of the video, or storytelling elements that engage your audience.
💡 Pro Tip: Keep It Concise & Readable: Short paragraphs or bullet points are easier to scan. Provide just enough information to pique interest and encourage deeper exploration elsewhere on your site.
STEP 3
Customize the Button block:
Button Label: Enter a clear, action-oriented label like “Shop Now” or “Learn More.”
Button Link: Paste the desired URL or use the search function to link to a product page, blog post, or other internal link.
Button Style: Choose from Default, Primary, or Outline. This determines how the button appears visually.
Show Icon with Button (Optional): Check the box if you want an icon to appear next to your button text.
Select an Icon: Click View all available icons to browse the icon library, or go to custom icon to upload your own. We recommend a 16x16 dimension SVG or transparent PNG for best results.
💡 Pro Tip: Make Your CTA Stand Out: Use a Primary button style for urgent calls-to-action and consider adding an icon that reinforces the button’s purpose. For example, a cart icon for “Add to Cart” or a play icon for “Watch Now.”
How to Select a Color Scheme for the Split Video & Text Section Widget?
STEP 1
Click Change under Color scheme to choose your preferred colors from the dropdown options provided.
Note: If your store does not have any color schemes set, please refer to the article How to Add and Customize Your Theme's Colors?
Final Step: Save Your Changes
After completing your customizations, click Save to apply the changes.