Narrative

Narrative is a boutique theme designed for visual storytelling.

Narrative

Narrative is ideal if you want to:

  • use images and video to tell a story about your brand
  • deliver a strong message of your store's vision, mission, or values
  • highlight the unique design of a single product or a small inventory

Get Narrative from the Shopify Theme Store ›

What makes Narrative unique is its focus on imagery to tell a story. By default, the home page has a full-width slideshow, an image with text, and a video. This layout has a strong visual impact and lets you tell your brand story without a lot of text.

To learn more about Narrative's default layout, including how to customize it, click the Sections button. To learn more about the settings available to customize your store, including the checkout page, colors, and typography, click the General settings button.

You can create content and organize the layout of your online store from the Customize theme page of your Shopify admin.

Common sections

Every theme includes two sections that appear on every page:

  • the Header section, which is displayed at the top of the page, and typically includes your logo and navigation menus
  • the Footer section, which is displayed at the bottom of the page, and typically includes "Search", "About Us", and "Log In" links.

You can edit the header and footer sections from any page in the theme editor. Unlike other section types, the Customize theme page displays the header and footer sections regardless of which store page you are viewing in the theme editor.

Narrative includes several unique settings for header and footer content.

Customize the header section

The header section includes the content that appears at the top of every page in your store. Narrative lets you select two navigation menus that customers can access by clicking a navigation icon:

Narrative header

You can also change the look of your store's header by making it transparent, which means it uses the same background as the section below it:

Transparent header

Note

The transparent header will only appear on the home page. The other pages in your store will display the header without a transparent background.

To customize the header section:

  1. Click the Sections tab.

  2. Click the Header section.

  3. In the Logo image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  4. In the Custom logo height (in pixels) field, enter the pixel height of your logo.

  5. From the Shopping cart icon list, choose whether you want to display a bag or cart logo in your header.

  6. If you want to make your store's header transparent, then do the following:

    1. Click Enable transparent header on the home page.
    2. Choose an image to display over the transparent background. You might need to select a different logo than the one you selected to display on your header page. For example, you might need a white logo to display against a darker background.
    3. Click the Transparent header icons color palette to select a color for the logo image and navigation and cart icons.
  7. From the Primary navigation list, select the primary menu that will display when a customer clicks the navigation icon:

    Primary menu

  8. From the Secondary navigation list, select the secondary menu:

    Secondary menu

  9. Click Save.

Your store's footer is the content that always appears at the bottom of every page in your store:

Footer

With Narrative, you can:

  • add a second menu
  • add a newsletter signup form
  • show or hide payment icons that show the payment gateways you accept
  • show or hide social media icons.
  1. Click the Sections tab.

  2. Click the Footer section.

  3. If you want to display social media icons that link to your social media accounts, then check Show social icons. Click here to learn how to provide your social media account links.

  4. If you want to display payment gateway icons, such as Mastercard or Paypal, then check Show payment icons.

  5. If you want to add a menu to your footer, then do the following:

    1. Click Add content, and then click Menu.
    2. From the Footer menu, select the menu you want to display.
  6. If you want to add a newsletter link to your footer, then do the following:

    1. Click Add content, and then click Newsletter.
    2. In the Heading field, enter the text you want to appear. By default, this is "Sign up for updates".
    3. In the Button text field, enter the text you want to appear on the button. By default, this is "Ok".
  7. Click Save.

Set the layout of your home page

By default, Narrative includes 6 home page sections:

You can add more sections, remove any of these sections, and rearrange sections to create a custom home page. Or, you can simply update the default home page sections with your unique store content.

Customize the slideshow

At the top of Narrative's home page is a full-screen slideshow that rotates through a selection of images and videos. You can choose how buttons and text will appear on the slideshow, and you can add up to 5 images or videos to display.

Tip

When selecting images to use in your slideshow, keep in mind that images will get cropped in smaller screen sizes. As a best practice, we recommend that you try viewing your image by using different screen sizes, including mobile devices, and that you try using different image alignments to make sure important parts of your image don't get cropped. Also, because Narrative relies heavily on images, we also recommend that you use unique, high-quality images to make your store stand out.

To entice your customers to click through the slideshow, Narrative displays buttons along the bottom of the slide show. You can provide your own label on these buttons and a title for each slide:

Narrative slide titles

Caution

Some mobile devices will not support video playback. You can choose a fallback image to display when video playback is not supported.

To add a slideshow:

  1. Click Sections.

  2. Click Slideshow.

  3. In the Image area, click Select image and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click Upload image.
  4. In the Button labels field, enter the text you want to appear on the slideshow buttons.

  5. To show an overlay, which applies a color filter to the slideshow, check Show overlay.

  6. Select an Overlay color and Text color by clicking the color palettes.

  7. From the Opacity list, select how transparent you want the color overlay to be.

To add an image slide:

  1. In the Content area, click Add content.

  2. Click Image slide.

  3. In the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.

      Note

      The recommended image size is 1200px to 2000px width, and 400px to 600px height.

  4. Choose how you want to align the image in the slideshow by selecting a position from the Image alignment list.

  5. Enter a new title for this slide in the Heading field. The title appears over the slideshow image.

    Tip

    If you do not want to display text on your slide, leave the Heading field blank.

  6. In the Slide title field, enter the text for the slide title that will display at the bottom of the slideshow.

  7. To add a link to the button on your slide, do one of the following:

    • To link to a page in your store, click in the Button link field and select a page.
    • To link the heading text to a URL, paste the URL in the Button link field.
  8. Click Save.

To add a video slide:

  1. In the Content area, click Add content.

  2. Select Video slide.

  3. In the Video link field, enter the video's URL address.

  4. To upload an image that will display if autoplay is not supported on a mobile device, in the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  5. In the Heading field, enter the text you want to appear over the video. The heading will be updated with the heading you provide.

  6. In the Slide title field, enter the text for the slide title that will display at the bottom of the slideshow.

  7. To add a link to the button on your slide, do one of the following:

    • To link to a page in your store, click in the Button link field and select a page.
    • To link the heading text to a URL, paste the URL in the Button link field.
    • Click Save.

Image with text

Narrative includes an Image with text section that lets you show an image with a custom message to your customers.

You can crop your image into a circle:

Image with text circle

or into a square:

Image with text square

You can also choose not to crop the image at all. Instead, you can select an image alignment to make sure that important parts of the image don't get cropped when viewed from mobile devices. For example, if you never want the bottom of your image cropped because it shows the product you are selling, then you can choose a Bottom center alignment to make sure that part of the image doesn't get cropped.

  1. Click the Sections tab.

  2. Click Image with text.

  3. From the Section spacing list, select how big you want this section to be, either Small, Medium, Large, or Extra large.

  4. If you want to add a background color, then click the Background color swatch and select a color from the palette.

  5. To add the image, in the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  6. If you want to crop images into a shape, then select either Circle or Square from the Image crop list.

  7. If you do not want to crop images into a shape, then do the following:

    1. Select None from the Image crop list.
    2. Select how you want to align the image from the Image alignment list. For example, selecting "Top left" places the image in the top left of the section area.
  8. To add the text, do the following:

    1. In the Heading field, type the heading text you want to display.
    2. In the Text field, type the text you want to appear below the heading.
    3. If you want to display the button as a transparent button with a solid outline, then check Use secondary button style.
    4. In the Button label field, enter the text you want to appear on the button.
    5. In the Button link field, paste a link to a URL, or click in the field to select a page from your store.

To customize the layout:

  1. In the Layout area, from the Desktop layout list, select whether you want the image to the left or the right of the text when viewed from a desktop.

  2. From the Mobile layout list, select whether you want the image to be above or below the text when viewed from a mobile device.

The Gallery section is a series of up to 3 images. You can select an icon from a list of 13 custom icons to display over each image. Optionally, you can link each image to a URL or a page in your store:

Gallery section with three side-by-side pictures of cats.
  1. Click the Sections tab.

  2. Click Gallery.

  3. In the Content area, click Image.

  4. To add the image, in the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  5. Select how you want to align the image from the Image alignment list. For example, selecting "Top left" places the image in the top left of the section area.

  6. From the Icon list, select an icon to display over the image.

    Tip

    If you do not want to display an icon, select "None" from the Icon list.

  7. In the Text area, enter the text you want to appear on each image in the Caption field.

  8. If you want the caption text to link to a page, then do one of the following:

    1. To link the text to a page in your store, click in the Link field and select a page in your store.
    2. To link the text to a website, enter the site's URL in the Link field.
  9. Click Save.

Image with text overlay

You can display a custom message to your customers on your home page. Your message could describe a product, share an announcement, or welcome customers to your store.

To customize the Image with text overlay section:

  1. Click the Sections tab.

  2. Click Image with text overlay.

  3. From the Section spacing list, select how big you want this section to be, either Small, Medium, Large, or Extra large.

To add a background image:

  1. In the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  2. Select how you want to align the image from the Image alignment list. For example, selecting "Top left" places the image in the top left of the section area.

To add the text:

  1. In the Text area, enter a title for this section in the Heading field.

  2. In the Text field, enter the text you want to appear in this section.

  3. From the Text size list, select a size for the text, either Medium or Large.

To add a button:

  1. If you want to display the button as a transparent button with a solid outline, then check Use secondary button style.

  2. In the Button label field, enter the text you want to appear on the button.

  3. In the Button link field, paste a link to a URL, or click in the field to select a page from your store.

To apply an overlay:

  1. In the Overlay area, check Show overlay.

  2. Click the Overlay color swatch to select a color for the image overlay.

  3. Click the Text color swatch to select a color for the text.

Tip

If the background image is dark, picking a light text color makes it much easier to read.

4. From the Opacity list, select a level of transparency for the image overlay.

The featured slider lets you showcase more product information without forcing the customer to leave the home page:

You can show product features, a new collection, or variants of a product. The slideshow works best with a small number of slides since page scrolling is locked while browsing the set on desktop.

When viewed from mobile devices, the featured slider requires a tap or pinch action to be opened and viewed. To entice your mobile customers to open the featured slider, use an attractive cover image and use text with a "call to action".

You can add up to 5 slides to a featured slider.

  1. Click the Sections tab.

  2. Click Featured slider.

To add an image slide:

  1. In the Content area, click Slide.

  2. Click the Background color swatch to select a background color from a palette.

  3. In the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  4. In the Heading field, type the text you want to display over the slide.

  5. In the Button label field, type the text you want to appear on the button.

  6. In the Button link field, paste a link to a URL, or click in the field to select a page from your store.

To customize the feature slider settings:

Note

The featured slider settings are applied to all slides in the featured slider section.

  1. If you want to display the slide buttons as a transparent button with a solid outline, then check Use secondary button style.

  2. If you want to change the text color, then click the Slide heading color swatch to select a color from a palette.

  3. In the Cover settings area, select a cover image for the featured slider section by clicking Select image, and then doing one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  4. From the Header list, enter the text you want to appear on the cover image.

  5. From the Heading position list, select whether the heading text will display on the left or in the center of the cover image. This setting only applies to desktop views.

  6. In the Overlay area, check Show overlay.

  7. Click the Overlay color swatch to select a color for the image overlay.

  8. Click the Text color swatch to select a color for the text.

    Tip

    If the background image is dark, picking a light text color makes it much easier to read.

  9. From the Opacity list, select a level of transparency for the image overlay.

You can feature a collection on your home page. Featuring collections can help you promote sales and new collections.

  1. Click the Sections tab.

  2. Click Featured collection.

  3. From the Collection list, select the collection you want to display.

  4. Check Enable image spacing to increase the space between images.

  5. In the Heading field, enter the text you want to appear at the top of this section. By default, this text is "Featured collection".

  6. If you want to display the vendor or brand name beneath each product picture, then check Show product vendors.

  7. If you want to let customers see all products in the collection, then check Show 'View all' button. When a customer clicks this button, the collection page will open with all products displaying.

  8. If you want the View all button to be transparent with a solid outline, then check Use secondary button style.

  9. From the Products per row list, select the number of products to display in each row.

  10. From the Rows list, select the number of product rows to display.

  11. Click Save.

Map

You can include a map on your home page. A map can help you promote your shop's location and business hours.

To add a map:

  1. Click the Sections tab and select Add section.

  2. Click Map.

  3. In the Overlay Heading field, enter the text you want to appear at the top of this section.

  4. In the Text address and hours field, enter your company's business information.

  5. In the Map address field, enter the address of your business.

  6. In the Google Maps API Key field, enter a valid API key.

  7. In the Image field, upload or select an image that will be displayed if there is a problem with the map section loading. Alternatively, you can skip adding an API key and this image will always be visible.

Show blog post dates

With Narrative, you can show the date that a blog post was published.

  1. Navigate to your blog page in the preview area of the theme editor.

  2. Click Sections.

  3. Click Blog pages.

  4. Check Show date.

  5. Click Save.

Set the layout of your collection pages

You can set up your collection pages to allow your customers to filter and sort through products in the collection. You can also choose how many products to display.

To set the layout of your collection pages:

  1. Navigate to a collection page in the theme editor.

  2. Click the Sections tab.

  3. Click Collection pages.

  4. Select the number of products per row, and number of rows per page from the lists.

  5. If you sell products from different brands or vendors, then check Show product vendor to display the vendor's name below the product image.

  6. If you want to display a collection image at the top of the page, then check Show collection image.

  7. Check Enable tag filtering to let your customers filter the collection by product tag.

  8. Check Enable collection sorting to display a sorting menu.

  9. Click Save.

Set the layout of your product pages

For your product pages, Narrative lets you set the product image size, display quantity selectors and variant labels, and choose whether to show social media buttons.

To set the layout of your product pages:

  1. Navigate to a product page in the theme editor.

  2. Click the Sections tab.

  3. Click Product pages.

  4. If you want to display a quantity drop-down menu, then check Show quantity selector.

  5. If you want to display the variant label, for example "Size", then check Show variant labels.

  6. If you want to display the brand or vendor name, then check Show product vendor.

  7. If you want to display a gallery of variant images, then check Show variant images in gallery.

  8. If you want to display social media sharing buttons, then check Show social sharing buttons.

  9. Click Save.

Enable cart notes on your cart page

With Narrative, you can let your customers add notes to their order:

Narrative cart notes
  1. Navigate to your cart page in the theme editor.

  2. Click the Sections tab.

  3. Click Cart page.

  4. Check Enable cart notes.

  5. Click Save.

You can customize your online store's colors, fonts, and social media links on the Settings tab. At any time, you can reset your theme's settings to their default value.

Colors

You can select the colors that will be used for text and backgrounds throughout your store.

To set color options:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Colors.

  4. For each type of text or background, click the color swatch to select a new color from a palette.

    Tip

    Clicking the checkered square sets the color to transparent:

    Color picker transparent

  5. Click Save.

Typography

With Narrative, you can change the font and font size of the text in your store.

To set typography options:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Typography.

  4. In the Global section, select the font size for your store's text from the Base size list.

  5. In the Headings section, select the font for heading text in your store.

  6. If you want to heading text more visible, then check Bold headings.

  7. In the Body text section, select the font for body text in your store.

  8. Click Save.

Cart drawer

You can show a cart drawer instead of a full cart page. A cart drawer slides out from the right side, and lets your customers view their cart without leaving the page. You can show a notes field where customers can provide instructions on the cart page.

To set cart drawer options:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Cart.

  4. To display the cart as a drawer, check Show cart drawer.

  5. To let your customers provide instructions in the cart, check Show cart note.

  6. Click Save.

Social

Narrative includes several options for integrating your online store with social media, including Facebook, Twitter, and Pinterest.

To enable social media settings for Narrative:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Social.

  4. Check Share on Facebook to enable the Facebook sharing button for products or blog posts.

  5. Check Tweet on Twitter to enable the Twitter sharing button for products or blog posts.

  6. Check Pin on Pinterest to enable the Pinterest sharing button for products or blog posts.

  7. Enter the URLs of your social media sites in the fields provided.

  8. Click Save.

Favicon

You can upload a favorites icon, or a "favicon", which can help brand your online store by displaying your logo in the following locations:

  • your web browser tab
  • your web browser's history
  • icons on your desktop
  • next to your online store name when it is bookmarked.

The best favicon image size for Narrative is 32 x 32px.

To upload a favicon:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Favicon.

  4. In the Favicon image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  5. Click Save.

Checkout

You can customize your checkout page to include the following:

  • a custom image banner at the top of the page
  • your store logo
  • a background image or color in the main content area
  • custom text fonts and colors.

To see your changes as you apply them, go to your checkout page in the theme editor.

To access checkout page settings:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Checkout.

To add a banner image:

  • In the Banner area, click Select image, and then do one of the following:
    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  1. In the Logo area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  2. From the Position list, select where you want the image to display, either to the right, left, or center.

  3. From the Logo size list, select a logo size.

To change the background of the checkout page:

You can display background image on your checkout page, or you can choose a background color. For background images, the image will display in a grid pattern.

  1. In the Main content area area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
    • Click the Background color swatch to select a new color from a palette.
  2. From the Form fields list, select whether fields will be white or transparent.

To change the background of the Order Summary page:

  1. In the Order summary area, click Select image, and then do one of the following:
    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
    • Click the Background color swatch to select a new color from a palette.

To set font options:

  • In the Typography area, select the font to use for heading and body text from the lists.

To set color options:

  • In the Colors area, click the Accents, Buttons, or Errors color swatch to choose a new color from a palette.

Change theme style

You can reset your theme's general settings to their default values. When you reset your theme's style, any changes you have made on the General settings tab will be lost, but you will not lose content such as text and images.

  1. Click the General settings tab.

  2. Click Change theme style.

  3. Click the button below Change theme style. The name of this button is typically the theme name.

  4. Click Change style.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free