Sections

Every section has a Color scheme and, in most cases, Top padding and Bottom padding. Padding is the size on a wide screen and scales down on smaller ones. Side padding sets the space at the left and right: Page margin (the width in Theme settings > Layout), None (edge to edge) or Custom, with its own Left padding and Right padding. On phones the side padding never goes wider than the page margin.

Headings can be moved and resized too:

• Heading layout (Featured collection, Collection list, Blog posts, Collage, Ingredient list, Product numbers, Video, Article products, Multicolumn): Text beside heading, Text below heading or Centered.
• Text alignment (Image with text, Image with products, Collection spotlight, FAQ, Contact form, Feature list, Routine, Routine quiz, Timeline, Page header): left, center or right for the heading, text and button blocks.
• Heading size and Heading alignment (collection, search, page, article, blog, collections list and cart pages, plus Related products, Complementary products and Apps): size as a percentage of the theme’s heading size, aligned left or center.
• Heading blocks keep their own Size (Small, Medium, Large); Image banner, Slideshow, Rich text and Quote already have their own position and alignment settings. Most sections are built from blocks: drag blocks to reorder them, and use the eye icon to hide one.

Many sections share three blocks:

• Heading: text, Size (Small, Medium, Large, Extra large) and Start italic text on a new line, which puts the words after a line break in italics.
• Text: a short paragraph.
• Button: label, link and Style (Arrow button, Primary, Secondary, Underlined link). Write [count] in a label to show the number of products.

Header and footer

Announcement bar

Add an Announcement block per message, each with optional link. With two or more, turn on Rotate announcements and set Time per announcement.

Header

• Menu is the main menu. Nested links become the mega menu (see Getting started > Menus).
• Menu feature blocks add an image card to a mega menu panel. Set Show under menu item to the top-level link’s title. Menu note adds a short line at the bottom of a panel.
• The Button label and Button link add the “Shop all” button next to the menu.
• Show header over the first section makes the header transparent over a full-width first section on the home page. Set the text colors for desktop and mobile so they read on your image.
• Show country/region selector and Show language selector appear when your store sells in more than one country or language.

Footer

Blocks: Email signup, Menu, Text, Social media (icons from Theme settings, plus Show Follow on Shop) and Highlight. Section settings add the large wordmark, copyright, policy links, payment icons and selectors.

Home page and content sections

Image banner

A full-width or inset image with text. Use the Call to action preset for a closing banner.

• Height: from small to full screen. A full screen banner at the top fills the screen under the header.
• Content position, Image overlay and Show film grain control how text sits on the image.
• Mobile image and Mobile text color scheme let phones use a different crop and text color.
• Blocks: Heading, Text, Button (with Detail, for example “[count] formulas”), Caption (small corner text), Wordmark (large brand name fitted to a width), Product card (a frosted card that cycles through the chosen products).

Slideshow

Add a Slide block per slide: image, mobile image, heading, text, button and overlay. Change slides every sets autoplay; visitors can pause it. Give the slideshow an Accessible name for screen readers.

Image with text

Image beside text. Choose Image position, Image width and Image ratio. Add a Second image for an overlapping pair. Blocks: Caption, Heading, Text, Button, List item (title and text rows).

Image with products

A large image with up to three frosted Product card blocks over it, plus heading, text and button.

Rich text

Heading, text and buttons on a plain background. Layout can place the button beside the text.

Multicolumn

Columns with image, heading, text and link. Mobile layout chooses swipe, stack or grid. Turn off Show image placeholders for text-only columns.

Featured collection

Products from one collection as a grid or a swipe row. Card options: second image on hover, quick add, benefit and actives, vendor.

Featured product

A full product form on any page, built from the same blocks as the product page (title, price, variant picker, buy buttons, media and more). Supports app blocks.

Numbered products

Product cards with the product number behind a cutout image. Add a Product block per card; upload a transparent PNG as Cutout image for the best result. Label and Detail default to the step and actives.

Collection spotlight

A collection panel with image, heading, text and the products. Write [count] in text for the number of products and [price] in the button label for the lowest price. Feature blocks add short highlights; Product blocks show cutouts.

Routine

Up to three routines as tabs (for example Morning and Evening). In each Routine block, pick an image, the products for each step, and optionally a Set product: the button then adds the set and shows the saving. Without a set product, the button adds every step.

Collection list

Collection cards. Add a Collection block per card; the image falls back to the collection image.

Collage

A mosaic of Image, Product and Collection tiles. Large tile position picks which side holds the big tile.

Video

An uploaded video or a YouTube or Vimeo link, with a cover image. Play uploaded video in the background turns it into a muted looping background with a pause button. Add a Video description for screen readers.

Newsletter

An email signup form. Subscribers are added to your customer list with email marketing on.

Contact form

Name, email, optional phone and message, plus extra fields: Dropdown field, Text field and Consent checkbox blocks. Contact detail blocks list addresses, phone numbers or hours beside the form. Messages go to your store’s sender email.

FAQ

Add a Question block per question. Keep one answer open at a time makes it an accordion. Add FAQ structured data for search engines marks it up for Google. Table row blocks add a table under the questions, for example shipping rates.

Blog posts

The latest posts from one blog, with image, tag, date and excerpt options.

Featured blog post

One post shown large with image, tag, reading time and date. Pick a post, or a blog to show its latest post.

Quote

A large quote with attribution.

Feature list

A list of short items (title and text), for example “What we leave out”.

Timeline

Event blocks with a year or date, title and text.

Page header

A page title band with text, buttons and Jump link blocks. A jump link scrolls to a section on the same page: set that section’s Link name (on FAQ and Contact form) and choose it in Section on this page.

Ingredient index

Jump chips that link to each ingredient in an Ingredients section on the same page.

Ingredients

Ingredient rows or cards, one Ingredient block each. Use Start with ingredient and Number of ingredients to split them across two sections, for example three large rows and then cards. Products shown: each ingredient’s own product list, or Products that contain it (products whose ingredient list, metafield aune.ingredients, names the ingredient’s Latin name or its genus), in product number order.

Routine finder

A short quiz that builds a routine.

1. Add a Question block, then its Answer blocks right after it. Repeat for each question.
2. On each answer, list the tags to favor (Recommend products tagged) and to avoid (Leave out products tagged). Leave out routine steps skips steps, for example SPF for an evening routine.
3. Routine steps maps step names to product steps or types, one per line, for example Treat: serum, mask, eye care.
4. Products to choose from is the collection the quiz picks from (it reads up to 50 products).

The result shows one product per step, the total and a button that adds the routine to the cart. Link to the page with ?answer= and an answer to the first question, for example /pages/routine?answer=dry, to start with that answer chosen.

Custom section

Build your own layout from blocks, like a page builder. Start from a preset: Custom section (heading, text, button), Text and image, Three columns or Heading and buttons. Section settings: Width (page, narrow or full width), Maximum width for the narrow column, Side padding (page margin or custom left and right), Alignment, Gap, Color scheme and padding.

• Group: holds other blocks and stacks them Vertical or Horizontal (a row). Set Alignment, Position, Gap, Width (Fill, Fit content or a custom %), Minimum height, its own Color scheme, Corner radius, padding and a Link that makes the whole group clickable. Horizontal groups stack on phones unless you turn off Stack vertically on mobile. Groups can go inside groups.
• Columns: every block inside becomes a column. Set Columns on desktop (1 to 6, tablets show up to two), Columns on mobile, Vertical alignment and the gaps. Put a Group in a column to stack several blocks in it.
• Heading, Text (body, large, small or quote), Image (shape, width, rounded corners, link), Button (primary, secondary, rounded with arrow or underlined link) and Spacer (size on desktop and mobile, optional divider line).

Custom Liquid

Add Liquid, HTML or app snippets. Turn off Use page margins for full-width code.

Apps

Holds app blocks, such as product reviews. Hidden on the store until it has an app block.

Product page

Product information

The main product section. Every element is a block you can reorder or remove: Breadcrumbs, Number and step, Title, Vendor, Product rating, Price, Unit price, Shop Pay Installments, Description, Highlights, Actives, Set contents, Variant picker, Quantity selector, Buy buttons, Pickup availability, Perks, Collapsible tab, Also in sets, Share, Text, Custom liquid and app blocks.

• Actives: dose and name from aune.actives, with images from aune.active_images (a list of files in the same order). Image for other actives and Second image for other actives cover actives without their own image.
• Set contents: for set products, lists the products in metafield aune.contents with their full-size prices, and (with Show savings) the saving against buying them one by one.
• Also in sets: “Also in [sets], at a lower price.” linking the sets in metafield aune.sets.
• Desktop layout, Image shape and Crop images to fill the frame set the gallery. Images open full screen on click; videos, YouTube, Vimeo and 3D models are supported.
• Assign a variant image in the admin and it moves to the front when that variant is chosen.
• Variant picker styles: tiles with prices, buttons, dropdown or swatches.
• Buy buttons show the dynamic checkout buttons by default, and the gift card recipient form for gift cards.
• Show a buy bar after scrolling past the button adds a slim bar with the price and Add to cart.

Complementary products

“Complete the routine”: the current product plus the products paired with it in Search & Discovery, with the total and an “Add all” button. Hide on sets (on by default) keeps it off set products, which list their own contents.

Related products

Automatic recommendations from Shopify.

Collection and search

Product grid

The collection page. Filters come from the Search & Discovery app and show in a left column (a bottom sheet on phones). Sorting, a product count and “Load more” pagination are built in. Promo tile blocks add an image or product tile after a chosen product on the first page.

Search results

The same grid and filters for search, plus matching blog posts and pages.

Collections list

All collections, with card style, image ratio, description and product count options.

Blog

Blog posts list

The blog page: tag filter, the latest post shown large, a grid and “Load more”.

Blog post

The article: breadcrumbs, excerpt, date, author, reading time, featured image, tags and comments (when comments are on for the blog).

Products in post

Products from the post’s aune.products metafield, or the products chosen here.

Next post

A card linking to the next post.

Other pages

Cart

The cart page: lines, quantity, discounts, note, free shipping bar, checkout and dynamic checkout buttons. The free shipping bar, note and empty cart text are in Theme settings > Cart.

Page

The default page content with three layouts and an optional list of the page’s headings.

Password page

The page visitors see while your store is password protected: background image, heading, email signup and the password form. The message is set in Online Store > Preferences.