Stories
Overview
For many Shopify store owners, 90% of traffic comes from mobile devices. The stories layout is the most mobile-native layout, providing an immersive and engaging experience that is familiar to Instagram and TikTok users.
Stories Layout UX
Viewport | Appearance | Interaction Pattern |
|---|---|---|
Desktop | Round icons (thumbnails) in a horizontal row at the top | Users click to view short-form videos |
Mobile | Round icons (thumbnails) in a horizontal row at the top | Swipe left or right through the stories, swipe up/down to view next/previous video |
When to Use Stories
Product Pages
The stories layout fits well on product pages, creating a visually appealing and interactive environment for users to explore products. Each video is shoppable, making the transition from viewing to purchasing seamless.
NuFACE, for instance, uses the Stories layout to display vertical video thumbnails showcasing real customers using their products. This layout is visually attractive and engages users by integrating short-form videos, such as TikToks and Reels.
Collection Pages
Stories also promote product discovery and can be effectively leveraged on collections pages to provide a stream of mobile-native content. Medicube has a best-in-class execution of the stories layout as applied on their collections page.
Customize Sidebar
There are certain visual elements that you can customize in how the video appears on your page when embedded. You can customize the appearance of the Stories layout of your shoppable video embed in 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 |
|---|---|---|
Thumbnail Size | Tiny, Small, Normal, Big, Huge | The size of the thumbnails can be adjusted to fit the site’s aesthetics, ranging from tiny to huge. |
Thumbnail Border Width | None, Slim, Thin, Normal, Medium, Thick | The width of the border around the thumbnails can vary. |
Background Color | Hex value e.g. #1a440a | Sets the background color for the stories section. |
Transparent Background | Checked/Unchecked | Option to make the background transparent. |
Brand Color | Hex value e.g. #304c34 | Sets the primary brand color for highlight indicators. |
Font Style | Match Shopify Theme, Google Fonts | Option to match the Shopify theme's font or choose a Google Font. |
Font Weight | Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold, Black | The weight (thickness) of the font used. |
Headline Color | Hex value e.g. #000000 | The color used for text headlines. |
Alignment | Center, Left, Right | Aligns the stories thumbnails to the center, left, or right of the container. |
Interaction Pattern | Swipe Up/Down (Full Viewport), Tap to Navigate | Users can swipe up/down to view more content, with stories occupying the full viewport for focus, or tap thumbnails to navigate directly. |
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
About 90% of traffic comes from mobile. Ensuring your layout looks good on mobile devices enhances user experience and can improve engagement and conversion rates.
No, unfortunately this is not possible at this time.
Yes, you can customize the alignment via the Customize Theme sidebar that appears once you click Preview within the Novel studio.
The stories layout fits well on product and collections pages, providing an immersive experience for users.