# 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. |