Feature list

This page is a capability index for Slab. It includes every documented block known feature. Slab is built almost entirely with blocks, so many features are possible through unique block combinations, and new feature patterns can still be discovered.

Design and styling

Feature	Description
Color schemes	Create and reuse custom color schemes across sections and blocks. Add new schemes in theme settings and apply them anywhere.
Typography	Set font family, line height, letter spacing, and case for each font application. Use scale ratios to adjust sizing across the theme.
Borders and inputs	Set global border radius and styling to adjust your theme. Use input style settings to design all text input fields.
Animations	Add rich animations and transitions throughout the storefront. Customize page transitions and header transitions for a polished experience.
Vertical scroll snapping	Snap scroll onto each section for a guided browsing experience.
Audio interactions	Play subtle audio cues when customers click and interact with the storefront.

Theme basics

Feature	Description
Lightning fast pages	Pages load quickly with performance best practices and link hover preloading. Customers experience minimal wait times.
Search engine optimized	All pages and content are built with SEO-optimized best practices.
Keyboard accessible	All features and functionality can be used with keyboard navigation.
Screen reader support	All content is accessible to screen readers for an inclusive browsing experience.
Dynamic content	Use metafields and dynamic content inside sections and blocks.
Global shopping	Supports Shopify Markets so customers can browse in their local language and currency. Customers can easily swap between different markets.
Flexible price settings	Remove trailing zeros and currency symbols for a simplified look.
Device specific visibility	Customize visibility on almost every block and section for mobile and desktop separately.
Drag and drop blocks	A completely modular block architecture allowing you to build any layout.

Navigation and header

Feature	Description
Build any menu	Use a combination of drawers, dropdowns, and content blocks to build any menu, including mega menus. Nest blocks in popups and overlays to create custom navigation.
Full overlay control	Create popups, overlays, alerts, and drawers with nested blocks. Trigger them with buttons anywhere for newsletters, discounts, and more.
Real-time search	Help customers find what they are looking for by displaying search results as they type.
Search with keyboard shortcut	Use Cmd+K to instantly start searching the storefront.
Sticky header	Ensure your header section is always visible.
Dynamic header	Set your header to hide while scrolling down and reveal when scrolling up.
Discount overlay	Show customers a discount overlay when they land on the storefront. The overlay can display a code to copy.

Forms

Feature	Description
Build your own form	Use blocks to build custom contact forms by adding different input fields. Combine inputs, labels, and buttons to create forms for any use case.
Age verification	Require customers to confirm they meet a minimum age before accessing the storefront. Supports birthdate verification or simple confirmation.
Form response overlay	Show an overlay with form success or error messages for a seamless submission experience.

Collection

Feature	Description
Build your own filters	Use blocks to drag and drop filters wherever you need them. Works with Shopify Search & Discovery for easy setup.
Build your own cards	Use blocks to design product cards with custom layout, media, and content.
Build your own collection card	Use blocks to design collection cards with custom layout, media, and content.
Build your own quick add	Use blocks to build and edit quick buy popups. Swap to a drawer or other overlay as needed.
Recently viewed	Display recently viewed products in a grid or slider layout. Place the block anywhere on the storefront.
Tag-based filtering	Let customers filter collection results based on product tags. Set filters to appear as a sidebar or topbar.
Quick add	Let customers add items to the cart without navigating to a product page. Use a table view to add many items by updating quantities.
Collection blocks	Add content and media blocks within your collection grid.
Infinite scrolling	Load more collection results as customers scroll near the bottom of the page.
Custom product badge	Display custom product badges using tags or metafields.
Sale badges	Highlight product discounts with percent or amount sale badges.
Inventory count	Show total product inventory remaining when below a certain amount.
Product taglines	Display a short description under each product title.
Image cropping	Set product images to crop to square, portrait, or landscape.
Second image on hover	Show the second product image while hovering.
Video support	Show videos for each product card when used as featured or second media.
Image slider	Show multiple photos for each product card in a slider.
Show selected collection card	Automatically highlight collection cards that are active for the current page. Let customers easily navigate between collections.

Product

Feature	Description
Build your own template	Use blocks to build your product template. Add tabs, accordions, drawers, and other blocks for a custom layout.
Shop Pay installments	Display pricing in Shop Pay installments.
Rich option styles	Display options in a grid, stacked, or dropdown. Set colors and radius for swatches and other labels.
Sibling products	Display sibling products linked as swatches. Let customers switch between closely related products.
Product upsells	Display automatic or manually selected product upsells.
Product bundles	Sell multiple items together on one product page.
Image zooming	Let customers get a closer look at product images with a zoomable gallery.
Multimedia gallery	Display images, videos, and 3D files in a single media gallery.
Supports app blocks	Easily add third-party apps to your product template using app blocks.
Store pickup	Show inventory availability and different locations.
Inventory warning	Show a warning message when there is limited supply remaining.
Product recommendations	Display product recommendations as upsells anywhere on the storefront. Use grid or slider layouts on product, collection, or cart pages.
Related products	Show automatic product recommendations.
Combined listing (Shopify +)	Create and display combined listing products.

Cart and checkout

Feature	Description
Build your own cart	Use blocks to build your cart in a popup, drawer, alert, sidebar, or full page. Set the display type per device and build the contents with each block.
Cart agreement	Require customers to check a box agreeing to terms and conditions before continuing to checkout.
Cart discount	Let customers enter and apply discount codes to their cart.
Minimum order value	Set a minimum cart value to unlock checkout.
Multi-tier progress bar	Show progress toward a reward, discount, or free shipping threshold. Customers see how much more they need to spend.
Unified cart view	Display all cart variants grouped under each product.
Cart upsells	Display a collection of products to upsell. Use checkbox upsells for one-click upgrades such as shipping insurance or gift wrapping.
Cart editing	Let customers quickly change variant options for items in their cart, such as swapping size or color.
Cart notes	Let customers add a note or delivery instructions to their order.
Content blocks	Display custom content to highlight promotions or offers in your cart.
Share cart	Let customers share their cart by copying and sharing a URL.
Device specific control	Set different cart types for mobile and desktop. Show a cart alert on mobile and a cart drawer on desktop, for example.
Cart redirect	Redirect customers to the cart page.

Blog

Feature	Description
Build your own article card	Use blocks to design article cards with custom layout, media, and content.
Comments	Let customers leave a comment on a blog post.
Easy sharing	Display a URL that customers can copy to share a blog post.
Recent articles	Show recently published blog articles to encourage further engagement.
Tag filtering	Filter to show blog posts with a specific tag.
Table of contents	Let customers jump to different headings in a blog post.

Account

Feature	Description
Sign in with Shop	Let customers sign in with their Shop account. Products with matching tags can be hidden or have hidden prices for customers not logged into approved accounts.
Advanced account drawer	Quick access to all account details in a slideout drawer. Customers can reorder and view order history.

Complete block list

Block	Description
Accordion	Display content in expandable block to keep pages easy to scan.
Avatar image	Display a profile image for a customer, author, or reviewer.
Button	Add a clear call to action that links anywhere or triggers an action.
Countdown	Show a live countdown timer for launches, promotions, or events.
Discount	Display a discount code customers can copy in one click.
Dropdown	Reveal extra content after a customer clicks a button.
Hotspot	Show content when a customer hovers over or taps a specific point on an image or video.
Icon	Display a visual icon to support text or highlight a feature.
Image	Display an image with flexible cropping and aspect ratio settings.
Image comparison	Let customers compare two images with an interactive before-and-after view.
Logo	Display a brand, partner, or trust logo.
Map item	Highlight a location, store, or point of interest on a map.
Payment icons	Show accepted payment methods to build checkout confidence.
Rich text	Display formatted text such as headings, paragraphs, links, and lists.
Share	Let customers share a page or product with quick social links.
Shop login	Let customers sign in to Shop from the storefront.
Social icons	Link customers to your social profiles with recognizable icons.
Video	Display a hosted or uploaded video in the page layout.
Article comments	Show blog comments and let readers join the conversation.
Article date	Display the published date for a blog article.
Article card	Display a blog article preview with key details and a link to read more.
Collection card	Display a collection preview that links customers to a product group.
Product card	Display a product preview with key details and a link to buy.
Cart count	Show how many items are currently in the cart.
Cart results	Display the current cart items and their totals.
Checkout	Give customers a direct path from cart to checkout.
Checkout agreement	Ask customers to accept terms before continuing to checkout.
Discount input	Let customers enter a discount code in the cart.
Full subtotal	Show a detailed cart subtotal before checkout.
Order notes	Let customers add notes or delivery instructions to their order.
Order summary	Display a clear summary of cart items, pricing, and totals.
Progress bar	Add a simple 0–100 progress bar anywhere; pair with metafields for dynamic values.
Progress tier	Show progress toward a reward, discount, or free shipping threshold.
Share cart	Let customers share their cart with a link.
Simple subtotal	Show a simplified cart subtotal before checkout.
Upsell checkbox	Let customers add an extra item or service with one click.
Age verification	Ask customers to confirm they meet an age requirement.
Contact form	Let customers send a message through a built-in contact form.
Input field	Collect customer information with a customizable form field.
Newsletter form	Let customers subscribe to email updates and promotions.
Password form	Let customers enter a password to access a protected page.
Container	Group content together and control how it appears on the page.
Divider	Separate blocks of content with a visual divider.
Flex item	Position content within a flexible row or column layout.
Float	Place content above or beside other content for layered layouts.
Grid item	Position content within a structured grid layout.
Inline	Display multiple pieces of content side by side on one line.
Marquee	Create scrolling content that moves across the page.
Overlay	Layer content on top of other content, images, or video.
Slider item	Add a slide inside a swipeable or scrollable slider.
Tab item	Add content inside a tabbed interface.
Table	Display information in rows and columns for easy comparison.
Table cell	Add content to an individual table cell.
Alert	Display an attention-grabbing message or announcement.
Drawer	Reveal content in a slide-out panel from the edge of the screen.
Popup	Show promotional, informational, or sign-up content in a popup window.
Sidebar	Display supporting content in a side panel alongside the main content.
Blog	Display a paginated list of blog articles.
Collection	Display a paginated list of products from a collection.
Grid articles	Show blog articles in a grid layout.
Grid collections	Show collections in a grid layout.
Grid gallery	Display images or media in a gallery grid.
Grid products	Show products in a shoppable grid layout.
Grid recent	Show recently viewed or recently added items in a grid.
Grid recommendations	Show recommended products in a grid layout.
List collections	Show collections in a vertical list layout.
Paginate item	Add custom content inside a paginated layout.
Search	Display paginated search results across the storefront.
Slider articles	Show blog articles in a horizontal slider.
Slider collections	Show collections in a horizontal slider.
Slider gallery	Show images or media in a swipeable gallery slider.
Slider products	Show products in a horizontal slider.
Slider recent	Show recently viewed or recently added items in a slider.
Slider recommendations	Show recommended products in a horizontal slider.
Badges	Highlight product labels such as sale, new, or sold out.
Bundles	Let customers buy related products together as a bundle.
Product buy	Display the main add-to-cart and purchase actions for a product.
Product inventory	Show stock availability and inventory status.
Product media	Display product images, videos, and other media.
Product options	Let customers choose variants such as size, color, or material.
Product pickup	Show local pickup availability for a product.
Product price	Display pricing, compare-at pricing, and savings.
Product quick buy	Let customers add a product to cart without leaving the current page.
Product rating	Show product review ratings for quick social proof.
Product sibling options	Let customers switch between closely related products, such as colors or styles.
Product subscription	Let customers choose a recurring purchase option.
Product swatches	Let customers select product options with color or image swatches.
Shop Pay installments	Show Shop Pay installment pricing for the cart or the current product.
Breadcrumbs	Show the path back through the storefront so customers can navigate easily.
Filter	Let customers narrow results by attributes such as size, price, or availability.
Menu	Display a navigation menu with links to key pages.
Menu item	Add an individual link or action inside a menu.
Menu page	Display page content tied to a selected menu item.
Pagination	Let customers move between pages of results.
Search input	Let customers type a query to search the storefront.
Search results	Display the products, pages, or articles matching a search.
Search summary	Show the current search term and result count.
Tag filter	Let customers filter content by tag.
Tags	Display clickable tags for browsing related content.
Account B2B	Show business account details and B2B-specific customer information.
Account orders	Display a customer's order history and order details.
Account profile	Let customers view and update their account details.
Error	Display an error message when something cannot be completed.
Form response	Show a success or error response after a form submission.
Liquid	Display custom content powered by Liquid logic.
Localization label	Display translated text that matches the customer's language or market.
Picker audio	Let customers play and choose audio options.
Picker country	Let customers choose their country or region.
Picker language	Let customers choose their preferred storefront language.
Render quick buy	Render a quick buy experience from another part of the page.
Render quick edit	Render a quick edit experience for updating product choices.
Shared discount	Display a discount offer that can be reused across multiple blocks.
Visibility	Show or hide nested blocks by device, customer, cart, visit session, URL paths (with wildcards), or viewport visibility tied to another element’s CSS class.