Tessel is a Shopify theme for brand led stores that sell a focused range of products. These docs walk you through every setting in the theme editor. If you get stuck, use the support form and we will reply within two business days.
Before you edit a theme you already use, click Duplicate on the Themes page so you always have a copy to go back to.
Tessel uses four color roles instead of dozens of separate color settings. Each role has a Background and a Foreground (the text and icon color on that background).
Most sections have a Color scheme setting. Pick Primary, Secondary, Inverse or Supporting and the section uses that pair. Keep enough contrast between each background and foreground so text stays readable.
Add links to your Facebook, Instagram, TikTok, YouTube, Pinterest and X profiles. Icons appear in the footer only for the links you fill in.
All sections below can be added to any page that supports sections. Click Add section in the theme editor and pick one.
Full width images with a heading, text and button on each Slide (up to five). Choose the Height, an Image overlay to help text stand out and the Content position and Text color for each slide. Change slides every sets autoplay; set it to 0 to turn it off. Shoppers can always pause, swipe or use the arrows. On phones choose Text on image or Text below image.
A moving strip of short messages, such as shipping offers or brand values. Add an Item block for each message, with an optional link. Choose the Text size, Speed and Separator icon. It stops moving for shoppers who prefer reduced motion and pauses when hovered.
Show products from up to five collections, each as a Tab. Shoppers switch tabs without leaving the page. Choose Carousel or Grid, how many products to show and how many columns to use on desktop.
Up to six Item blocks with an icon, heading and short text. Good for benefits like free shipping, returns or how your products are made. Choose Plain, Cards or Divided.
Two images that shoppers compare by dragging a slider. Add a Before image, an After image and a label for each. Only show comparisons you can stand behind.
A carousel of up to twelve Review blocks with a star rating, title, quote, author and an optional product. Only use real reviews from real customers. The optional Summary line is a good place for your average rating from your reviews app.
Shows the latest posts from the Blog you choose, with images, dates and an optional excerpt.
Tessel's signature hero. One section, three layouts. Change the Layout at any time and your content stays in place.
Settings: Eyebrow, Heading, Text, Button label, Button link, Image, Mobile image, Product, Color scheme and Density. The Mobile image is optional and replaces the main image on phones.
Blocks:
Walk shoppers through a routine, a look or a set in two to five steps. Each Step has a Label, Text and a Product. Shoppers tick the steps they want and add them to the cart together. The total shown is the plain sum of the selected prices; Tessel never invents a bundle discount. Products with options (like sizes) link to their product page so the shopper can choose.
A featured collection with a choice of Rhythm:
Add up to two Story tile blocks with an Image, Heading, Text and an optional button. Set Products shown to 4, 8 or 12. Tessel adjusts the number of products so rows always stay full.
Add a Collection block for each collection you want to show. Choose a Style: Tiles, Circles (great for shop by category) or Text on image. If a collection has no image, Tessel uses its first product image. You can also set a different image on each block.
An image beside a heading, text and button. Choose the Layout (image first or second) and the Image shape (portrait, square or landscape).
A heading, text and optional button for brand statements or launch notes. Set Alignment to Start or Center.
Up to six numbered Fact blocks, each with an optional Image, a Heading, Text and a link. Great for ingredients, materials or how something is made.
Up to six Quote blocks with the Quote, Author and Context. Only use real quotes from real customers. For star ratings, install a reviews app and add its block to the product page.
Upload a video or paste a YouTube or Vimeo link in External video. Videos never play automatically.
A newsletter form. Signups are added to your customer list with the newsletter tag and appear in your admin under Customers.
Up to eight Logo blocks for press or partners. Add an Image, a Name (used as alt text, or shown as text if there is no image) and an optional Link.
A list of expandable questions. Add a Question block for each one.
Custom Liquid lets you add your own Liquid or HTML. Apps holds blocks from apps you install. Neither is needed for the theme to work.
Choose how each product page is laid out with Product composition:
To use a different composition for some products, create a new product template in the theme editor, set its composition and assign it to those products in your admin.
Product media shows in a swipeable gallery. Choose the Gallery layout: thumbnails below, thumbnails on the side or a grid. Turn on Enable image zoom to let shoppers open images full screen. When a shopper picks a variant with its own image, the gallery jumps to it. Turn on Show sticky add to cart bar to keep an Add to cart button at the bottom of the screen once shoppers scroll past the main one.
Title, Vendor, Rating, Text, Price and availability, Product options, Purchase options, Inventory status, Quantity, Buy buttons, Icons, Description, Store pickup, Collapsible tab, Share and Custom Liquid can be reordered or removed.
Option swatches use the colors and images you set on your product options in the admin. Choosing an option updates the page in place. Purchase options appear when a product has subscriptions from a subscription app.
Tessel can show proof next to your products in a clear, structured way:
Incomplete entries are hidden automatically, so nothing half finished reaches shoppers. Only publish claims you can support.
Product pages include two Product recommendations sections. Set the Recommendation type to Related products or Complementary products. Complementary products are chosen in the free Shopify Search and Discovery app. If there is nothing to show, the section hides itself.
Gift card products work out of the box. Turn on Enable gift recipient fields in the Buy buttons block to let shoppers send a gift card to someone else by email.
Collection pages show the collection image as a banner (turn this off with Show collection image as a banner), a product count, sorting and a Filter button that opens a filter panel. Results update as shoppers choose filters, and active filters show as removable pills. Choose 3 or 4 columns and how many products load per page. Choose which filters appear in the Shopify Search and Discovery app. Product cards show Sale and Sold out badges automatically from your product data. As shoppers type in search, suggestions appear.
By default, adding a product opens the cart drawer. Shoppers can change quantities, remove items, add a note, see their progress to free shipping and add a recommended product without leaving the page. The full cart page is still available from the drawer, with order notes, discounts, subscription details and accelerated checkout buttons such as Shop Pay. To skip the drawer, set Cart type to Page in Theme settings.
To control which part of an image stays in view when it is cropped, set a focal point on the image in your admin (open the image, then choose Edit focal point).
Open Theme settings, then Brand, and choose a Body font and Heading font.
In your admin, go to Online Store, then Navigation. Drag menu items under another item to nest them. Tessel supports three levels.
Shopify needs some time and order history to learn related products, and it leaves out sold out items. For complementary products, add them in the Search and Discovery app.
Yes. Install any reviews app from the Shopify App Store. Apps that save ratings in Shopify's standard product reviews metafields show stars on product cards and in the Rating block automatically. You can also add the app's own block to the product page.
Open Theme settings, then Cart, and enter your free shipping amount. Then create the matching free shipping rate in your admin under Settings, then Shipping and delivery.
Yes. Install a subscription app. Purchase options then appear on product pages and in the cart.
Create a new product template in the theme editor, choose its Product composition, then assign the template to that product in your admin.
Tessel loads very little JavaScript and loads images only when needed. Apps you install add their own weight, so remove apps you no longer use.
Yes. Tessel works with Shopify Markets and translation apps. The country and language selectors appear automatically when you sell in more than one market or language.
Use our support form to report a problem or ask a question. Include your store URL (for example, your-store.myshopify.com) and a screenshot if you can. We reply within two business days and fix critical bugs as soon as we can.
Support covers the theme's own settings and features. Custom code changes are not covered. If you want to change the theme's code, duplicate your theme first, and consider hiring a Shopify Partner for larger changes.
We offer a comprehensive suite of digital marketing services that cover all aspects of online presence. From SEO and social media marketing to content creation and PPC advertising, we have the expertise and resources to handle diverse marketing needs.