> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Theme blocks
> Reference for the reusable block library that fills Olympus sections with headings, text, buttons, media, layout groups, and commerce content
Theme blocks are the reusable content pieces of Olympus. Headings, text, buttons, images, videos, labels, countdowns, and cards are all separate blocks that you add to a section and arrange in the Theme Customizer. A section supplies the layout, media, spacing, and color scheme; the blocks supply what appears inside it. Because the same Heading block is used in a hero banner, a newsletter popup, and a product page, you learn each block once and can apply that knowledge across the whole store.
## What theme blocks control
* The text content of a section: headings, paragraphs, labels, and button copy
* Media placed inside a section's content area: images and videos
* Layout inside a section: grouping blocks into columns, rows, or cards
* Commerce content: prices, product cards, collection cards, and promotional content cards
* Custom code inserted through the Custom Liquid block
## How blocks work in Olympus
Every section lists the blocks it accepts. Most content sections accept Heading, Text, and Button, and add the blocks that fit their purpose, such as Label in the Callout banner or Image in the Newsletter banner. The Product, Article, and Custom section accept **any** theme block, so you can compose those layouts freely. The Group block also accepts any theme block, which lets you nest a column or row of blocks inside a section that would otherwise accept only a few.
Some blocks belong to a single section and are documented on that section's page rather than here. Examples include Slide in the Hero banner, Tile in the Header, Multi tile, and Dual tile, Testimonial in Testimonials, Feature in Feature highlights, and the footer's Text column, Menu, Newsletter, Follow on Shop, Logo group, and Spacer blocks.
## Adding, reordering, and nesting blocks
From your Shopify admin, open Online Store, then Themes, and click Customize on Olympus.
Click a section in the left sidebar. Its existing blocks appear nested underneath it.
Click Add block under the section and choose from the list. Only blocks the section accepts are offered.
Drag a block up or down to reorder it. Drag a block onto a Group block, or use Add block inside the Group, to nest it. Use the eye icon to hide a block without deleting it.
Block settings such as Size and Alignment apply to that block only. The section's Common settings, including Width and Color scheme, still frame everything inside it. See [Common settings](/themes/olympus/common-settings).
## Block reference
Content blocks carry the words a customer reads. They have no media or background of their own and take their colors from the section's color scheme.
A section or block title with rich text support, so you can bold or link single words.
* **Heading**: the text. Default: Talk about your brand.
* **Heading level**: H1 to H6. Sets the semantic level for accessibility and search engines; it does not change the size. Default: H2.
* **Size**: Extra small, Small, Body, or Heading 6 up to Heading 1. Default: Heading 3.
* **Alignment**: left, center, or right.
Keep one H1 per page (usually the product or page title) and use H2 for section headings, then adjust Size freely for the look you want.
A paragraph of rich text for descriptions, announcements, or supporting copy.
* **Text**: rich text with bold, italic, links, and lists.
* **Size**: Extra small, Small, Body, or Heading 6 up to Heading 1. Default: Body.
* **Alignment**: left, center, or right.
A call to action styled by the global Buttons theme settings.
* **Button label**: default Shop now.
* **Link**: the destination.
* **Style**: Filled or Outlined. Default: Filled. Colors come from the section's color scheme (Button, Button label, and Secondary button label).
* **Button type**: Text only, or Text with icon to add an arrow.
* **Open link in new tab**: off by default.
* **Alignment**: left, center, or right.
A short eyebrow line, such as Deal of the day, shown above a heading.
* **Text**: default Deal of the day.
* **Label style**: Outlined pill, Filled pill, or Plain text. Default: Outlined pill.
* **Corners**: Pill or Theme default. Appears for pill styles only.
* **Size**: Extra small, Small, or Body. Default: Extra small.
* **Bottom spacing**: No, S, M, L, or XL. Extra space under the label, added to the section's own spacing.
A small sticker pinned to a corner of a tile, such as Promo or New. Accepted by the Tile block used in Multi tile and Dual tile.
* **Badge**: the text. Default: Promo.
* **Show icon** and **Icon SVG code**: paste SVG code to display an icon in front of the label at text height. Use the current color in the SVG so it follows the badge color.
* **Badge position**: Top left, Top right, Bottom left, or Bottom right. Default: Top left.
Product badges on product cards (sale, sold out, and tag-based badges) are a separate feature controlled under Theme settings, then Product cards. See [Product badges](/themes/olympus/products/product-badges).
A timer counting down to a date, used in the Callout banner for sales and launches.
* **Layout**: Boxed or Divider. Default: Boxed.
* **Background behind each unit**: tints the days, hours, and minutes boxes. Boxed layout only. On by default.
* **End date**: Year, Month, Day, Hour, and Minute.
* **Units**: Show days, Show hours, Show minutes, and Show seconds, all on by default.
* **Message after end date**: shown once the timer reaches zero. Default: The sale has ended.
Only use countdowns for genuine deadlines. Leaving an expired timer in place, or resetting it repeatedly, erodes customer trust.
An image paired with a highlighted word in the Animated rich text section. Bold a word in the heading or text to make it a highlight; each Highlight image block is matched to a highlight in order for the hover, stack, inline, and framed effects.
* **Image**: shown on desktop for the reveal, stack, and framed effects. In the inline icons effect, images also show on mobile.
See [Animated rich text](/themes/olympus/sections/animated-rich-text) for the effects and highlight colors.
Media blocks place an image or a video inside a section's content flow. They are different from a section's own background image, which sits behind all blocks.
A single image, optionally linked.
* **Image**: choose from your files.
* **Aspect ratio**: Adapt to image, Square, Portrait, Landscape, or Widescreen. Default: Landscape. Fixed ratios crop the image to fill the frame; Adapt to image keeps its original proportions.
* **Image link**: makes the whole image clickable.
Accepted by the Footer, Newsletter banner, and Page sections, and anywhere that accepts any theme block.
A hosted video or a YouTube or Vimeo embed.
* **Video**: upload from your Shopify files. Preferred for performance.
* **Video link**: a YouTube or Vimeo link, used only when no hosted video is selected.
* **Video title**: describes the video for screen readers and search engines.
* **Playback**: Autoplay video muted (off by default; browsers mute autoplaying video), Show controls (on by default), and Loop (off by default).
* **Aspect ratio**: Square, Landscape, or Widescreen. Default: Widescreen.
If you enable Autoplay, also enable Loop and consider hiding controls so the video behaves like moving imagery rather than a player.
Layout blocks arrange other blocks or insert code. They are the tools for building custom arrangements without editing theme files.
A container that holds any theme block and lays them out as a column or a row. Two presets are offered when you add it: Column (vertical) and Row (horizontal).
* **Layout direction**: Vertical or Horizontal. Default: Vertical.
* **Alignment**: Left, Center, Right, or Stretch. Vertical layout only.
* **Spacing between blocks**: 0 to 48 pixels. Default: 0.
* **Padding**: 0 to 200 pixels of inner space. Default: 0.
* **Bottom spacing**: None, Small, Medium, Large, or Extra large under the group.
* **Background**: None or Card. Card gives the group its own surface with the theme's corner style.
* **Color scheme**: appears when Background is Card, so the card can contrast with the section.
Groups can be nested inside other groups, which is how you build multi-column layouts in the Contact form, Page, Product, Article, and Custom section.
Inserts Liquid code, HTML, or an app snippet at the block's position. The code runs inside the section's color scheme and width, so the output follows the surrounding design.
* **Liquid code**: the code to render.
Available wherever any theme block is accepted, including the Product and Article templates, Custom section, and inside Group blocks. A separate Custom Liquid section exists for standalone code. See [Custom Liquid](/themes/olympus/sections/custom-liquid).
Custom Liquid runs code you or a developer wrote, and the theme cannot check it. Broken code can hide part of a page or affect layout, and any customization you add is your responsibility to maintain through future theme updates. Files you edit directly in the theme code lose automatic updates, so we recommend keeping customizations inside this block rather than modifying theme files.
Commerce blocks pull live store data into a section: prices, products, and collections. Most are only available in sections that accept any theme block, or inside a Group.
Displays the price of the selected variant of the current product, including compare-at pricing when the product is on sale. It has no settings and is meant for product sections such as the Product template and Featured product. The Product template also offers a dedicated Product price block with Size, Show unit price, and Bottom spacing options; see [Product Page (PDP)](/themes/olympus/products/product-page).
Renders a single product using the global product card design from Theme settings, then Product cards.
* **Product**: choose the product to show.
Use it to feature one product inside a content section, or several inside a horizontal Group to build a small hand-picked row.
A linked card for one collection with image, title, and optional button.
* **Collection**: the collection to link to.
* **Heading size**: Small, Body, or Heading 6 up to Heading 3. Default: Heading 6.
* **Aspect ratio**: Adapt to image, Square, Portrait, or Landscape. Default: Landscape.
* **Card color scheme**: a scheme for the card so it stands out from the section. Default: Scheme 5.
* **Show button** and **Button label**: on by default with the label Visit Collection.
* **Bottom spacing**: No, S, M, L, or XL added under the card.
A promotional card inserted into the product grid on the Collection Page (PLP). It carries its own Heading and Text blocks over an image or video.
* **Position**: the grid slot the card occupies, 1 to 25. If greater than the number of products, it appears at the end. Default: 5.
* **Column span**: 1 to 4 grid columns. Default: 2. Ignored when Scrollable band is on.
* **Scrollable band**: turns the card into a sticky feature with a scrollable shelf of the following products beside it.
* **Products in the band**: 2 to 12 products in the shelf, in steps of two. Default: 6.
* **Media**: Image, Mobile image, Video (plays muted and looped, and takes priority over the image), and Image overlay opacity from 0 to 80 percent.
* **Color scheme**: colors for the card's text and overlay.
See [Collection Page (PLP)](/themes/olympus/collections/collection-page) for how content cards fit into the grid.
## Best practices
Choose Heading level for document structure and Size for appearance. A visually large H2 keeps the page accessible without forcing a second H1.
When you need two columns of content, put a Group block around each column instead of adding many loose blocks. Groups are easier to reorder and restyle later.
Upload videos to Shopify files rather than linking YouTube or Vimeo. Hosted video loads faster, has no third-party branding, and supports autoplay reliably.
One Label above a heading adds hierarchy. A label on every section turns into noise and weakens the ones that matter.
Set a real end date and a clear Message after end date. Remove the block once the campaign is over.
Keep custom snippets inside Custom Liquid blocks so theme updates continue to apply to the rest of the theme.
## Related guides
The width, spacing, border, and color scheme controls that frame every block.
A blank section that accepts any theme block for fully custom layouts.
Product-specific blocks alongside the shared library.