Sections

Sections are the building blocks of your pages. Add them in the theme editor with Add section, then select one to edit its settings and blocks.

Settings most sections share

Setting Description
Inherit global color scheme On by default. The section uses the Default color scheme from theme settings. Turn it off to choose a scheme for this section.
Color scheme The scheme used when Inherit global color scheme is off. See Color schemes.
Top padding / Bottom padding Space above and below the section.
Eyebrow Short text shown above the heading.

Most sections also accept app blocks from apps you install, so you can place app content inside them.

Page sections at a glance

Section Use it for
Slideshow Full-width hero with image or video slides
Image with text An image beside a heading, text and button
Rich text A heading, text and button with no image
Featured collection A grid of products from one collection
Product list A carousel or grid of products from a collection or a hand-picked list
Featured product One product with its gallery and buy buttons
Collection list Collections in a bento or grid layout
Editorial collage Images, text, quotes and products in a magazine-style collage
Shop the look An image with product hotspots
Lookbook A slideshow of looks, each with product hotspots
Image gallery A masonry or grid gallery of linked images
Customer photo gallery A gallery of customer or social media photos
Before / after A slider comparing two images
Comparison table Compare products feature by feature
Video with modal A poster image that opens a video
Testimonials Customer quotes with optional ratings
Quote A short brand statement
Logo list Press or partner logos in a grid or marquee
Trust strip Icons for shipping, returns and guarantees
Newsletter An email sign-up form
FAQ accordion Questions and answers with search
Contact form A contact form with information cards
Store locator A list of stores with hours and a map
About hero, About story, About team, About values An about page
Material story A page about one material
Related articles Blog articles related to the current one
Custom section Your own layout made of Group and Text blocks
Custom Liquid Your own Liquid, HTML or app code

Sections that belong to a page type are described on their own pages: Product, Collection, Cart, Search results, Header, Announcement bar and Footer, plus the blog, page and utility sections below.

Slideshow

A full-width hero of one or more slides. Each slide can show an image, an uploaded video, a YouTube or Vimeo video, or just color and text.

Carousel settings: Autoplay, Autoplay interval, Transition (Slide, Fade or Ken Burns (zoom)), Transition speed, Loop slides, Show arrows, Show pagination, Pagination style (Dots, Counter (01 / 05) or Progress bar), Pause on hover.

Layout settings: Section height (Aspect ratio, Small, Medium, Large, Full screen or Custom), Aspect ratio, Custom height, Mobile height.

Slide block:

  • Media: Media type (Image, Video (uploaded), Video (YouTube / Vimeo) or None (color / text only)), Image, Mobile image, Uploaded video, Video URL, Video poster / facade image, Loop video, Play sound, Autoplay video on active slide.
  • Content: Eyebrow, Heading, Text.
  • Buttons: Button label, Button link, Open link in new tab, and a second button.
  • Layout: Content position (nine positions), Text alignment, Text background (Box or Gradient behind text), Box background color, Box background opacity, Box background gradient, Slide duration override.

Text over photos needs contrast. Use Text background to keep text readable on any image. Autoplaying slides pause on hover and keyboard focus, and shoppers can pause them.

Image with text

An image beside a heading, text and a button. Settings: Image, Image position (Left or Right), Image width (Equal, Wide or Wide content), Eyebrow, Heading, Text, Button label, Button link.

Rich text

A heading, text and a button. Settings: Eyebrow, Heading, Subheading, Content, Button label, Button link, Content width, Text alignment (Left, Center or Right).

Shows products from one collection. Settings: Collection, Eyebrow, Heading, Subheading, Products to show, Desktop columns, Image ratio, Show vendor, Show secondary image on hover, Show quick add button, Show quick view button, Show star rating, Show color swatches, Show price, Show view all button, View all text, View all link URL.

Product list

A carousel or grid of products. Pick a Collection, or add Product blocks to choose products by hand.

Settings: Layout (Carousel or Grid), Collection, Products to show, Eyebrow, Heading, Subheading, Columns on mobile, Columns on tablet, Columns on desktop, Card minimum width, Auto-fit columns on large screens, Image ratio, Show vendor, Show secondary image on hover, Show quick add button, Show quick view button, Show star rating.

One product with its gallery, price and buy buttons, for use on any page.

Settings: Product, Media position, Gallery style (Stacked, Thumbnails below or Carousel), Image aspect ratio, Image zoom (None or Open in lightbox), Show vendor, Show price, Show description, Show quantity selector, Show dynamic checkout buttons. Blocks: Custom Liquid.

Collection list

Shows collections as cards. Settings: Eyebrow, Heading, Subheading, Layout (Bento or Grid), Image ratio.

Blocks:

  • Collection: Collection, Custom heading, Custom image.
  • Promotion card: Heading, Text, Image, Link.

Editorial collage

A magazine-style collage. Settings: Eyebrow, Heading, Subheading, Layout (Asymmetric or Symmetric), Image ratio.

Blocks:

  • Image tile: Image, Heading, Link, Size (Default or Large).
  • Text tile: Heading, Text, Link text, Link URL.
  • Quote tile: Quote, Attribution.
  • Product tile: Product.

Shop the look

An image with clickable product dots. Settings: Eyebrow, Heading, Subheading, Image, Auto-adjust card position to avoid edges.

Hotspot block: Linked product, Product title (fallback), Product price (fallback), Horizontal position, Vertical position, Card position (Auto (smart placement), Bottom, Top, Left or Right), Show add to cart button.

Lookbook

A slideshow of looks, each with its own product hotspots. Available on the home page and on pages.

Settings: Auto-advance slides, Slide interval, Transition duration, Aspect ratio (21:9 (cinematic), 16:9 (widescreen), 4:3 (classic) or 1:1 (square)).

  • Slide block: Image, Heading, Shop this look URL, Shop this look label.
  • Product hotspot block (inside a slide): Product, Horizontal position, Vertical position.

A masonry or grid gallery of linked images. Settings: Eyebrow, Heading, Subheading, Layout (Masonry or Grid), Show footer link, Footer link text, Footer link URL.

Room block: Image, Heading, Subheading, Link.

A gallery of customer or social media photos with a follow button. Settings: Eyebrow, Heading, Subheading, Instagram URL, Instagram handle, Button text.

Image block: Image, Link, Alt text.

The images are ones you upload. The section doesn’t connect to an Instagram account.

Before / after

A draggable slider that compares two images. The slider works with a mouse, touch and the arrow keys.

Settings: Eyebrow, Heading, Subheading, Before image, Before image alt text, After image, After image alt text, Show overlay labels, Before label, After label, Initial divider position, Enable intro sweep animation, Aspect ratio, Divider color, Width, Corner radius.

Comparison table

Compare products side by side.

Settings: Eyebrow, Heading, Subheading, Show product images, Show add to cart actions, Width (Standard or Wide).

Blocks:

  • Column: Linked product, Column heading, Badge text, Column image, Add to cart label, View details link.
  • Feature row: Feature label, Feature description, Value type (Text, Price, Rating or Yes / No), Values. Enter one line per product, in the order the columns appear. For Yes / No rows, type yes or no. For Rating rows, type a number from 0 to 5, optionally followed by the review count in brackets, such as 4.5 (127). Type - to leave a cell empty.

Video with modal

A poster image that opens a video in a dialog. Settings: Shopify-hosted video, Video URL (YouTube or Vimeo), Poster image, Poster aspect ratio, Autoplay when opened, Start muted, Eyebrow, Heading, Subheading, Text alignment, Video alignment.

Testimonials

Customer quotes. Settings: Eyebrow, Heading, Subheading, Show star rating, Show verified badge.

Testimonial block: Quote, Author name, Rating, Avatar.

Quote

A short brand statement between dividers. Settings: Text, Attribution, Show top divider, Show bottom divider.

Logo list

Press, partner or brand logos. Settings: Eyebrow text, Heading, Description, Layout style (Grid or Marquee (auto-scroll)), Logos per row (desktop), Logos per row (mobile), Marquee speed, Pause on hover, Grayscale logos, Maximum logo height, Show top border, Show bottom border.

Logo block: Image, Name, Link.

Trust strip

A row of icons with short text, such as free shipping or easy returns. Settings: Show top border, Show bottom border.

Trust item block: Icon (None, Shipping, Star, Clock, Leaf, Shield, Heart or Custom), Custom icon image, Label, Description.

Newsletter

An email sign-up form. Sign-ups are added to your Shopify customers as email subscribers.

Settings: Eyebrow, Heading, Text, Button label, Social proof text, Disclaimer, Layout (Split or Centered).

FAQ accordion

Questions and answers, grouped by category, with an optional search filter.

Settings: Show breadcrumb, Intro fallback, Heading, Intro text, Show search filter, Search input placeholder, Show “Still have questions?” call to action, Call to action heading, Call to action text, Button label, Button link.

Blocks:

  • Category header: Heading.
  • FAQ item: Question, Answer, Open by default.

Contact form

A contact form that sends messages to your store’s email address, with information cards beside it.

Settings: Show breadcrumb, Intro fallback, Heading, Intro text, Show phone field, Show subject field, Subject options (comma-separated).

Blocks:

  • Information card: Icon, Heading, Body.
  • Studio details: Heading and up to four label/value rows.
  • Map: Map image.
  • Quick answers call to action: Heading, Button label, Button URL.

Store locator

A searchable list of your stores with opening hours and a map.

Settings: Eyebrow text, Heading, Description, Search input placeholder, Search button label, Show type filters, Show map column, Map address, Map zoom level, Map height (desktop), Map height (mobile), Static map image, Custom Google Maps embed URL.

Store block: Storefront image, Store name, Store type (Flagship, Outlet or Studio), Street address, City, state / postal code, Phone number, Distance, opening hours for each day, Services, Latitude, Longitude.

About hero

The top of an about page. Settings: Show breadcrumb, Breadcrumb color scheme, Eyebrow text, Heading, Subheading, Background image, Overlay opacity, Minimum height.

About story

Alternating image-and-text rows. Settings: Image ratio. Story block: Image, Heading, Text, Image position.

About team

A grid of team members. Settings: Eyebrow text, Heading, Columns on desktop. Team member block: Photo, Name, Role, Bio.

About values

A grid of brand values. Settings: Eyebrow text, Heading, Columns on desktop. Value block: Icon image, Heading, Text.

Material story

A long-form page about one material, available on page templates. It has a hero, an origin story, a stats grid, a process timeline, care instructions, featured products and related materials. Each part has its own Eyebrow and Heading settings, plus Featured collection, Products to show and Process band color scheme.

Blocks: Stat (Icon, Value, Label), Process step (Image, Step heading, Description), Care item (Question, Answer, Open by default), Related material (Image, Material name, Link).

Articles related to the one being read. Settings: Heading, Number of articles, Use carousel on mobile, Source blog, Match by (Same tags, Same blog (most recent) or Manual selection), Show previous / next navigation, Image ratio, and options to show the image, tags, date, reading time, author, excerpt and “Read more” link.

Article block (for Manual selection): Article.

Custom section

An empty section you fill with Group and Text blocks to build your own layout. Settings: Background image.

  • Group block: Layout direction (Horizontal or Vertical), Alignment, Padding. Groups can contain other blocks.
  • Text block: Text, Text style (Title, Subtitle or Normal), Alignment.

Custom Liquid

Adds your own Liquid, HTML or app code. See the Custom Liquid tutorial.

Template sections

These sections belong to a page type and can’t be added elsewhere.

Section Template Main settings
Blog posts Blog Subheading, Show breadcrumb, Articles per page, Articles per row (desktop), Image ratio, Show featured article, Show tag filter, Show “Page X of Y” text. Blocks: Featured article, Tag filter, Intro text.
Article Article Show breadcrumb, Show hero image, Hero aspect ratio, Show meta bar, Show author avatar, Show reading time, Show tags, Show floating share sidebar, Show inline share row below content, Show author bio, Default author bio, Show comments, Comments per page, Limit text width, Content max width, Drop cap on first paragraph.
Page Page Show breadcrumb, Show intro, Intro text, Limit text width, Content max width.
List collections Collections list Heading, Subheading, Intro text, Columns on desktop, Columns on mobile, Card aspect ratio, Card text position, Show product count, Show collection description, Sort order, Collections per page.
Gift card Product (gift card) Hero text, card preview, recipient form labels, delivery options, trust badges and FAQ items for gift card products.
404 404 page Heading, Subtext, Illustration, Show ‘Back to home page’ button, Show search form, and Suggested link blocks.
Password page Password Show logo / shop name, Heading, Subheading, Background image, Overlay opacity, Show newsletter signup, Show password form, Show social media icons, Show “Are you the store owner?” link.
Customer account pages Customer account templates Login, register, account, order, addresses, activate account and reset password pages. A few options such as Show eyebrow and Show account statistics.

The customer account templates are used only with classic customer accounts. If your store uses the newer customer accounts, Shopify hosts those pages and the theme's account sections aren't shown.