Layouts

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.

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

Why should I optimize for mobile devices?
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.
Is it possible to have a static image display before a video starts playing within the spotlight layout?
No, unfortunately this is not possible at this time.
I want to change the circular video at the top to a vertical video. How do I do this?
If by this you mean that you would like the video embed to appear, prior to any interaction with the video itself, as a vertical video instead of the circular teaser that exists in Stories, consider using either the Carousel or Overlay layouts.
Can I customize the alignment of the stories embed such that it appears from left-to-right, similar to Instagram's stories UX?
Yes, you can customize the alignment via the Customize Theme sidebar that appears once you click Preview within the Novel studio.
Which pages are best for the Stories layout?
The stories layout fits well on product and collections pages, providing an immersive experience for users.