Nappa Theme documentation
All guides

Sections

What each Nappa section does, with its settings, blocks and limits, using the exact labels of the theme editor.

To add a section, open a template in the theme editor, click Add section and choose it from the list. Sections marked "template section" are part of a page type and can't be added elsewhere.

Settings shared by many sections

To keep this page short, these settings are explained once here.

Caption
Short label above the heading, for example 01 or New season.
Heading
Set a word in italic to emphasize it. The emphasis style comes from Heading emphasis in Typography.
Heading size Small, Medium, Large, Extra large
The size of the heading. Some sections offer only some sizes.
Heading alignment Left, Center
The alignment of the caption, heading and link.
Link label and Link
A link next to the heading, such as View all. Shown when both are filled in.
Color scheme
The colors of the section. See Colors.
Space above and below None, Small, Medium
The vertical space around the section. Medium uses the Space between sections value from Layout, Small uses about half of it, and None removes it.

Images: set a focal point on each image in the image picker, so the important part stays visible when the image is cropped to different shapes. Nappa loads the image size that fits each screen, so you don't need to resize images before you upload them.

Hero and media sections

Hero

A large opening image or video with a heading and up to two links.

Layout Full-width image, Image and text side by side, Text on a panel
How the image and text share the space. A full-width hero placed first lets the header become transparent.
Image position on desktop Left, Right
Applies to the split layout.
Desktop height Medium, Large, Full screen
The height on computers.
Phone height Same as desktop, Small, Medium, Large, Full screen
The height on phones, set separately from desktop.
Text position Middle left, Bottom left, Center
Where the text sits on the image.
Image, Mobile image
The mobile image is optional: a portrait image for phones.
Video
Optional. Replaces the image. Plays muted and loops, with a pause button.
Image overlay 0 to 80 %
Darkens or lightens the image so the text stays readable. Uses the color scheme background.
Caption, Heading, Heading size, Text
The text of the hero. Heading sizes: Large, Extra large.
Button label, Button link, Second link label, Second link
A button and an optional second link.
Color scheme
On a full-width image, the text uses this scheme's text color and the overlay uses its background.

Slideshow

Several full-width slides, each with its own image, text and button.

Accessible name
Read by screen readers, for example featured collections.
Height Medium, Large, Full screen
The height of the slides.
Heading size Large, Extra large
The size of slide headings.
Transition Slide, Fade
Fade is calmer: slides cross-fade in place instead of moving sideways.
Change slides automatically and Time per slide 4 to 12 s
Stops on hover, on focus, with the pause button and when a visitor prefers reduced motion.

Slide block: Image, Mobile image (optional, a portrait image for phones), Image overlay, Caption, Heading, Text, Button label, Button link, Text position and Color scheme.

Up to 6 slides.

Video

A video with an optional heading.

Video
Hosted on Shopify. Plays with sound and controls.
Or a YouTube or Vimeo link and Cover image for YouTube or Vimeo
The external player loads only when the visitor clicks play, which keeps the page fast. The cover image is shown until then.
Video title
Read by screen readers.
Shape Landscape, Portrait, Square, Cinema
The frame of the video.
Full width
Runs the video from edge to edge.

Before and after

Two images in the same frame, with a handle that visitors drag to compare them.

Before image source Separate image; After image in gray, low resolution
Use a separate before image, or let the theme make one from the after image.
Before image, Before label, After image, After label
Use two images of the same size and framing.
Starting position 10 to 90 %
Where the handle starts.
Shape Landscape, Portrait, Square
The frame of the images.

Also: Caption, Heading, Heading size, Heading alignment, Color scheme, Space above and below.

Image with text

An image next to a heading, text and link. The Brand story preset adds the same section in its quote style.

Image, Image shape Portrait, Square, Landscape
The image and its shape.
Image position on desktop Left, Right
The side of the image on computers.
Style Heading and text; Quote, for a brand story
The quote style sets the heading as a quotation.
Heading or quote, Heading size Medium, Large, Text
The text of the section.
Signature
For a quote, for example the founder's name.
Button label, Button link, Button style Button, Underlined link
An optional link.

Lookbook

An editorial grid of images, texts and products of different widths.

Image block: Image, Caption, Link, Image shape (Portrait, Tall, Square, Landscape).
Text block: Caption, Heading, Text, Link label, Link.
Product block: Product, shown as a product card.

Each block also has Width on desktop (One third, Half, Two thirds, Full) and Vertical offset on desktop (None, Small, Large). Offsets create a staggered, magazine-like layout. On phones, blocks stack.

Up to 12 blocks.

Shop the look

A photo with dots placed on the products it shows. Each dot and each line of the product list opens the product.

Image, Image position on desktop Left, Right
The photo and its side.
Caption, Heading, Heading size, Text
The text next to the photo.

Product block: Product, Horizontal position and Vertical position (0 to 100 %) of its dot on the photo.

Up to 6 products.

Product and collection sections

Products from one collection, in a row or a grid.

Collection, Products to show 2 to 16
The collection and the number of products.
Desktop layout Swipeable row, Grid
A row that visitors swipe or drag, or a grid.
Products per row on desktop 3 to 5
The number of cards visible per row.
Phone layout Swipe row, Grid
Set separately for phones.
Columns on phones 1, 2
Used by the grid layout.

Also: Caption, Heading, Heading size, Heading alignment, Link label, Link, Color scheme, Space above and below. Card options come from Product cards.

One product with its gallery and buy buttons, for a home page or a landing page.

Product
The product to show.
Media position on desktop Left, Right
The side of the images.
Image layout Side by side, Stack of cards
Side by side shows the images in a row that visitors swipe. Stack of cards layers them as a pile of cards that fans out when the pointer is over it.
Media to show 1 to 8
The number of product images and videos.

Blocks

Numbers in brackets are the maximum per section.

Collection list

Tiles that link to your collections.

Layout Grid, Staggered, Swipeable row
On phones, the collections always show as a swipeable row.
Columns on desktop 2 to 6
The number of tiles per row.
Show product count
Shows the number of products in each collection.

Collection block: Collection, Image (defaults to the collection image) and Heading (defaults to the collection title).

Up to 12 collections.

Product comparison

A table that compares 2 to 4 products side by side. Each row reads real product data, so you don't type values twice. On phones, the table scrolls sideways with the first column kept in view.

Caption above heading, Heading
The text above the table.
Products
Choose 2 to 4 products.
Show product images
Shows each product image above its column.
Color scheme, Spacing None, Compact, Normal
The colors and vertical space of the section.

Row block:

Label
The row name, such as Price or Weight.
Value Price, Vendor, Product type, Colors, Sizes, Availability, Product metafield
Colors lists the values of the option named Color, Colour or Couleur. Sizes lists the values of the option named Size or Taille. Availability shows In stock or Sold out.
Metafield
Namespace and key, for example custom.weight. Used when the value is a product metafield. Create a product metafield definition in your Shopify admin, then fill it on each product. See Metafields in Shopify Help.

Empty values show a dash. The Bouncy preset compares yoga mats with the metafields custom.thickness, custom.material, custom.mat_weight and custom.best_for. These are examples: create them in your store, or use your own keys.

Up to 12 rows. The table shows the first 4 products.

Products related to the one on the page, from Shopify's product recommendations. Available on product templates only. Shopify chooses the products automatically. You can set them yourself in the Search and Discovery app. See Recommendations.

Products to show: 2 to 8. Also: Caption, Heading, Heading size, Heading alignment, Color scheme, Space above and below.

Recently viewed

Shows the products this visitor viewed last, remembered on their device only. Hidden until there is something to show.

Products to show: 2 to 8. Also: common settings.

Text and trust sections

Rich text

Headings, text and buttons, centered or aligned left.

Alignment Left, Center
The alignment of all blocks.

Blocks: Caption (1), Heading (with Size: Small, Medium, Large, Extra large), Text, Buttons (1, with First button label, First button link, Second button label, Second button link).

Placed first on a page with a color scheme other than the first scheme, this section becomes a colored text hero, and the transparent header blends into it.

Multicolumn

Columns with an image or an icon, a heading, text and a link.

Columns on desktop 2 to 5
The number of columns on computers.
Layout on mobile Stacked, Swipeable row
How columns show on phones.
Image shape Portrait, Square, Landscape
The shape of column images.

Column block: Image, Icon, Heading, Text, Link label, Link.

Up to 8 columns.

Service highlights

A band of short promises, such as delivery, returns or payment. On the home page of each preset, it sits right under the hero so it shows in the first screen.

Item block: Icon, Heading, Text. Settings: Color scheme, Space above and below.

Up to 5 items.

The default items mention free shipping and delivery times. Change them to match your real policies.

Testimonials

Quotes from customers.

Testimonial block: Quote, Name, Detail (for example a city or the product bought), Rating (0 to 5; 0 hides the stars) and Photo.

Only publish real reviews from real customers, with their consent.

Up to 9 testimonials.

Logos

Logos of press titles, partners or the brands you sell.

Style Row of logos; Tiles, for brands; Scrolling tiles
Scrolling tiles move slowly across the screen, with a pause button. They don't move for visitors who prefer reduced motion.
Logos per row on desktop 3 to 8
The number of logos per row.

Logo block: Logo (use a logo you have the rights to; a transparent PNG or SVG works best), Name (used as alternative text, and shown when there is no logo), Collection (for a brand: links to its collection), Link, Short quote (optional, for press mentions).

Up to 24 logos.

FAQ

Questions and answers in collapsible rows. Nappa adds FAQ structured data for search engines.

Text, Link label, Link
A short text and a link next to the questions, for example to your contact page.

Question block: Question and Answer.

Up to 20 questions.

Countdown

A timer to a date. Use only for a real deadline, such as the end of a sale or a launch date. The section hides itself once the date has passed, unless you choose to show a message.

End date
Format: YYYY-MM-DD, in your store's time zone. Example: 2026-12-24.
End time
Format: HH:MM, 24-hour clock.
After the end date Hide the section, Show a message
What happens when the timer ends. Message after the end date sets the text.
Digit style Simple, Flip calendar
The look of the numbers.
Layout Text beside the timer, Centered
The position of the text.
Caption, Heading, Heading size, Text, Button label, Button link
The text and button.

The timer never restarts for each visitor. A fake deadline breaks the Shopify Theme Store rules and consumer protection laws in many countries.

Blog posts

The latest posts of a blog.

Blog, Posts to show 2 to 6
The blog and the number of posts.
Columns on desktop 2 to 4
The number of posts per row.
Show date, Show author, Show excerpt
The details shown under each post.

Forms and pop-ups

Email signup

Subscribers are added to your customers list with the newsletter tag. This section never opens a pop-up.

Layout Text beside the form, Centered
The position of the text.
Caption, Heading, Heading size, Text
The text above the field.
Small print
A note under the field, for example You can unsubscribe at any time.

Contact form

A form with name, email and message fields. Messages go to the contact email of your store, set in your Shopify admin settings. The setting Heading sets the title above the form. Add this section to a page template, for example page.contact.

A message with an optional email signup or button. It belongs to the footer group, so it can show on every page. It never opens on arrival. It waits for the delay or the trigger below, shows at most once per period, and is a bottom sheet on phones, never full screen.

Show After a delay; After scrolling half the page; When leaving the page (desktop)
What opens the pop-up.
Delay 10 to 90 s
Used with After a delay.
Show again after 1 to 60 days
How long the pop-up stays hidden for a visitor who saw it.
Image, Heading, Text
The content.
Discount code
Optional. Enter a real, active discount code.
Show email signup
Adds an email field.
Button label, Button link
Used when the email signup is hidden.

1 pop-up per store.

Advanced sections

Custom section

A free-form section built from theme blocks. See Theme blocks and Custom section.

Custom Liquid

Liquid code: add app snippets or other code to create advanced customizations. Color scheme sets the colors around it. Our support doesn't cover the code you add here.

Template sections

Each page type has a main section. You can't remove it, but you can add other sections above and below it.

Product information (product pages)
See Product pages.
Product grid (collection pages)
See Product grid.
Search results (search page)
See Search page.
Cart (cart page)
No settings. Cart options are in Theme settings > Cart.
Collections list (list of all collections)
No settings. Lists your collections with their image.
Blog posts (blog pages)
No settings. Lists the posts of the blog with their image.
Blog post (article pages)
Show author. Comments show when you turn them on for the blog in your Shopify admin.
Page (pages)
No settings. Shows the page title and content.
404 page
No settings. Shows a message and a search field.
Password page
No settings. Shows an email signup while your store is password protected.

The Header, Announcement bar and Footer sections are described in Header and footer.