Zeal Theme Documentation

Swatch styles in Zeal let you choose product swatches as circles or squares.
Badge settings let you control showing badges, their position, sale badge style, and the color scheme.

How To Showcase Product Color Swatches:
Zeal color swatches showcase all available product colors clearly and visually. They improve the shopping experience by making color selection faster and easier.

Zeal’s Search page lets you control the number of products per page and the number of products per column.
You can also configure filters, filter layout, product card settings, quick view, and quick view position.

The Filter Layout setting on the search page allows you to adjust the product filter layout. You can set it to vertical or drawer.
Click on the Filter button to open filter drawer

Vertical filter layout

Zeal’s Collection page supports both Sub-collections and a Collections Grid, allowing you to display grouped categories or individual collections.

Sub Collections section includes settings for the background color and the number of columns per row, and it allows you to add collections as blocks.

Collection section includes settings for image height, filter layout, and product cards, including an option to enable Show Quick View.

Pagination Type : The collection page includes Pagination, which by default shows page numbers after a defined number of products are displayed. This is useful for users who prefer structured navigation, allowing them to jump directly to specific pages and helping maintain consistent page load performance.

The collection page also supports Infinite Scroll, where products load automatically on via a “Load More” button. This approach is ideal for browsing-focused experiences, as it provides a smoother, uninterrupted product discovery flow and encourages users to explore more items without leaving the page.

The Zeals product page offers flexible settings for media, spacing, and color schemes, and provides a variety of blocks within section. These blocks include the variant picker, title, price, inventory status, quantity selector, add-to-cart buttons, collapsible content, and more. The product page also includes a Recently Viewed section.

The Variant Picker setting offers three options: Button, Dropdown, and Mixed. When Mixed is selected, color options are displayed as swatches, while the remaining options appear as dropdowns.

Button

Note: If you want the variant picker to display only as buttons or dropdowns (not swatches), please set the Swatch Shape to Default in the theme settings.

Dropdown

Mixed

Gift Wrapping

The Gift Wrapping feature allows customers to add a special wrapping option directly from the product page. This enhances the shopping experience by offering a personalized touch for occasions.

Recently Viewed Section

The product page also includes a Recently Viewed section that displays products the customer has previously visited. This helps improve product discovery and creates a more personalized shopping experience for customers.
The Recently Viewed section includes customizable settings to add a section heading, adjust font style and font size, control the number of columns per row, configure image ratio settings, set mobile column layout, and manage section padding for optimal spacing across devices.

Product Siblings Feature

The Product Siblings feature allows you to link related products (such as different color variants) on the product page. These linked products are displayed as swatches, making it easy for customers to switch between sibling products. Swatches can be shown as colors or product images, and their shape can be customized globally.

The footer is the bottom section of your Shopify store that appears consistently across all pages. It serves as a key area for secondary navigation, legal information, and trust-building elements. The footer contains the following settings:

1. Settings include newsletter signup, display of policy links, payment icons, footer color customization, and more.
2. Logo or image & description block setting with column width options.
3. Menu & heading block setting with column width options.
4. Contact information block setting with column width options.

A blog is your brand’s storytelling powerhouse. a dynamic space on your website where you share exciting articles, helpful tips, behind-the-scenes stories, and the latest updates.

The blog article card includes a content position setting, allowing you to place the content either to the right or at the bottom of the image.

blog post is a unique story you share with your audience, brought to life through an article template that shapes how your content appears on your site. This article template beautifully organizes every blog post page by showcasing:

1. The eye-catching title and publication date
2. A striking featured image or other media to draw readers in
3. An optional comments section for engaging with your readers

A powerful homepage grabs attention, builds trust, and guides shoppers effortlessly to what they’re looking for. It sets the tone, showcases your brand, and drives conversions. The homepage typically consists of the following sections:

Announcement bar, Header & Featured text section

Collection list

Countdown timer

Featured collection

Before after

Collection discount

Sticky Product Promo

Testimonial

Footer

The Featured Text section in Zeal includes settings to add an image, adjust the image position, and create blocks for the heading, subheading, and buttons.

The Featured Text block highlights important content by drawing attention to key messages you want users to notice. It includes settings for font size, block position, text alignment, and color, allowing you to fully customize its appearance.

The Heading block allows you to display and highlight the main heading for a section.

The Button block is used to add links within a section. It can link to a product, collection, page, etc.

The Collection List section has settings for the collection layout such as image size, desktop view, mobile view, and layout type (grid or slider). It also includes various blocks like Heading, Description, and Collection Item, where you can set the image, collection, and text.

The Heading and description blocks are used to display the heading and description on the left side of the section.
The Collection Item block includes settings to select a collection and display its image and title.

Featured tab is a dynamic section that displays products from multiple collections, allowing users to switch between them using clickable tabs. Each tab reveals the products of a selected collection, offering an interactive and organized shopping experience—all in one place.

The Featured Tab section includes settings for section border radius, subheading text, font size, image position, and image width, allowing you to customize the layout and appearance.

The Tab block includes settings for the tab title, tab description, tab image, and button.

The Image With Text section is a bold, eye-catching element that lets you combine stunning visuals with compelling messaging — perfect for turning browsers into buyers. Whether you're telling your brand story, promoting a featured collection, or announcing a limited-time offer, this section helps you do it with style and clarity.

The Heading block includes settings to add heading text and customize its font style and size. This section also provides Subheading and Description blocks to add their respective text.

The Button block includes settings to add a button label and URL. It also provides options to open the link in a new tab and to set the button style as Primary, Secondary, or Link.

The Image Banner section is a bold visual statement — designed to grab attention instantly. It's perfect for showcasing promotions, product launches, or brand messaging with a high-impact image and optional overlay text.

The Image Banner section includes a Heading block and a Button block. The Heading block allows you to add text and customize its font style and size. The Button block lets you add a button label and URL, choose whether the link opens in a new tab, and select the button style.

The Countdown Timer section offers flexible settings to add a video or image, set the end date and time (YYYY-MM-DD HH:MM:SS format), and include a promotional image. This section is useful for creating urgency and encouraging faster purchase decisions by highlighting limited-time offers, promotions, or upcoming events. The visual media and countdown timer help capture attention, improve engagement, and drive higher conversion rates.

The Countdown Timer section contains a Countdown block for the timer, a Heading block to display text with adjustable font style and size, and a Button block where you can add a label, set the URL, choose whether the link opens in a new tab, and select the button style.

The Featured Collection section includes settings for heading text and heading alignment, the number of products to display, and product card customization. Product card options include enabling Quick View and showing a secondary image on hover, helping create a more engaging and interactive shopping experience.

The Featured Collection section includes blocks for the product title, vendor, price, and options.

The Before & After section offers options to add a heading, description, product image, and both before and after images. This section is ideal for visually showcasing transformations or results, helping customers clearly understand the value and impact of the product.

The Before and After section highlights the visible transformation a product delivers, making its benefits easy to understand at a glance. By showing real results side by side, it builds trust and credibility with customers, increases engagement, and helps shoppers make confident purchasing decisions. This section effectively communicates value without relying on lengthy descriptions.

The Collection Discount section includes settings for a heading and description, collection selection, and the number of products to display. It also offers customizable product cards and a Coupon block, where you can add a coupon image, coupon heading, and coupon code. This section is perfect for highlighting special offers and encouraging customers to shop collections with exclusive discounts.

The Collection Discount section includes blocks for the product title, price, vendor, and options, allowing discounts to be displayed clearly while giving customers quick access to key product details.

The Sticky Product Promo section displays engaging sticky text along with a scroll image to capture attention as users browse the page. It includes settings for the scroll image, button label, and background image. For best visual balance, it’s recommended to use a landscape background image with reduced height.

The Sticky Product Promo section includes blocks for an image, description, and featured text, ensuring important promotional content remains visible as users scroll. This section helps highlight key product messages, attract attention, and encourage conversions effectively.

A Featured Product Section spotlights a single, high-priority product that you want to promote front and center. It's designed to grab attention, tell a story, and drive direct action — like adding to cart or learning more.

The Featured Product section includes blocks for the vendor, title, price, sku, separators, description, variant picker, inventory status, quantity selector, add-to-cart buttons, and share buttons. These blocks work together to present complete product information and make purchasing quick and user-friendly.

Variant Background Color

The Variant Background Color feature allows you to dynamically change the entire section background color based on the selected product variant. When a customer selects a different variant, the background color of the whole section updates automatically, creating a more immersive and visually engaging shopping experience.

Variant Background Color Display

Once enabled, the entire section background color will automatically change when customers switch between product variants. This creates a more dynamic layout and helps highlight different variants more effectively.
The feature enhances visual consistency and can be used to match product themes, branding, or variant-specific styling across the section.

A Testimonial Section showcases quotes, feedback, or reviews from real customers, clients, or influencers. These are usually displayed as testimonial blocks — styled cards or boxes that make each piece of feedback stand out.

The testimonial section includes a testimonial block, as shown below.