A narrative structure, designed to convey the appeal of the brand/product. A product that is displayed in the best possible light, to be desirable through rich content and full screen images. A charming experience to hook the user. In short, we wanted to create a highly polished theme that would make it easy for merchants to tell their brand or product story. This emotional connection is one of the most powerful tools a trader can use. Sections and wireframes The Narrative homepage has been designed for the new themed sections of the Shopify online store. Theme sections are design elements, like slideshows and product images, that can be easily added, arranged, and removed.
Put together in a logical linear path, these sections allow merchants to create their own story. Building Narrative Shopify New Storytelling Theme: Themed Sections We created different demo stores to ensure the scalability of this theme and to test the design in different styles. Content from three merchants—Ratio, No. 22, and Upton—was used. These merchants have the following Indonesia Email List in common: High quality products Small inventories or individual products with variants Strong branding, visual design and photography. Below is the Narrative home page with the fantastic photo of No. 22. This company carefully handcrafts high-quality titanium bikes. To guarantee the brand’s commitment to its customers, the values of the company and the uniqueness of the product must be at the center of the shopping experience.
Can You Adapt?
We believe that Narrative will help merchants whose customers need to know the specific value of a product before making a secure purchase. Building Narrative Shopify New Storytelling Theme: Bicycle (A) The main section can feature a carousel with quick links or, as shown above, a single catalog shortcut , overlaid on an inspirational video background. (B) Some content may need to be present on the home page, not related to ‘the story’. This section serves that purpose. The frame highlights promotional content and helps it stand out without breaking the overall look. (C) The scrolling section is a key feature of the theme. Allows you to explore the available variants of a specific product. (D) It is also possible to display the products in a grid.
A Beginner’s Guide to Building Shopify Themes with Sass — Part 1: Getting Started with Sass. Form and function: the challenges of narrative. We wanted to move away from the traditional hero slideshow. And instead include a special featured slideshow. Which gives Narrative a distinctive touch. Both the hero section and the featured slider section proved difficult. To design on a responsive scale. the hero section Building narrative Shopify. New theme for storytelling: Ratio Clicking on a link changes the background image and displays a button. Allowing the user to access the featured product page. Swapping the images on hover would have created. A nasty flickering effect. Unsurprisingly, the top hero section is important. Our goal was to create a design with visual impact. Not only to give our merchants a great way to showcase products. But also to stand out from more conventional homepage sliders.
How Do You Make the Experience
In this case, the seamless transition from desktop to mobile was the biggest challenge. Moving the cursor sideways changes the position of quick links and provides visual feedback on the scrolling state. Such an experience cannot be replicated on a touch screen, so multiple versions had to be iterated on. Because this section will be customizable (with options for a video background, single image, multiple images, single link, and multiple links), each scenario had to be explored. Building narrative Shopify new theme for storytelling: Ratio 2 One of many interactive mockups from Tenet that tackles mobile slideshow. When a video background appears (on desktop ), the mobile version requires an alternate image because autoplay is not supported on some devices. The principle was useful when creating dynamic mockups that we could play with on our mobile devices, like the one above.
