Sections for Narrative

Theme content is built using sections. Sections are customizable blocks of content that determine the layout and appearance of different pages on your online store.

Static sections are sections that appear in predetermined locations in your online store. These sections can't be removed or rearranged. Static sections might include headers, footers, navigation sections, or content sections on pages like product pages and collection pages. For example, the Product section determines the appearance of each product page on your online store.

Dynamic sections are optional sections that you can use to customize the layout of your home page. On your store's home page, you can add, rearrange, and remove dynamic sections to create the page layout. You can have up to 25 dynamic sections on your home page.

You can learn about Narrative's unique selection of sections and how to customize them to suit your business.

Static sections

Narrative includes the following static sections:

Dynamic sections

Narrative includes the following dynamic sections:

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.

You can also change the look of your store's header by making it transparent.

Customize the header

  1. Click the Header section.

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

    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Burst, 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.
  3. In the Custom logo height (in pixels) field, enter the pixel height of your logo.

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

  5. 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.
  6. From the Primary navigation list, select the primary menu that will display when a customer clicks the navigation icon.

  7. From the Secondary navigation list, select the secondary menu.

  8. Click Save.

Add an announcement bar

You can add an announcement bar in the header that you can use to show a message to your customers. Your message is customizable and might include contact information, information about store events or sales, or a store slogan.

  1. Click Header.

  2. In the Announcement area, check Show announcement.

  3. Enter the text for your announcement.

  4. Optional: Enter a URL to add a link to your announcement.

  5. Optional: From the Icon menu, select an icon to display in the announcement bar. The icon uses the same color as your announcement text.

  6. To change the color of the announcement bar background, click the Bar color swatch and choose a color.

  7. To change the color of the announcement text, click the Text color swatch and choose a color.

  8. Click Save.

Slideshow

You can create a home page slideshow that rotates up to five image or video slides.

It's best to use high resolution images for your slides. Use images that are 4000 x 2200 px or larger, but don't exceed Shopify's upload limits.

Because the size and shape of the slideshow depends on the size and shape of the customer's device, your slideshow images will be cropped on some screens. Try to use images that have a focal point in the middle so that the important part of each image is always visible.

To learn more about the best practices for slideshow images, see Uploading images.

The slideshow section includes the following settings:

  • Slide height - Set the height of the slideshow. Select Adapt to first image slide height to base the height of your slideshow on the height of your first image.
  • Center buttons - Set the position of the buttons on your slides.
  • Show overlay - Add a layer of color over your slides. An overlay can make slideshow text easier to read.
  • Overlay color - Set the color of your overlay.
  • Opacity - Set the opacity of your overlay.
  • Image - Add an image to display in your slideshow.
  • Image alignment - Choose the most important area of the image to focus on in the slideshow.
  • Video link - Add the YouTube link for your video.
  • Cover image - Add a cover image for your video slide. The cover image shows when the video isn't playing.
  • Heading - Add a heading to your slide.
  • Slide title - Add a title for your slide. This is displayed at the bottom of the slideshow when you have more than one slide.
  • Button label - Add a button with a text label to your slide.
  • Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.

Add a slideshow to your home page

  1. Click Add section.
  2. Click Slideshow, and then click Select.
  3. Use the settings to customize your slideshow.

  4. Click Save.

In the footer section, you can edit the content that appears at the bottom of every page in your store. You can add the following features to your footer:

  • social media icons
  • payment icons
  • a newsletter signup
  • a parallax scrolling effect
  • up to two menus
  1. Click Footer.
  2. Add social media icons to your footer by checking Show social icons. You can link the icons to your social media accounts from the Social settings.
  3. Add payment icons, such as Mastercard or PayPal, to your footer by checking Show payment icons. This area displays the icons that are associated with the payment provider that you have enabled in the payment settings section of your admin.
  4. To add a newsletter signup to your footer, do the following steps:

    1. Check Show newsletter signup.
    2. Enter a heading for your newsletter signup in the Heading field. The default heading is "Sign up for updates".
    3. Enter a subheading for your newsletter signup in the Subheading field. The default subheading is "Promotions, new products and sales. Directly to your inbox.".
  5. To add a menu to your footer, do the following steps:

    1. Under Content, click Add menu.
    2. To edit the default menu, click Edit menu. To change to a different menu, click Change, and then select an existing menu or click Create menu.
  6. Click Save.

Product pages

The Product pages section is the main customizable section for product pages. You can customize this section using the following options:

  • Show quantity selector - Let users specify a quantity to add to their cart.
  • Show variant labels - Show variant labels, such as "Size" and "Color" above variant drop-down menus. The variant labels that appear are based on the variant option names for the product.
  • Show product vendor - Show the product brand or vendor. For a brand or vendor to show, you need to add a vendor to the product.
  • Show dynamic checkout button - Let customers skip the cart and go directly to the checkout from the featured product section.
  • Show social sharing buttons - Show buttons that customers can use to share products on social media. The sharing options that appear are controlled by your theme settings.

Media

  • Enable video looping - Loop product videos. If this option is deselected, a play button appears on videos when they end.
  • Hide variant media in gallery - Select this option to prevent variant media from showing in the gallery at the bottom of the page. When this option is enabled, the only media that show are the ones that are not attached to a variant.

Edit Product pages settings

  1. Select Product pages.
  2. Click the Product pages section.
  3. Use the settings to customize your product pages section.
  4. Click Save.

Product recommendations

You can display recommended products on product pages to make it easier for customers to discover other products that might interest them.

Enable product recommendations

  1. Select Product pages.

  2. Click the Product recommendations section.

  3. Check Show dynamic recommendations to show product recommendations on your product pages.

  4. Optional: To change the title that appears above the recommended products, enter a new one in the Heading field.

  5. Optional: To show or hide the vendors in the product descriptions, use the Show vendor checkbox.

  6. Optional: Add spacing between product images by selecting Enable image spacing.

  7. Click Save.

Collection

The Collection section is the main customizable section for collection pages.

The Collection section includes the following settings:

  • Enable tag filtering - Add a filter that customers can use to view products in a collection with a certain tag. For the filter to be displayed on a collection page, you need to add tags to the products in that collection.
  • Enable collection sorting - Add a menu that customers can use to sort a collection in different ways, such as alphabetically or by price.
  • Grid style - Set the layout of your products on the page.
  • Show collection image - Show the collection image at the top of the collection page.
  • Enable image spacing - Select this option to increase the space between images.
  • Show product vendor - Display the product brand or vendor.

Customize your collection pages

  1. Select Collection pages.
  2. Click the Collection pages section.
  3. Use the settings to customize your collection pages section.
  4. Click Save.

Cart page

The Cart page section is the main customizable section of your online store's cart. In the cart page, you can enable cart notes to let your customers include special instructions with their orders.

Enable order notes

  1. Select Cart.
  2. Click the Cart pages section.
  3. Select Enable cart notes.
  4. Click Save.

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

The Featured collection section includes the following settings:

  • Collection - Choose a collection to display in the section.
  • Enable image spacing - Select this option to increase the space between images.
  • Heading - Add the text that appears above the products in the collection. The default text is Featured collection.
  • Show product vendors - Show the vendor for each product below the product title.
  • Show 'View all' button - Select this option to add a View all button below the last row in the section. Customers can click this button to view the entire collection.
  • Use secondary button style - Display the button as a transparent button with a solid outline.
  • Grid style - Set the layout of your products on the page.
  • Products per row - Choose the number of products to display in each row in the section.
  • Rows - Choose the number of rows of products to display in the section.
  1. Click Add section.
  2. Click Featured collections, and then click Select.
  3. Click Select collection, and then select a collection from the Collection list.
  4. Use the settings to customize your featured collection section.
  5. Click Save.

The Gallery section is a series of up to three 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.

The image with text section includes the following settings:

Content

  • Image - Add an image to display in the section.
  • Image alignment - Choose how you want to align the image in the section. If you do not want to display an icon, select "None" from the Icon list.
  • Icon - Add an icon to display on the image.
  • Caption - Enter text to display on the image.
  • Link - Paste a link to a URL, or click in the field to select a page from your store.

Settings

  • Section height - Choose how big you want this section to be.
  • Show overlay - Add a layer of color over your image. An overlay can make the text easier to read.
  • Overlay Color - Set the color of the overlay.
  • Text color - Set the color of your heading and text. If the background image is dark, picking a light text color makes the text easier to read.
  • Opacity - Set the opacity of your overlay.
  1. Click Add section.
  2. Click Gallery, and then click Select.
  3. To add the image, in the Image area, click Select image, and then do one of the following:
    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Burst, 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.
  4. Use the settings to customize the gallery section.
  5. 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 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.

The image with text section includes the following settings:

Settings

  • Section height - Choose how big you want this section to be.
  • Background color - Set a background color for the section.

Image

  • Image - Add an image to display in the section.
  • Image style - Choose the crop style for the image. Choose None to leave the image uncropped.
  • Image position - Choose the alignment of the image within the frame.

Text

  • Heading - Add a heading to the section.
  • Text - Add text to the section.
  • Use secondary button style - Display the button as a transparent button with a solid outline.
  • Button label - Add a button with a text label to the section.
  • Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.

Image alignment

  • Desktop - Choose whether the image in the section appears on the left or right when viewed from a desktop computer.
  • Mobile - Choose whether the image in the section appears first or second when viewed from a mobile device.

Add an image with text to your home page

  1. Click Add section.
  2. Click Image with text, and then click Select.
  3. In the Image area, click Select image, and then do one of the following:
    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Burst, 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.
  4. Use the settings to customize your image with text section.
  5. Click Save.

Image with text overlay

You can display a custom message to your customers on your home page using the image with text overlay section. Your message could describe a product, share an announcement, or welcome customers to your store.

The image with text overlay section includes the following settings:

Settings

  • Section spacing - Choose how big you want this section to be, either Small, Medium, Large, or Extra large.
  • Image - Add an image to display in the section.
  • Image alignment - Choose how you want to align the image in the section.

Text

  • Heading - Add a title to your section.
  • Text - Add body text to your section.
  • Text size - Set the size of the heading and body text.
  • Use secondary button style - Display the button as a transparent button with a solid outline.
  • Button label - Add a button with a text label to the section.
  • Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.

Overlay

  • Show overlay - Add a layer of color over your image. An overlay can make the text easier to read.
  • Overlay Color - Set the color of the overlay.
  • Text color - Set the color of your heading and text. If the background image is dark, picking a light text color makes the text easier to read.
  • Opacity - Set the opacity of your overlay.

Add an image with text overlay to your home page

  1. Click Add section.
  2. Click Image with text overlay then click Select.
  3. In the Image area, click Select image, and then do one of the following:
    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Burst, 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.
  4. Use the settings to customize your section.
  5. Click Save.

Newsletter

You can add a newsletter signup to your home page. This lets you collect customer email addresses for email marketing campaigns. You can learn more about email marketing on the Shopify blog.

Add a newsletter signup to your home page

  1. Click Add section.
  2. Click Newsletter, and then click Select.
  3. Enter a heading for your newsletter signup in the Heading field.
  4. Enter a subheading for your newsletter signup in the Subheading field.
  5. Enter a success message in the Success message field. Customers see the success message after they submit their email address. The default success message is "Thanks for subscribing".
  6. Set the text color for the newsletter signup field by clicking the Text color swatch and choosing a color.
  7. Set the background color for the newsletter signup section by clicking the Background color swatch and choosing a color.
  8. Click Save.

Map

You can add a Google map to your home page to show customers where your business is located.

The map section includes the following settings:

  • Heading - Add a heading to your map section.
  • Address and hours - Add your store's address and hours to your map section.
  • Map address - Set the map to show your store's location.
  • Map link label - Add a button that links to your location on Google Maps.
  • Show pin - Add a pin that shows your store's specific location on the map.
  • Google Maps API key - Add your map's API key to the map section.
  • Image - Add an image that's displayed if the map doesn't load.
  • Image position - Set the placement of the image.

Add a map to your home page

  1. Click Add section.
  2. Click Map, and then click Select.
  3. Use the settings to customize your map section.
  4. Click Save.

Video

You can add a YouTube or Vimeo video to your home page. Videos can engage customers and generate interest in your business.

To add a video, you need to find the video's sharing link:

  • YouTube - a Youtube sharing link looks like this: https://youtu.be/Oc5v_ToKP7c. You can learn how to copy the sharing link for a YouTube video in this YouTube Help article.
  • Vimeo - A Vimeo sharing link looks like this: https://vimeo.com/123456789. You can learn how to copy the sharing link for a Vimeo video in this Vimeo Help Center article.

The video section includes the following settings:

Settings

  • Heading - Add the text that appears above the play button.
  • Video link - Add the sharing link for your video.

Cover

  • Image - Add an image that appears in the video section when the video is not playing.
  • Image position - Choose the placement of the image in the video section.

Overlay

  • Show overlay - Add a layer of color between your placeholder image and the button label. An overlay makes text over a video easier to read, and shows until the play button is clicked.
  • Overlay - Set the color of the overlay.
  • Text - Set the color of the heading text and play button.
  • Opacity - Set the opacity of your overlay.

Add a video to your home page

  1. Click Add section.
  2. Click Video, and then click Select.
  3. Paste your video's sharing link into the Video link field.
  4. Use the settings to customize your video section.
  5. Click Save.

The featured slider lets you showcase more product information on 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 Add section.
  2. Click Featured slider, and then click Select.
  3. Use the settings to customize your featured slider section.
  4. Click Save.

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 that you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Burst, 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.
  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, set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.

Customize the feature slider settings

  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 that you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Burst, 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.
  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.

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

  10. Click Save.

Ready to start selling with Shopify?

Try it free