Tessera: merchant setup guide

1. Getting started#

Install#

1. In Shopify admin go to Online Store > Themes.
2. Add Tessera from the Theme Store (or upload the theme ZIP) and select Customize.
3. Open Theme settings (the paint brush icon) in the editor.

Choose a preset#

When you install from the Theme Store, you get the home page layout of the preset you picked. Switching preset later in the editor changes only the theme settings (fonts, colors, corners, header, cards). It does not rearrange your sections or change your content. Choose the preset first and fine-tune afterwards, because it replaces your Theme settings values.

Before you build the pages#

• Create the menus you need in Content > Menus: main-menu (header), footer and customer-account-main-menu. For a mega menu, add sub-menus and sub-sub-menus to a main menu item.
• Create your collections and add them to the menu.
• Install Shopify's free Search & Discovery app. It controls the filters on collection and search pages and the complementary products shown on the product page.
• Add countries in Settings > Markets and languages in Settings > Languages if you want the country and language selectors to appear.
• If you sell subscriptions, install a subscription app that provides selling plans. Tessera shows the options; it does not create plans.
• If you want star ratings, install a product reviews app that writes the standard rating metafields (see Metafields).
• Tessera is translated into 21 languages (see the FAQ). Other languages can be added with Shopify's language settings.

2. Theme settings#

Everything in this section lives in Theme settings.

Logo and favicon#

Upload a Logo, and an Inverse logo for transparent headers over images and for dark color schemes. Set the width for desktop (50 to 300 px) and mobile (40 to 200 px). Add a 32 x 32 px Favicon.

Colors and color schemes#

Each preset has five color schemes, always in the same roles: 1 the page, 2 an alternate surface, 3 the inverse (dark) surface, 4 an accent band, 5 text over images. Every section has a Color scheme setting, so you change the mood of a section by changing its scheme. Edit the schemes themselves under Colors. Each scheme sets background, text, accent, button and border colors.

• Show the accent color on (accent_usage): buttons, badges or both. Links always use the accent. Tessera has no accent hue at all; Facet uses its green on badges; Ampere and Saffron use their accent on buttons and badges.
• Badges: set the colors of the sale, sold out and custom badges.

Typography#

• Heading font, Heading weight (automatic or 400 to 800), Heading scale (compact, default, large or display), Heading size (80 to 150%), Heading case (as typed or uppercase) and Heading letter spacing.
• Body font and Body text size (90 to 130%).

Uppercase headings run one size smaller automatically. Fonts come from Shopify's font library.

Layout#

• Page width (1200, 1440 or 1680 px), Page margin, Space between grid items.
• Space between sections: tight, default or airy.
• Shape: button corner radius, input corner radius, card corner radius and media corner radius. Presets use either square corners everywhere or rounded corners everywhere; mixing them tends to look unplanned.
• Show button labels in uppercase, and Secondary button style (solid, outline or underline). Primary buttons are always solid.

Header#

• Header layout: classic (logo left, menu center, icons right), centered (logo center, menu on a second row), split (menu split around a centered logo) or floating (an inset bar with rounded corners).
• Transparent over the first section on the home page: the header floats over the first slide and turns solid on scroll. It needs a slideshow or video as the first section.
• Sticky header: none, always, or only when scrolling up.

Product cards#

• Image ratio (adapt, portrait, square, landscape) and Image fit (cover or contain). Use contain for products photographed on white.
• Card style: minimal (image, then title and price), tile (the image on a tinted tile) or boxed (a card with padding and a border or shadow). Tile color sets the tile; Show a soft shadow on boxed cards swaps the border for a shadow.
• Toggles: second image on hover, vendor, product rating (needs a reviews app), color swatches, quick add. Text alignment is start or center.
• Badges: position, sale badge format (text, percentage or amount), sold out badge, and the custom badge tag prefix. A product tagged badge:New shows a "New" badge.
• Swatches: shape (circle or square) and size.

Cart#

• Cart type: drawer or page.
• Show order note in cart drawer and Show product recommendations in cart.
• Show free shipping progress bar and Free shipping minimum. Create a matching free shipping rate in Shopify's shipping settings; the theme only shows the progress.
• Gift wrap product: pick a product and shoppers can add it to the cart as gift wrap.

Search behavior#

• Enable search suggestions, with toggles for vendor and price in suggestions.
• Popular searches menu: links shown in the search window before the shopper types.
• Featured collection: products shown in the search window before the shopper types.

Other#

• Animations: reveal sections on scroll, and the hover effect on images (none, zoom or lift). Motion is switched off for shoppers who prefer reduced motion.
• Social media: add your account links once; the footer, the announcement bar and the mobile menu use them.
• Currency format: show currency codes next to prices.
• Preset name: a text label the theme uses as a style hook. Leave it as it is.

3. Sections and blocks#

Header and mega menu#

Section: Header.

• Menu: choose the menu (default main-menu).
• Show every submenu as a mega menu: items with sub-sub-menus always open a full-width panel; turn this on to use it for every item.
• Menu promo blocks (up to 8 in the header): an image, a heading and a link. Type the exact title of a top-level menu item in Menu item; each item shows its first two promos in the mega panel.
• Icons: show search, show account (only if customer accounts are enabled), show social links in the mobile menu, country and language selectors.
• Account menu: the links of the account sheet (default menu customer-account-main-menu).
• Color scheme, Menu color scheme and Show bottom border.

Layout, transparency and sticky behavior are in Theme settings > Header.

Announcement bar#

Section: Announcement bar. Add Announcement blocks (text and link) and optional Countdown blocks (text, end date YYYY-MM-DD, end time HH:MM, time zone). A countdown leaves the rotation when its time is up. Settings: rotate automatically, change every 3 to 10 seconds, show arrows, text size, social icons, and country and language selectors on large screens.

Slideshow#

Section: Slideshow (the usual home page opener).

• Section: Full width (off gives an inset slideshow with rounded corners), Height and Height on mobile (adapt, small, medium, large, full), Show text below the image on mobile, Show line pager, Show navigation arrows, Rotate slides automatically and the interval. A pause button is always shown.
• Slide block: Layout: overlay (text on the image), split (image on one half, a panel on the other) or diptych (two images side by side). Split and diptych suit portrait photos. Desktop image, Second image, Mobile image, Video (muted, looping), Scrim strength (a gradient from the side where the text sits), eyebrow, heading and its size, text, up to two buttons with a style each, Content position (nine positions), Text alignment, Text style (light, dark or box) and a color scheme.

Collection list, featured collection and collection tabs#

• Collection list: add Collection blocks. Layout grid or carousel, image ratio, card style (label below or over the image), show product count, columns.
• Featured collection: pick a collection, the number of products, grid or carousel, columns, arrows and a "View all" link.
• Collection tabs: up to 6 Tab blocks, each with a collection and a label. Tab style pills or underline.

Image with text#

Section: Image with text. Add text, heading, button and other blocks. Settings: image position and width, image ratio, Show a second, overlapping image (the second image overlaps a corner of the first at 40% of its width), full or contained width.

Marquee#

Section: Marquee. Text blocks (large text with an optional link, in the heading or body font) and Image blocks. Speed, direction, pause on hover, text size, solid, muted or outline text, separator (none, dot, star or sparkle). A pause button is always available and motion stops for shoppers who prefer reduced motion.

Shop the look (hotspots)#

Section: Shop the look. Choose an image, then add Hotspot blocks: pick a product and set its horizontal and vertical position. Each pin opens a product card. Layout image or products (a list beside the image), show numbers, pulse. Use Adapt to image as the ratio to keep pins exactly where you placed them on every screen size.

Before and after#

Section: Before and after. Two images (use the same size and framing), labels, a starting position, ratio. Add text blocks beside it if you want.

Testimonials, logo list and gallery#

• Testimonials: layout quote, grid or carousel; Testimonial blocks with rating (0 hides the stars), title, quote, author, details, photo and a reviewed product. Write real customer quotes only.
• Logo list: layout grid or marquee, logos in grayscale, and an optional Quote per logo that shows when the logo is selected. Use it for press mentions you have permission to show.
• Image gallery: grid, mosaic or carousel. Each Image block can have a caption, a link and a product (a product tag shows on hover).

Video, countdown, timeline and comparison table#

• Video: an uploaded video (background mode, muted) or a YouTube or Vimeo link (loads only after the shopper presses play). Needs a cover image and a description for screen readers.
• Countdown timer: a fixed end date, time and time zone; it never restarts. Use it for real deadlines only. Choose what happens at the end: hide, or show a message.
• Timeline: Milestone blocks with a date, heading, text and image; vertical or horizontal.
• Comparison table: 2 to 4 columns, a highlighted column, Row blocks with a tick, cross, text or empty cell, and Row group heading blocks.

Section (build your own)#

Section: Section. A container for any blocks (text, button, image, icon, video, group, app blocks). It has nine starting layouts: section, hero, rich text, image with text, multicolumn, icons with text, call to action, stats and FAQ. Settings: direction, width, alignment, gap, minimum height, background image or video and overlay.

Icon row, blog posts, contact form, newsletter#

• Icon row: up to 8 Item blocks with an icon (or your own small image), title, text and link. Use it for shipping, returns and payment reassurance.
• Blog posts: pick a blog; grid or carousel; excerpt, date and author toggles.
• Contact form: name, email and message are always shown; phone is optional; add Custom field blocks (text, text area, number, date, select, checkbox).
• Newsletter: centered with a background image, or split with an image. Subscribers are added to your customer list with email marketing consent.
• Newsletter popup and Age verification sit in the overlay group and are switched off by default. The popup never shows on the password page or to subscribers; set the trigger (delay or exit intent), the frequency and an optional discount code you create in Discounts.

Footer#

Section: Footer. Blocks: text, menu, group, email signup, social media icons, logo, image, button, payment icons, custom Liquid and app blocks. Settings: wider first column, columns on mobile, country and language selectors, Show Follow on Shop button (needs Shop Pay), payment icons, policy links, copyright text, and Show a large wordmark (your store name in the heading font as a full-width row).

Collection page#

Section: Collection.

• Banner: none, compact or image. Image banners use the collection image, or Fallback image. Height, overlay opacity, alignment, description and breadcrumbs.
• Grid: products per page (8 to 48), columns on desktop (2 to 5) and mobile, Show grid layout switch (shoppers choose larger or smaller products and the choice is remembered), Pagination: numbered, load more or infinite, and Show product count.
• Filtering and sorting: Filter layout drawer, sidebar or horizontal; expand filter groups; show counts; Sticky toolbar. On phones the toolbar becomes a floating "Filter and sort" pill. Filters are the ones you set in Search & Discovery.
• Sub-collection chips block: pick a menu and each link becomes a round chip with the collection image.
• Promo tile block: an image tile placed in the grid at a position you choose (1 to 48), one or two columns wide, with heading, text and a button. It shows on the first page only.

Product page#

Section: Product information. Settings: media position (left or right) and width, Gallery layout (stacked, thumbnails, carousel or media gallery block), Tinted media background (sits white packshots on a tinted tile), breadcrumbs, Keep product details visible while scrolling, space between blocks, Show sticky add to cart bar (and whether it shows on desktop). On mobile every layout becomes a swipe carousel with a line pager.

Add and reorder blocks in the buy box. Blocks, with their main settings:

Below the product, the default template shows an icon row, related products and recently viewed products.

Cart and search#

• Cart page and Cart drawer: vendor toggle, empty-cart collection links, recommendations (heading, number, related or complementary), a sticky order summary.
• Search results: result type tabs, grid, density switch, pagination, filters and sorting, as in the collection page.

4. Metafields#

Tessera does not require any metafield. The only data it reads from metafields is the rating from a reviews app.

Most reviews apps write these for you. Example of a rating value:

{ "value": "4.6", "scale_min": "1.0", "scale_max": "5.0" }

You can also connect any text metafield to a setting in the editor. Select the Connect dynamic source icon next to a setting that supports it (for example the Value of a Specification row, or the text of an accordion row) and choose a metafield. Create the metafield definition first in Settings > Custom data.

Other store data the theme uses:

• Product tags starting with badge: become custom badges (change the prefix in Theme settings > Product cards).
• Selling plans come from your subscription app.
• Complementary and related products come from Search & Discovery.
• Option swatches come from the product options in Shopify admin.
• Unit prices come from the unit price measurement on the variant.

5. Home page recipe#

The default home page order works for all four presets:

1. Slideshow (the first section; required if the header is transparent).
2. Collection list (three tiles, label over the image).
3. Featured collection, "New arrivals", as a carousel.
4. Image with text (the second image overlaps).
5. Marquee.
6. Shop the look.
7. Featured product.
8. Gallery.
9. Icon row (returns, secure checkout, help, tracked delivery).

The newsletter sign-up lives in the footer, so it appears on every page. The shipping promise is stated once on each page (the announcement bar), and the marquee carries brand lines, not offers. There are no testimonials or press logos in the default home page because the theme cannot invent them: add a Testimonials section when you have real customer quotes, and a Logo list only for press mentions you have permission to show.

On phones every slide of the slideshow takes the same height, including a split slide (image above, panel below). If you pick the same height setting for phones as for desktop, the first slide's controls stay above the fold.

Replace the demo products, collections and images with your own. Remove sections you do not need.

Two optional extras are wired but wait for your content: create a page with the handle size-guide (a size chart) and the Size guide link appears on products that have a Size option; and in Theme settings > Search behavior, set a popular searches menu and a featured collection so the search window is never empty.

6. FAQ#