Overlay
Overview
Explore the functionality of overlay layouts in Novel, an embed that is a great complement to your on collections and product pages.
Overlay Layout UX
Overlay User Experience
Viewport | Appearance | Visibility | Interaction |
|---|---|---|---|
Desktop | Small rectangular video overlay pinned at the bottom left or right. | Persists as users scroll, prior to interaction. | Full screen immersive display when clicked. |
Mobile | Small rectangular video overlay pinned at the bottom left or right. | Persists while scrolling, prior to interaction. | Full screen immersive display when tapped |
Versatility
Overlay layouts are ideal for collection pages, as they offer a persistent, always visible complement to the page, while being non-intrusive and complementary the assortment of products being presented to the user.
Unlike carousel layouts, which are better suited for homepages to display multiple videos side by side, overlay layouts do not require extensive horizontal space. This makes them suitable for collection pages where space is limited.
More Leverage with Fewer Videos
This layout is especially beneficial for brands with fewer videos per product. The overlay layout allows you to add a small shoppable video to the side of your product page. This video can show a demonstration or an up-close view of the product, making it easier for customers to understand its features.
Customize Sidebar
Novel allows you to customize the appearance of your shoppable video embed in the the Overlay layout via the Customize Theme sidebar panel that appears in the studio when you click the green Preview button on the top right of the screen.
Attribute | Values/Options | Description |
|---|---|---|
Brand Color | Hex value e.g. #304c34 | Sets the branding color for elements within the overlay. |
Background Color | Hex value e.g. #1a440a | Sets the background color for the overlay; can be transparent or color-coded. |
Overlay Position | Bottom Left, Bottom Right | Determines the position of the overlay on the screen, typically pinned to a bottom corner. |
Interaction Pattern | Clickable, Pinned in Position | User can interact with the overlay by clicking; it stays pinned in position while scrolling, when clicked it launches into a full screen view. |
Advanced Customization | Text Field | Input any CSS for advanced customization. |
Advanced Customization
Novel allows you to customize the appearance of your shoppable video embed in the Spotlight layout via the Customize Theme sidebar panel that appears in the studio when you click the green Preview button on the top right of the screen. View our Advanced Customization of Layouts (CSS) guide to review a set of potential snippets for your use-case.
Please note that in an effort to ensure that your Novel embeds are optimized for performance across all devices, mobile and desktop, the ability to modify sizing is restricted. There is often flexibility to modify sizing of your Novel embeds within your page layouts within Shopify. Please view our video sizing issues guide for more information.
Other Layouts
If you are interested in trying other layouts, view our dedicated guides:
Frequently Asked Questions
Overlay layouts work best on collection pages and product pages.
No, unfortunately this is not possible at this time.
Overlay layouts are flexible; you can use them even if you don't have a large number of videos per product.
Overlay layouts are more suited for collection and product pages, while carousel layouts work better on homepages to showcase multiple videos side by side (minimum 5).