Documentation

Not finding what you need? We're here to help! Contact us

FAQs

chevron_left chevron_right

View all

Do you do collaborations or provide theme customization services?

How can I customize the font or color of product card badges?

How can I make cards all equal height?

To make all cards in a row be equal height, we must stretch cards to be the full height of the row.We will be adding better settings for this in the near future, but in the meantime you can add a small snippet of custom CSS to the section's Custom CSS setting: In your theme editor, click the section you want to edit. Scroll to the bottom of the section settings and click into the Custom CSS settings. Type or paste the code below to stretch cards to be 100% height. Save your work! Here's the custom CSS you'll need to add: .card {height: 100%;} And if you want the card text to always be directly under the image (instead of anchored to the bottom of the card), you can add this CSS too: .card__content { justify-content: flex-start; } 👀 Video screencapture showing how to use custom CSS to stretch all cards to be equal height. 👀 Video screencapture showing how to get text to go directly under the image Align theme

How do I add an anchor link to the FAQ page?

How do I create a callout within a blog post?

How do I get a product's slideshow gallery to automatically switch to the correct variant image?

How do I get the ReCharge app to work on product pages?

How do I remove the “Add to cart” button from product cards?

How do I update my theme?

How do I use a custom font?

How to I get banners to look better in desktop and mobile?

What is an Accordion block?

A block for stacked, expandable information tabs. Used for FAQs, additional details, etc.

What is the recommended image size for a banner?

Who are these people?

Why do some product cards have the "View Product" button while others have the "Add to cart" button?

Why does the demo look different than the theme trial?

Why is my video not playing with audio?

Why no reviews?

Theme settings

Create a totally unique look to match your brand.

chevron_left chevron_right

View all

All cards

The All cards theme settings group is essential for managing the appearance and functionality of card components across the theme. These settings ensure a consistent look and feel for various card types, such as product, collection, and article cards, and are applied globally. They can also be overridden at the section or block level for more specific customization. Key settings include the ability to select a default image for cards, ensuring that all cards have a visual element even when no specific image is set. Additionally, the Show box shadow setting adds a shadow effect to card borders, enhancing visual depth and making cards stand out more prominently. The default setting for this feature is true, meaning the shadow is applied by default. Practical usage examples include setting a default image to maintain a uniform look across your store when some products lack specific images. Enabling the box shadow can add elegance and focus to product displays, particularly in minimalist designs, without overwhelming the overall aesthetic. These settings provide a foundation for a cohesive and visually appealing presentation across the theme.

Article cards

The theme settings for article cards offer a range of customization options to enhance the appearance and functionality of article cards across your shop. These settings are applied globally but can be adjusted at the section or block level for more specific customization. Key settings include card style, image aspect ratio, button style, caption, text display, and alignment, all designed to create a cohesive and visually appealing presentation of articles. For practical usage, you can customize the card style by selecting the "No image" option to achieve a minimalistic look, focusing on text content. Adjusting the image aspect ratio to "Widescreen" provides a cinematic presentation, giving article images a broader, more expansive look. To make call-to-action buttons stand out, choose the "Extra large" option, increasing the button size for greater prominence and user engagement. These settings help create a consistent and engaging user experience across your shop.

Cart

The Cart theme settings are crucial for customizing the shopping cart experience across the shop, influencing how customers interact with their purchases. These settings control the cart's overall look and feel and can be applied globally or overridden at the section or block level. Key features include options for mini cart buttons, currency code display, dynamic checkout buttons, and order notes, all designed to enhance user experience. The cart announcement settings provide additional information or reassurance during checkout, with customizable icons and text. The empty cart settings encourage users to add items by personalizing the empty cart message and appearance, including icons, headings, subheadings, and button styles. Usage examples include enabling both checkout and view cart options for flexibility, displaying currency codes for international clarity, using cart announcements to reassure customers, and customizing empty cart messages to encourage product exploration. These settings collectively aim to improve customer engagement and streamline the shopping process.

Collection cards

The Collection cards theme settings are designed to provide default configurations for all collection cards within the theme, ensuring a consistent look and feel across the shop. These settings can be globally applied but also allow for customization at the section or block level for more specific adjustments. Key settings include card style, image aspect ratio, button style, and text alignment, each offering various options to tailor the appearance and functionality of collection cards. For practical usage, setting a default card style and image aspect ratio helps maintain uniformity, which is crucial for brand consistency. Highlighting specific collections can be achieved by selecting a more prominent button style, such as "Extra large" or "Primary." Additionally, optimizing text settings ensures important information is visible and easy to read, enhancing the overall shopping experience. These settings provide a flexible framework for customizing collection cards to align with the shop's theme.

Colors

The theme settings offer a comprehensive way to control the overall look and feel of your shop by customizing core color settings. These settings apply across the entire theme but can be overridden at the section or block level, allowing for a cohesive and visually appealing design. Key components include background colors, text colors, button colors, banner colors, card colors, icon colors, input colors, and miscellaneous colors, each providing specific customization options to enhance your shop's visual identity. By adjusting the background and text colors, you can create a unique look that aligns with your brand's identity. Use hover colors for buttons and links to provide visual feedback, improving the user experience. Additionally, set distinct colors for sale prices and banners to draw attention to promotions and special offers. These settings enable users to effectively customize their shop's appearance, ensuring a consistent and engaging customer experience.

Custom fonts

Enhance your website's appeal with custom web fonts.

Favicon settings

The theme settings for managing the favicon are crucial for establishing your store's visual identity. The favicon is the small icon displayed in the browser tab, and customizing it enhances brand recognition. These settings are applied globally across the theme but can be overridden at the section or block level if needed. The favicon setting allows you to upload and manage the icon that represents your store in the browser tab. This is an essential part of branding, helping users easily identify your store among multiple open tabs. The Image Picker feature enables you to select an image to be used as the favicon, ensuring it effectively represents your brand. By utilizing the favicon setting, you can enhance your store's branding and provide a seamless and professional user experience. Uploading a custom favicon ensures your store is easily recognizable, contributes to a polished appearance, and maintains consistency with other brand elements across platforms.

Features bar

The Features bar theme setting group is a powerful tool for managing the display of announcements, features, or important notes across your site. It allows for global customization, with the flexibility to override settings at the section or block level. This ensures that key information is prominently displayed, enhancing the visibility and impact of your messages. With the Features bar settings, you can customize up to four feature items, each with its own icon, heading, subheading, and link. This setup is ideal for highlighting promotions, sharing important updates, or enhancing brand identity. The color settings further allow you to align the features bar with your brand's aesthetic, ensuring a cohesive look and feel. Usage examples include announcing ongoing promotions, where you can customize icons and headings to draw attention to special offers, and linking directly to relevant product pages. You can also keep customers informed about important updates, such as changes in store hours or new product launches, by utilizing the features bar to provide additional details and guide users to more information.

Font settings

Overview The theme settings for fonts are essential for defining the typography across the entire site. These settings ensure a consistent look and feel while allowing for customization at the section or block level. They are applied globally but can be tailored to meet specific design needs. Key components and functionality Fonts This section manages the typography settings for various text elements throughout the theme. It allows you to select fonts for different text types, ensuring a cohesive visual style. Body font This setting allows you to choose the font for the body text across the site. The default font is sans-serif. Button font This setting specifies the font used for buttons. The default font is sans-serif. Caption font This setting determines the font for captions. The default font is mono. Card heading font This setting allows you to select the font for card headings. The default font is sans-serif. Heading fonts These settings allow you to choose fonts for various heading levels (H1 to H6). The default font for each heading level is sans-serif. Custom fonts Custom fonts can be integrated into the theme using external services or by hosting the font files. This provides additional flexibility in typography choices. Custom font service You can integrate custom fonts from services like Google Fonts or Adobe Typekit by entering the provider code. Hosted fonts Custom hosted fonts must be provided in .woff or .woff2 file formats. You can specify the hosted font name and URLs for the font files. Custom font family and weight For body, button, caption, card, and heading fonts, you can specify custom font families and weights. The weight can range from 100 to 800, with a default of 400. Custom font style You can choose between regular and italic styles for custom fonts. Usage examples Consistent Typography: Use the global font settings to ensure a consistent typography style across your site. This can enhance readability and create a professional appearance. Custom Branding: Integrate custom fonts to align with your brand's identity. For example, use a unique font for headings to make them stand out and reflect your brand's personality. Responsive Design: Ensure that the chosen fonts are legible on all devices. Test the font sizes and styles on different screen sizes to maintain readability. By utilizing these font settings, you can create a visually appealing and cohesive design that enhances the user experience on your site. Learn more about Align →

Layout

The theme settings are essential for managing the overall look and feel of an online shop. These settings are applied globally but can be customized at the section or block level. The layout settings group plays a crucial role in defining the shop's structural appearance, focusing on elements like border radius and content width to ensure a cohesive design. The border radius setting allows you to adjust the roundness of corners, ranging from 0 to 160 pixels, with a default of 8 pixels. This can soften or sharpen the appearance of elements. The content width setting offers options from 768 to 1600 pixels, with 1600 pixels as the default, optimizing the layout for various screen sizes. The section width setting provides choices for default, full width, or full bleed, with the default being content width. Usage examples include setting a higher border radius for a modern look, adjusting content width for high-resolution images, and using full bleed for impactful sections. These settings enable a high degree of customization, allowing you to align the shop's appearance with your brand's identity and enhance the user experience.

Miscellaneous

The Miscellaneous theme settings group offers essential controls for customizing the overall look and feel of your shop. These settings impact visual elements such as border styles, overlay effects, and gallery display options. They are applied globally across the theme but can be overridden at the section or block level for more detailed customization. Key settings include Border radius, which adjusts the roundness of borders, and Enable overlay blur effect, which adds a subtle blur to overlays, enhancing text visibility. The Favicon setting allows you to upload a custom icon for browser tabs, aiding brand recognition. The Gallery zoom style setting lets you choose how images are displayed when zoomed, with options like "Open in lightbox" for detailed product views. Usage examples include increasing the Border radius for a softer look, using the Enable overlay blur effect to enhance text clarity, uploading a Favicon for brand consistency, and selecting "Open in lightbox" in Gallery zoom style to improve the shopping experience. These settings provide flexibility and control, allowing you to tailor the user experience to match your brand's identity and aesthetic preferences.

Product cards

The theme settings for product cards offer extensive customization options to enhance the visual appeal and functionality of product cards across your shop. These settings are applied globally but can be overridden at the section or block level, allowing for flexibility in design and user interaction. Key features include the ability to adjust card style, image aspect ratio, and button style, providing a tailored look that aligns with your brand's aesthetic. You can also control text display and alignment, as well as toggle the display of prices, vendor names, and collection badges. Advanced settings such as hover media and slideshow options add dynamic elements to product cards, making them more engaging for customers. Additionally, color and image swatch settings allow for further customization, ensuring that product cards meet the specific needs and preferences of your shop. Usage examples include customizing product card appearance to create a unique brand look, enhancing user interaction with quick-add buttons and variant selectors, and improving visual appeal with dynamic hover media and slideshow settings. These settings provide a comprehensive toolkit for optimizing the shopping experience.

Shipping

The Shipping theme setting group is essential for managing how shipping options, particularly free shipping, are displayed across the shop. These settings are applied globally but can be customized at the section or block level. They play a significant role in enhancing the shopping experience by encouraging customers to increase their order value. Key components include the ability to display free shipping information and set a free shipping threshold. Displaying free shipping information can motivate customers by making them aware of the availability of free shipping. Setting a free shipping threshold encourages larger purchases by establishing a target order value for customers to achieve. Usage examples include encouraging larger purchases by setting a threshold that motivates customers to add more items to their cart. Additionally, temporarily lowering the threshold during promotional events can attract more customers and boost sales. These strategies provide clear incentives for customers, benefiting both the customer and the store.

Social media settings

The Social media theme settings are essential for enhancing your shop's connectivity and engagement by integrating social media links. These settings allow you to input links to your social media profiles, which can be displayed throughout the shop, providing a cohesive and engaging experience for your audience. They are core theme settings that control the app-wide look and feel, but can also be customized at the section or block level. By adding links to platforms like Facebook, Instagram, LinkedIn, and more, you can increase your brand's visibility and encourage customer interaction. These links enable cross-platform promotion, allowing you to drive traffic back to your shop by sharing special offers or new products. Additionally, they help build a community around your brand, fostering loyalty and repeat business. The Social media settings offer a straightforward way to connect with your audience across various platforms, enhancing your shop's overall presence.

User experience

The User Experience theme settings are essential for enhancing the overall look and feel of your shop. These settings apply across the entire theme but can be customized at the section or block level to suit specific needs. They offer options for cart interactions, visual effects, and gallery displays, all aimed at improving the user experience. Key settings include Add to cart style, which allows you to choose how users interact with the cart, such as redirecting to the cart page or displaying a mini cart overlay. The Enable overlay blur effect setting adds a visual blur to background elements, enhancing focus on the foreground content. The Gallery zoom style setting provides options for displaying images in a lightbox for a closer view. Usage examples include selecting the Show mini cart option to keep users on the product page while shopping, using the Enable overlay blur effect to highlight pop-up messages, and choosing Open in lightbox for high-quality product images to enhance customer viewing experiences. These settings are designed to offer customizable options that cater to different shopping behaviors and preferences.

Sections

Learn more about each section and its various settings and uses.

chevron_left chevron_right

View all

404

The 404 section is essential for guiding users back to the main content of your site when they encounter a broken link or mistyped URL. It allows you to customize the appearance and functionality of the page not found message, ensuring it aligns with your site's branding and enhances user experience. Key settings include color customization for text and subheadings, padding adjustments for both desktop and mobile views, and a variety of background options such as solid colors, gradients, images, and videos. Separator styles can be added for visual organization, and width settings offer flexible layout options. Usage examples include customizing the 404 page to match your site's branding, ensuring responsive design with mobile-specific settings, and enhancing user experience with separator styles and overlay opacity adjustments. By utilizing these settings, you can create a visually appealing and functional 404 page that effectively guides users back to your main content.

Accordion

The Accordion section is a versatile tool designed to present information in a stacked, expandable format, making it ideal for FAQs or additional details. It allows users to add multiple Row blocks, enhancing the flexibility and organization of content. Key settings include content position, sticky header, dynamic content, and the ability to sort and filter items by blog and tag. Users can control the number of items displayed, choose to show excerpts, and sort content by title or date published. The Accordion section supports various content types within each row, such as text, images, or links, ensuring a dynamic and engaging user experience. For practical applications, the Accordion section can be used to create a comprehensive FAQ page, with each Row block containing a question and its answer. It is also effective for organizing detailed product specifications, warranty information, and customer reviews on a product page, keeping the layout clean and easy to navigate.

Account

The Account section is a crucial part of the theme, designed to enhance user experience by allowing users to manage their accounts efficiently. It provides interfaces for logging in, registering, and managing account details, ensuring personalized access and control over user interactions. Key components include the login form, which offers a secure way for users to access their accounts, and the registration form, which allows new users to create accounts by entering personal information. Once logged in, users can manage their account details, update personal information, view order history, and manage addresses. Usage examples highlight the practical application of the Account section. A returning customer can use the login form to access their account and update their shipping address. New visitors can create an account using the registration form to gain access to personalized features. Logged-in users can navigate their account settings to update their email address and review past purchases. These functionalities collectively enhance user engagement and satisfaction.

Activate account

The Activate Account section is essential for facilitating user account activation within the theme. It ensures a smooth transition for users who need to activate their accounts after registration, enhancing the overall user experience. The main login component, styled with the class "main-login," serves as the primary interface for account activation. It focuses on user input fields and submission buttons, maintaining consistency with the theme's design language. For practical usage, the Activate Account section can be placed on a dedicated account activation page, linked from registration emails. Ensuring the section is responsive across various devices guarantees seamless account activation. Additionally, implementing accessibility best practices, such as clear labels and keyboard navigation, enhances usability for all users.

Addresses

The Addresses section is an essential part of the theme, designed to manage and display customer address information. It is typically used in customer account pages, allowing users to view, add, or edit their saved addresses. This section enhances the user experience by providing a straightforward interface for managing personal address details. Key features include options to show order notes, out-of-stock products, pagination, and payment icons. Users can also benefit from predictive results, quick-add buttons, and the ability to print or share address details. These features ensure that customers can easily update their information and manage multiple addresses efficiently. Practical usage examples include managing multiple shipping addresses, updating address details to ensure accurate delivery, and viewing order history. The predictive results feature enhances the user experience by allowing customers to quickly find specific addresses or products as they type.

Banner

The Banner section is a versatile tool designed to display promotions or important information in a full-width format. It offers a range of customization options, including aspect ratios for both desktop and mobile, background settings for images and videos, and foreground content for text and icons. Users can also add and customize buttons and media elements to enhance the visual appeal of the Banner. For practical use, the Banner can highlight sales or special offers with a promotional setup, using a background image and a call-to-action button. It can also serve as an informational display for updates or policies, featuring a simple background and a clear heading. Additionally, the Banner can showcase new products or collections with high-quality visuals and descriptive headings, encouraging users to explore further.

Blog content

The Blog content section is a versatile tool for displaying blog posts with customizable settings to enhance user engagement and content visibility. It allows users to manage the presentation of blog content on their site, offering flexibility in layout and functionality. Key features include the ability to enable filters, which help users navigate through blog posts by categorizing content based on specific criteria. The grid display options allow for customization of how posts are arranged on both desktop and mobile devices, ensuring an optimal viewing experience. Users can also set the number of posts displayed per page, with a range from 1 to 48, and define sorting options to determine how posts are ordered. These settings provide a robust framework for tailoring the blog content presentation to meet specific needs and preferences. Practical usage examples include enabling filters for better navigation, customizing grid layouts for different devices, and setting a higher number of posts per page to reduce pagination. These features ensure that visitors can easily find and engage with the content they are interested in.

Blog post

The Blog post section is a customizable feature designed to enhance the presentation of blog content within your theme. It allows you to add additional content and features, such as related products, to make the blog post more engaging and visually appealing. The sidebar settings enable the display of related products, which can help in cross-promoting items and increasing reader engagement. Supported block types, such as @app and Custom liquid, provide further customization options, allowing you to integrate applications and add custom code to tailor the blog post presentation. By utilizing these settings, you can create a dynamic and interactive Blog post section that effectively presents content and engages readers with additional features.

Blog post footer

The Blog post footer section enhances the end of a blog post by providing additional information and interactive elements. It allows users to display details such as the author, publication date, and tags, along with buttons for sharing and printing the post. These features aim to improve user engagement and provide easy access to related functionalities. Key settings include options to display the author's name, publication date, and tags, all of which are enabled by default. Users can also choose to show or hide buttons for printing and sharing the post. These settings collectively contribute to a more interactive and informative Blog post footer, enhancing the overall user experience. Usage examples highlight how enabling the display of the author and date can enhance credibility and engagement. The share button facilitates content sharing on social media, increasing the post's reach. Displaying tags helps readers discover related content, encouraging further exploration of similar topics.

Blog posts

The Blog posts section is a versatile tool designed to dynamically display a list of blog posts with customizable settings. It allows users to showcase their blog content with options for sorting, layout customization, and filtering by tags. This section enhances the presentation of blog content on a website, making it visually appealing and organized. Key features include the ability to specify the source blog, filter content by tags, and control the number of posts displayed. Users can sort posts by title or date and choose the order of display. Layout settings offer flexibility with column numbers for desktop and mobile views, and options for grid or slider layouts. The Slideshow settings provide animation style and speed options, with autoplay and loop slide features to enhance user interaction. Navigation and pagination settings allow for easy slide navigation, while the preview of next slides offers a glimpse of upcoming content. Usage examples include displaying posts from a specific blog, filtering by tags for themed sections, customizing layout for a tailored presentation, and enabling autoplay for a dynamic user experience. These features help users effectively manage and display their blog content.

Breadcrumbs

The Breadcrumbs section enhances navigation by providing a hierarchical list of links, allowing users to easily navigate to parent pages. This feature is typically displayed at the top of a page and is particularly useful for improving user experience by offering quick access to higher-level categories or pages. Key settings include customizing the home icon and separator icon, with defaults set to home and chevron_right, respectively. These settings help in visually distinguishing different levels in the breadcrumb trail. Additionally, alignment settings allow for different configurations on desktop and mobile devices, ensuring optimal display across all platforms. Usage examples include customizing the home icon to better fit your site's design, adjusting separator icons for a more visually appealing breadcrumb trail, and ensuring responsive alignment for a consistent user experience across devices. By utilizing these settings, you can create a breadcrumb trail that aligns with your site's aesthetic and functional needs.

Buttons

The Buttons section offers a flexible way to incorporate customizable buttons into your theme, enhancing user interaction and navigation. You can adjust the alignment, layout, and style of buttons to fit your design needs. This section allows for seamless integration across different devices, ensuring a consistent user experience. Key features include options for button width, layout, and style, allowing you to maintain design consistency or highlight specific actions. You can also control the position of icons relative to button text and decide the vertical placement of buttons in relation to content. Practical usage examples include creating a call-to-action row using the Row layout with Primary button style, or designing a vertical navigation menu with the Column layout and Icon only button layout. For mobile optimization, enabling Display full width on mobile ensures buttons are easily tappable, enhancing the user experience on smaller screens.

Cart

The Cart section is a crucial part of the shopping experience, displaying items that customers have added to their cart. It allows for customization of appearance and functionality, ensuring a seamless checkout process. Key settings include adjusting padding for both desktop and mobile views, which helps in aligning the Cart section with other page elements for a cohesive look. The Cart section supports block types like @app for third-party integrations and Custom liquid for advanced customization. This flexibility allows for the addition of specific functionalities or display of additional information, such as promotional messages or custom checkout instructions. For practical usage, you can adjust padding to create more space and improve readability if the Cart section appears too close to other sections. Additionally, the custom liquid block can be used to enhance the section with specific functionalities, ensuring a tailored shopping experience for customers.

Code viewer

The Code viewer section is a versatile tool that allows users to integrate custom code into their theme, enhancing functionality and appearance. It supports the addition of custom CSS and JavaScript, providing flexibility to implement external services or override existing styles. Key components include the custom asset block for adding CSS or JavaScript files, the custom CSS block for inserting CSS directly, and the custom JavaScript block for embedding JavaScript. These components enable users to tailor their site with specific styling and functionality adjustments. Usage examples include adding a custom font using the custom CSS block, implementing a third-party widget with the custom JavaScript block, and making styling adjustments to change the color scheme or layout. These examples illustrate the practical applications of the Code viewer section in customizing a site.

Collage

The Collage section is a versatile layout option designed to create a visually appealing two-column display. It allows for flexible content arrangement, making it ideal for showcasing images, videos, and other media in a dynamic and engaging manner. Users can choose between different collage styles, such as having a large block on the left or right, to influence the visual balance and focus of the content. Key features include the ability to stretch content vertically, ensuring a uniform appearance across the section. This enhances the overall aesthetic by matching the height of the largest block in each row. The Collage section is optimized for responsive design, performance, and accessibility, ensuring a seamless user experience across devices. Practical usage examples include showcasing products with images and promotional videos, presenting a portfolio for artists or photographers, and promoting events with eye-catching visuals and details. These examples highlight the Collage section's flexibility and effectiveness in various contexts.

Collection

The Collection section is a versatile tool for displaying a grid of products, allowing for a customizable presentation that adapts to the current or active collection. It offers settings to define the grid layout, optimizing the display for both desktop and mobile devices. Users can choose between different column layouts and enable an interface for toggling grid sizes. Product display options within the Collection section allow for control over the visibility and arrangement of products. Users can decide whether to show out-of-stock items and customize their placement. Filter settings enhance the shopping experience by enabling sorting and availability filters, helping users find products more efficiently. For practical usage, the Collection section can be configured to display a large number of products using a four-column grid, ideal for desktop views. On mobile, a two-column grid ensures clarity and ease of navigation. Additionally, the availability filter can be used to highlight in-stock products, focusing customer attention on available items.

Collection list

The Collection List section is a versatile tool for displaying collections in either a grid or slideshow format. It allows you to feature multiple collections prominently, making it ideal for highlighting featured collections or organizing products into categories. This section is designed to ensure optimal presentation across various screen sizes, with customizable settings for both desktop and mobile layouts. Key features include adjustable column counts, layout options, and slideshow settings such as animation style, speed, and autoplay functionality. These settings enable dynamic and engaging presentations, enhancing the visual appeal of your collections. Practical usage examples include showcasing seasonal collections in a grid layout on desktop and a slider on mobile, organizing product categories for easy navigation, and featuring new arrivals with an autoplay slideshow to automatically cycle through the latest collections.

Comments

The Comments section is a versatile tool designed to enhance interaction and engagement on your site by displaying article comments. It allows users to manage and view comments on blog posts, making it particularly useful for blogs that encourage reader feedback and discussions. Key features include customizable padding settings for both desktop and mobile views, allowing you to adjust the space above and below the section content. Background settings offer options to add colors, gradients, images, or videos, enhancing the visual appeal of the section. Separator settings provide visual dividers to organize content, while visibility settings let you control when and where the section is displayed, tailoring the layout for different devices. In practice, the Comments section can be used to foster community engagement by allowing readers to leave comments on blog posts, which is effective for posts that invite discussion or feedback. Additionally, it can be implemented to gather feedback on specific articles or topics, helping you understand your audience's preferences and improve your content strategy. By utilizing the Comments section, you can create a more interactive and engaging experience for your readers.

Contact form

The Contact Form section is a customizable tool designed to enhance communication between users and site owners. It provides a structured form for inquiries, which can be tailored with additional contact information and adjusted to fit various layouts. Key settings include text alignment, icon addition, and customizable headings and subheadings, allowing for a personalized and visually appealing presentation. Users can further customize the form with button settings, such as style, layout, and position, ensuring the form aligns with the overall site design. The section also offers mobile-specific options, like full-width display, to enhance usability on smaller screens. Practical usage examples include creating a basic contact form with default settings, enhancing the form with icons for visual appeal, and optimizing the form for mobile devices by enabling full-width display and adjusting button positions. These settings help create a functional and attractive contact form that meets user needs and complements the site's design.

Email signup

The Email Signup section is a versatile tool designed to capture email addresses for newsletters or lead generation. It effectively engages visitors, encouraging them to subscribe for updates on new collections and exclusive offers. Key features include customizable icons, captions, headings, and subheadings, allowing you to tailor the section to fit your site's theme and tone. For practical use, the Email Signup section can be employed in promotional campaigns to gather subscribers for upcoming sales or product launches. It can also be used to offer exclusive content, such as early access to new products or special discounts, by highlighting the benefits of subscribing. Additionally, it serves as a means to strengthen brand engagement by inviting visitors to join your community, aligning with your brand's visual identity and messaging.

Featured collection

The Featured Collection section is a versatile tool for showcasing products from a specific collection in either a grid or slideshow format. It allows you to highlight featured products with customizable display preferences, making it ideal for various promotional needs. Key settings include selecting the collection, determining the number of items to display, and configuring layout options for both desktop and mobile devices. The section also offers slideshow settings to enhance user experience, such as animation style, autoplay options, and control positioning. Practical usage examples include highlighting a seasonal collection, promoting a new product line with dynamic slideshow presentations, and creating a curated product showcase with easy navigation. These features ensure that the Featured Collection section can effectively engage users and enhance the visual appeal of your product offerings.

Features bar

The Features Bar section is a versatile tool for displaying announcements, features, or important notes on your website. It enhances user experience by drawing attention to key information or promotional content. With customizable settings, you can tailor the appearance and functionality to fit your design needs. Key settings include text alignment, icon position, and color customization, allowing you to adjust the visual presentation of the Features Bar. Padding and background settings provide further flexibility, enabling you to control spacing and add visual elements like colors, gradients, images, or videos. Usage examples include using the Features Bar for promotional announcements by aligning text centrally and placing the icon on the left. Highlight product features by positioning the icon at the top and aligning text to the left. For important notes, enable the icon border to make the icon stand out, ensuring your message captures attention.

Header

The Header section is a vital part of your theme, providing the main navigation and branding area for your store. It appears on all pages and typically includes elements like the logo, navigation menu, search bar, and cart icon. This section plays a key role in guiding users through your site and reinforcing your brand's visual identity. The Header is designed to offer a consistent navigation experience, featuring customizable elements to fit your store's aesthetic and functional needs. By effectively utilizing the Header, you can ensure a seamless user experience that enhances both the functionality and appearance of your store. For practical use, the Header can be leveraged to maintain branding consistency by prominently displaying your logo across all pages. Organizing the navigation menu with links to essential pages, such as product categories and sales, improves navigation efficiency. Additionally, incorporating a search bar allows users to quickly find specific products or information, enhancing the overall shopping experience.

Heading

The Heading section is a versatile tool for creating structured page layouts with pre-styled headings. It ensures consistent design and improves SEO by using proper heading tags. Users can customize text alignment, heading types, and add elements like icons and buttons to enhance the visual appeal and functionality of their pages. Key settings include text alignment, icon addition, and caption customization, allowing for a tailored presentation. The main heading text is customizable, with a default set to Heading, and users can choose from various HTML tags for their headings. Subheadings provide additional context or detail. Button settings offer extensive customization, including icon addition, text, link, style, layout, and position options. Users can decide if buttons open links in new tabs and whether they span the full width on mobile devices. Practical usage examples include creating a prominent page title with a subheading, adding a call-to-action button with an icon and link, and enhancing visual appeal by incorporating an icon into the Heading. These features help create a visually appealing and functional section that enhances user experience and supports design goals.

Hero

The Hero section is a versatile and visually impactful element designed to highlight key information or imagery at the top of a page. It serves as a customizable banner composed of various blocks, setting the tone for the rest of the page content. Users can control the placement and appearance of images and videos, ensuring optimal display across both desktop and mobile devices. Imagery and video settings allow for the inclusion of high-quality visuals, enhancing engagement and brand representation. Padding settings provide flexibility in adjusting the space around content, ensuring a balanced and aesthetically pleasing layout. The Hero section supports a range of block types, including Breadcrumbs, Button, Heading basic, Icon with text, Image, and Rich text basic, allowing for a tailored and dynamic presentation. Usage examples include creating a visual impact with high-quality images or videos, highlighting key messages with headings and text, and enhancing navigation with breadcrumbs. These features make the Hero section an essential tool for capturing attention and guiding users through the page.

Hero - Basic

The Hero - Basic section is designed to prominently display the page title and key information at the top of a page, making it ideal for creating an impactful introduction to your content. It can also showcase a featured image, with options to place it as a background, on the left, right, or not at all. Text alignment and various display options, such as showing the author, breadcrumbs, date, excerpt, print button, share button, and tags, provide flexibility in presentation. For practical usage, the Hero - Basic section can be effectively used at the top of a blog post to display the title, author, and publication date, along with a featured image on the right. This setup offers readers a clear and engaging introduction to the post. Additionally, for a product announcement page, the section can highlight the product name and key features, with the image set as a background, creating a visually appealing and informative header for the page.

Image

The Image Section is a flexible tool designed to display images with a range of customization options. It allows users to adjust alignment, style, and dimensions, as well as add overlays and captions, making it ideal for showcasing visual content dynamically and attractively. Key settings include alignment adjustments for both desktop and mobile, image style options such as default, rounded corners, and circle, and the ability to set maximum image width. Users can also define aspect ratios to ensure images display correctly across devices, and add captions to provide context or additional information. Enhance images with overlays to improve visibility or add stylistic effects, with options for color, gradient, and opacity settings. These features make the Image Section versatile for various uses, such as highlighting products, promoting events, or displaying portfolios.

Image with text

The Image with text section is a versatile tool designed to enhance your theme by combining images with text in a flexible layout. It is perfect for showcasing products, promotions, or any content that benefits from a visual and textual combination. With various customization options, you can tailor the appearance and behavior of the section to fit your needs. Key features include layout settings that allow you to stack content vertically on mobile and desktop devices, ensuring a responsive design. You can adjust content alignment and customize button settings to enhance user interaction. Display settings help manage how the section appears across different devices, making it adaptable to various screen sizes. Practical usage examples include using the Image with text section to highlight a new product by uploading an image and adding a compelling description. It can also serve as a promotional banner with eye-catching images and text, or as a storytelling tool to share narratives about your brand or products. These examples demonstrate the section's flexibility and effectiveness in enhancing your theme's visual appeal.

Login form

The Login form section is an essential component for sites requiring user authentication, providing a structured interface for users to log into their accounts. It includes customizable text and visual elements to ensure alignment with the site's overall theme, enhancing both functionality and aesthetic appeal. Key features of the Login form include customizable icons, headings, and subheadings. The default heading is Log in, and the subheading offers a welcoming message to guide users through the login process. These elements can be tailored to provide specific instructions or branding messages. For practical use, the Login form can be strategically placed on the homepage or a dedicated login page to ensure easy access. It can also be integrated with other sections, such as a registration form or password recovery, to offer a comprehensive user account management interface. Regular updates to the visual elements are recommended to maintain consistency with any branding changes.

Logo list

The Logo list section is a versatile tool for displaying custom logos in a clean and organized manner. It is perfect for showcasing brand logos, partner logos, or any other graphical elements that need to be highlighted on your site. This section allows you to align logos horizontally and adjust the number of logos displayed per row on different devices, ensuring a responsive and visually appealing presentation. Practical uses of the Logo list include displaying brand logos to build customer trust, highlighting partnerships by showcasing partner logos, and featuring sponsor logos for events or promotions. By effectively organizing and presenting logos, the Logo list enhances the overall aesthetic of your site while providing valuable information to your visitors.

Multicolumn

The Multicolumn section offers a versatile layout system that allows for the integration of various content blocks. It is designed to provide a structured format that can be customized to display multiple types of content effectively. Users can adjust the column count for different devices, ensuring optimal display across desktops, tablets, and mobile devices. Key features include content alignment options, the ability to stretch content vertically, and slideshow settings that enhance the visual presentation. The section supports mobile slideshow functionality, making it adaptable for different viewing experiences. Practical usage examples include using the Multicolumn section for product showcases, where a grid of product images and descriptions can be displayed. It is also ideal for feature highlights, allowing different blocks to emphasize various services or features. Additionally, customer testimonials can be presented in a slideshow format on mobile devices, creating an engaging user experience.

Order

The Order section is essential for managing and displaying order-related information, providing users with a clear and organized view of their order details. This section enhances the shopping experience by ensuring customers have easy access to all necessary order information. Key settings include options to show order notes, out of stock products, pagination, and payment icons. These settings allow for customization of how order details are presented, improving visibility and accessibility for customers. By default, order notes and out of stock products are not displayed, while payment icons are shown to reassure customers about available payment methods. Usage examples highlight practical applications of these settings. Displaying order notes can provide customers with specific instructions or additional information about their orders. Showing out of stock products keeps customers informed about unavailable items, while pagination improves navigation for stores with extensive product lists. Displaying payment icons builds trust by clearly showing accepted payment methods.

Password form

The Password Form section is a vital component for stores that require restricted access or are under development. It serves as the main interface for users to enter a password and gain entry to the store. This section allows you to maintain communication with your audience by customizing the messages displayed on the password page. You can personalize the heading to announce the upcoming launch of your store or to inform visitors about maintenance. The subheading provides additional context or instructions, ensuring that visitors are well-informed and engaged, even when they cannot access the full site. By tailoring these messages, you can effectively manage visitor expectations and maintain a professional appearance during periods of restricted access.

Product information

The Product Information section is a versatile tool for showcasing products, allowing you to include a product's title, key information, metadata, variants, and an add-to-cart button. It supports custom layouts through various blocks, making it adaptable to different presentation needs. Key settings include Gallery settings for customizing image display on desktop and mobile, with options for aspect ratio and style. Slideshow settings offer control over the display of product images, including column count, animation style, and autoplay features. For practical use, the section can be employed to create unique product page layouts by combining blocks like accordion for FAQs, testimonial blocks for customer reviews, and video blocks for demonstrations. Adjusting gallery and slideshow settings ensures optimal display across devices, enhancing user experience. Additionally, enabling autoplay and loop settings in slideshows can create engaging product presentations that capture customer attention.

Product recommendations

The Product Recommendations section enhances the shopping experience by displaying a curated set of recommended products. It uses a recommendation API to suggest items based on order history and product information, providing personalized suggestions that improve over time. Key settings include the number of items displayed, layout options for both desktop and mobile, and slideshow settings such as animation style and autoplay features. These settings allow for a customizable and responsive display that can be tailored to fit different devices and user preferences. Usage examples include displaying a small number of recommendations to keep the section concise, using a grid layout for desktop and a slider for mobile to optimize viewing, and enabling autoplay with a fade animation to create a dynamic and engaging display. These configurations help balance visual appeal with performance and accessibility.

Registration form

The Registration Form section is a crucial component for facilitating user account creation, enhancing engagement, and streamlining the registration process. It allows users to easily register and create accounts, providing a seamless experience. Key settings include the icon, heading, and subheading, which guide users visually and contextually through the registration process. Customizable color and background settings ensure the form aligns with your brand's visual identity, while separator and padding settings enhance structure and readability. Usage examples highlight how to customize the form's appearance to match your brand, provide clear user guidance through headings and subheadings, and improve layout and structure for an optimal user experience.

Reset password

The Reset Password section is an essential part of the user account management system, enabling users to securely reset their account passwords. This section provides a straightforward interface with fields for entering the registered email address and a submit button to initiate the password reset process. Designed for user-friendliness, the Reset Password section ensures a smooth experience for users needing to regain access to their accounts. It is fully responsive, accessible to users with disabilities, and optimized for quick loading to minimize delays. Usage examples include assisting users who have forgotten their passwords by allowing them to receive reset instructions via email. Additionally, it can be part of a security strategy to encourage regular password updates, enhancing overall account security.

Rich text

The Rich Text section offers a versatile way to display text and icons with various customization options, enhancing the visual appeal and functionality of your site. Users can add rich text content, including links and basic formatting, to create engaging and informative displays. Key settings include text alignment, icon position, and heading type, allowing for flexible presentation. Button settings enable customization of appearance and functionality, with options for style, layout, and link behavior. These features ensure that the Rich Text section can be tailored to fit any design need. Practical usage examples include creating promotional banners to highlight special offers, adding call-to-action buttons to guide user actions, and enhancing content with icons to visually represent key points. By leveraging these settings, users can craft a visually appealing and functional Rich Text section that enhances their site's content and user experience.

Search results

The Search results section is a versatile tool designed to enhance the presentation of search results through customizable grid sizes, filter options, and sorting preferences. It allows users to tailor the display of search results, ensuring a visually appealing and organized layout that improves the overall user experience. Key features include the ability to choose between different grid sizes for both desktop and mobile views, with defaults set to three-column for desktop and two-column for mobile. Users can also enable or disable the grid size interface as needed. Additionally, the section offers options to display filters and sorting mechanisms, helping users efficiently narrow down search results and find what they are looking for. Practical usage examples include customizing the grid layout to display search results in a more compact form on desktop by selecting a four-column layout, while opting for a single-column layout on mobile for better readability. Enabling filters allows users to narrow down search results based on availability, which is particularly useful for stores with a large inventory. Sorting options can be enabled to let users organize search results by criteria such as price or relevance, enhancing their shopping experience.

Slideshow

The Slideshow section is a versatile tool designed to create dynamic slideshows that can incorporate various content blocks, such as images and banners. It offers customizable settings to enhance visual storytelling on your site, making it ideal for showcasing products, promotional banners, and customer testimonials. Key features include adjustable column counts for different devices, ensuring optimal layout and readability. The Slideshow also provides options for animation styles and autoplay settings, allowing for engaging transitions and timing. Navigation and pagination settings enhance user interaction, offering intuitive controls and indicators. Usage examples include creating a product showcase with autoplay and fade animation for smooth transitions, highlighting promotional banners with mobile stacking for effective display, and featuring customer testimonials with continuous looping for ongoing social proof.

Slideshow with text controls

The Slideshow with text controls section is a versatile tool designed to create dynamic slideshows with a text and/or icon-based interface. It is ideal for highlighting product features or details, allowing users to interact with the slideshow through customizable controls and settings. Key features include options for animation style, speed, autoplay, and control positions, providing flexibility in presentation. Users can choose between different animation styles, such as default or fade, and set the animation speed to suit their needs. The autoplay feature can be enabled with a customizable delay, and controls can be positioned either on the left or right. Pagination styles include dynamic, fraction, progress bar, and scrollbar, offering various ways to navigate through slides. Practical usage examples include showcasing product features with a smooth fade transition and autoplay, promoting events with dynamic pagination, and displaying portfolios with a leisurely animation speed and preview of upcoming slides. These settings ensure the slideshow is responsive, performs well, and is accessible to all users.

Testimonials

The Testimonials section is a versatile tool for showcasing customer feedback, enhancing credibility, and linking testimonials to related products. It offers flexible display options suitable for various layouts and devices, ensuring an optimal viewing experience. Key settings include the ability to adjust the number of testimonial columns for both desktop and mobile, choose between grid or slider layouts, and align content within testimonials. Slideshow settings provide dynamic display options, such as animation style, speed, autoplay features, and pagination styles, allowing for a customized and engaging user experience. Usage examples include setting a desktop grid layout with four columns to showcase multiple testimonials simultaneously, opting for a mobile slider layout with autoplay to capture user attention, and using content alignment to create a visually appealing presentation. These settings provide a robust framework for enhancing user engagement and trust through customer testimonials.

Video

The Video section is a versatile feature that allows you to display full-width videos from YouTube, Vimeo, or self-hosted sources. It offers a range of settings to customize video alignment, aspect ratio, and playback options, ensuring a seamless integration into your theme. Users can adjust alignment for both desktop and mobile views, select from various aspect ratios, and control video playback features such as autoplay, looping, and muting. In addition to video settings, the Video section includes options for adding captions and overlays. Captions can be positioned and aligned to enhance accessibility and context, while overlays can be applied to improve text readability and aesthetics. These features ensure that your video content is both engaging and accessible to all users. Practical usage examples include embedding a YouTube video by simply inputting the video URL and adjusting the aspect ratio for a widescreen effect. For self-hosted videos, users can upload their files and add a poster image for a preview before playback. Customizing captions and applying overlays are also straightforward, allowing for a professional and polished presentation of video content.

Video with text

The Video with text section is a versatile tool designed to display videos alongside rich text content, allowing users to create engaging multimedia presentations. This section is ideal for highlighting key features, storytelling, or providing detailed explanations with visual support. Key settings include content alignment, which allows you to adjust the vertical positioning of content, and options for stacking content on mobile and desktop devices to ensure a responsive layout. These features enable users to customize the presentation of their content effectively. Usage examples for the Video with text section include showcasing product demonstrations with detailed descriptions, combining narrative videos with text for compelling storytelling, and presenting educational content with supporting text for tutorials or informational guides. This section helps create dynamic and engaging content that effectively communicates your message to your audience.

Blocks

Learn more about available blocks and their settings and uses.

chevron_left chevron_right

View all

@app

Accordion

Account icon

Benefits

Blog post

Breadcrumb

Breadcrumbs

Button

Buy buttons

Cart

Collection banner

Contact form

Contact information

Copyright

Country selector

Custom CSS

Custom JavaScript

Custom asset

Custom liquid

Description

Feature

Filter group

Follow on shop button

Heading

Icon with text

Image

Language selector

Localization selectors

Logo

Logo item

Menu

Payment icons

Price

Product

Quantity selector

Rich text

Rich text

Row

Search

Separator

Share/print UI

Slide

Social media icons

Testimonial

Title

Variant selector

Video

Settings

Learn how to use a particular setting or dive deeper.

chevron_left chevron_right

View all

Accordion dynamic content settings

The Dynamic content settings - Accordion is a core theme setting group that manages how dynamic content is displayed across your site in an accordion format. These settings influence the app-wide look and feel, enhancing user experience by organizing information in expandable tabs. While generally applied globally, they can be overridden at the section or block level for more specific customization. Key components include settings for selecting a specific Blog and filtering content by Tag, which are essential for displaying blog-related content within the accordion. The Number of items setting allows you to control the amount of content shown, with a range from 0 to 50 and a default of 0. The Show excerpt and Show link to content settings provide users with content previews and direct links to full content, enhancing engagement. Usage examples include dynamically pulling and displaying content from a specific blog using the Blog and Tag settings, managing content volume with the Number of items setting, and increasing user interaction by enabling the Show excerpt and Show link to content settings. These settings ensure your site is both engaging and easy to navigate for users.

Alignment settings

The alignment settings are essential for controlling the overall look and feel of your shop, ensuring consistent content display across different devices. These settings can be applied globally or customized at the section or block level, providing flexibility in design. The alignment settings allow you to manage how text and other content are aligned within your theme. This includes adjusting horizontal alignment for both desktop and mobile devices, ensuring a visually appealing and consistent presentation. For desktop, you might consider aligning content to the left, center, or right based on your design preferences. For mobile, different alignment settings can optimize the viewing experience, considering the unique screen sizes and user interactions. These settings offer a flexible way to enhance both the aesthetic appeal and usability of your online store, making it easy to tailor the alignment of content to suit your specific needs.

Article metadata settings

The Article Meta setting group provides essential controls for displaying article metadata across your site, ensuring a consistent and engaging presentation. These settings allow you to manage the visibility of the author's name, publication date, and associated tags on articles. While these settings are applied universally, they can be customized at the section or block level for more specific needs. Enabling the Display author setting can enhance credibility by providing readers with context about the content's creator. The Display date setting helps readers assess the timeliness and relevance of the content, which is particularly useful for news articles or time-sensitive information. Activating the Display tags setting improves site navigation by allowing users to explore related topics easily, enhancing the overall user experience.

Aspect ratio settings

The Aspect ratio settings are essential for controlling the visual presentation of images across the shop, ensuring a consistent and harmonious look. These settings can be applied globally but also allow for customization at the section or block level, providing flexibility in design. The Aspect ratio setting defines the shape and proportion of images, offering options such as Default, Landscape, Portrait, Square, Ultrawide, and Widescreen. Each option caters to different visual needs, from uniform image presentation to cinematic displays. For mobile devices, the Aspect ratio - Mobile setting optimizes images for smaller screens, allowing for different aspect ratios to accommodate varying design requirements. This ensures that images maintain their intended impact across all devices. Usage examples include setting the aspect ratio to Square for consistent image display, adjusting to Portrait for optimal mobile presentation, and using Ultrawide for dramatic homepage banners. These settings provide a solid foundation for enhancing the aesthetic appeal and user experience of the shop.

Background settings

The background settings for sections are crucial for defining the overall look and feel of your online store. These settings allow for customization of colors, gradients, images, and videos, providing flexibility in design and ensuring a cohesive aesthetic throughout the store. They are applied across the entire site but can be overridden at the section or block level. Key components include background color, background gradient, overlay color, overlay gradient, and overlay opacity. These settings enable you to create a consistent color theme, enhance text readability, and add depth to your store's design. Additionally, background image and background video settings allow for dynamic visual elements, with mobile-specific options ensuring optimal display on all devices. Usage examples include creating a cohesive brand aesthetic by using the background color and gradient settings, enhancing text readability with overlay color or gradient, and optimizing for mobile devices with mobile-specific background image and video settings. These settings provide a robust framework for customizing the visual elements of your online store, allowing you to create a unique and engaging shopping experience for your customers.

Banner alignment settings

The settings outlined here are essential for defining the overall look and feel of an online shop. These core theme settings are applied globally but can be customized at the section or block level to maintain a consistent design and user experience throughout the site. The Banner alignment setting group allows you to control the positioning of content within banners. This includes both horizontal and vertical alignment options, ensuring that text and images are displayed in a visually appealing manner. Horizontal alignment options include left, center, and right, while vertical alignment options include top, middle, and bottom, with the default being bottom. For practical usage, you might consider centering both the horizontal and vertical alignment to highlight a call-to-action button in a banner, ensuring it is prominently displayed. Alternatively, aligning text to the left can create a clean and organized look for banners with a lot of text, especially when paired with an image on the right. These settings offer flexibility in designing banners that meet the aesthetic and functional needs of your shop.

Banner background media settings

The Banner Background settings are essential for defining the visual presentation of banners across your shop. These settings are applied globally but can be customized at the section or block level for more specific design needs. They allow you to select images or videos for both desktop and mobile views, ensuring a cohesive and visually appealing shop design. Key components include options for Background Image Fit, which determines how images are displayed within the banner area, and settings for selecting specific images or videos for desktop and mobile devices. This flexibility ensures that your banners are optimized for different devices and screen sizes. Usage examples include using high-quality images or videos for promotional banners, changing backgrounds to reflect seasonal themes, and selecting specific assets for mobile optimization. These settings provide the flexibility needed to tailor your shop's appearance to different marketing needs and device considerations.

Banner color settings

The Color settings - Banners allow you to customize the color scheme of banners across your site, ensuring they align with your brand's visual identity. These settings are crucial for maintaining consistent branding and aesthetic appeal, while also providing flexibility for adjustments at the section or block level. Key settings include options for background color, background gradient, border color, heading color, icon color, subheading color, text color, overlay color, overlay gradient, and overlay opacity. These settings enable you to fine-tune the visual presentation of banners, enhancing readability and visual impact. For practical usage, you might consider creating promotional banners using background gradients and overlays to highlight special offers. Customizing banner colors to match your brand's palette ensures consistency across your site. Additionally, updating banner colors for seasonal themes can enhance the thematic experience for your customers.

Banner foreground content settings

The Banner foreground content setting group is essential for managing the visual and functional elements of banners across the theme. These settings allow you to control alignment, text, and button styles, ensuring a cohesive look and feel throughout the shop. While generally applied globally, these settings can be customized at the section or block level for more specific design needs. Key components include alignment settings for positioning content horizontally and vertically, text and icon settings for adding and styling text and icons, and button settings for configuring button appearance and functionality. Link settings ensure that links within the banner are visually consistent with the theme's design. Usage examples highlight the flexibility of these settings. For a promotional banner, you might consider centering the content, adding a heading and subheading, and using a primary button style to encourage user interaction. For informational banners, adding an icon and caption can provide context, while setting the button to open in a new tab can direct users to external resources. Event announcements can benefit from using button layout settings to place an icon on the button, with a secondary style for a subtle call-to-action. These examples demonstrate how the settings can be tailored to enhance the overall theme of the shop.

Banner foreground media settings

The Banner Foreground Media setting group is essential for controlling the visual presentation of media elements across your theme. These settings define how images and links are displayed in the banner foreground, contributing to the overall look and feel of your shop. They are applied globally but can be customized at the section or block level for more specific design needs. Key components include the Image setting, which allows you to select an image for the banner foreground, and the Image style setting, offering options like Default, Rounded corners, and Circle. The Max image width setting lets you adjust the image width from 0 to 1600 pixels, with a default of 160 pixels. The Link setting enables you to add a URL to the image, directing users to specific pages or external sites. Usage examples include creating a promotional banner with a modern look by using rounded corners and linking to a special offer page. For a profile display, you might choose a circle style for a professional appearance and link to a personal profile. Highlighting a product can be achieved by maintaining the default style and linking directly to the product page. These settings provide a versatile framework for enhancing both aesthetics and functionality in your theme.

Banner settings

The Banner settings group offers essential controls for managing the appearance and functionality of banners across your shop. These settings are applied globally but can be tailored at the section or block level to meet specific needs. They enable you to customize visual and interactive elements, ensuring a cohesive and appealing look throughout your store. Key components include options for background images and videos, foreground content alignment, and text elements. You can adjust the color scheme to match your brand's identity, using gradients and overlays for added visual interest. The settings also allow for mobile-specific adjustments, ensuring optimal display on all devices. Usage examples highlight the flexibility of these settings. You might consider creating a promotional banner with a background image or video, centrally aligned content, and a call-to-action button. For mobile devices, selecting different images or videos ensures the banner looks great on smaller screens. Customizing the color scheme with gradients can enhance the dynamic look of your banners, aligning them with your brand's aesthetic.

Block layout settings

The Block layout settings are essential for defining the overall look and feel of your shop by controlling the layout and appearance of blocks across the entire site. These settings are applied globally but can be customized at the section or block level for more detailed adjustments. They ensure a responsive and visually appealing layout by allowing you to specify the number of columns for different screen sizes. For desktop devices, you can choose a column count between 1 and 12, with a default of 1. This flexibility helps optimize content density on larger screens. Tablet settings range from 0 to 8 columns, with a default of 0, allowing for a balanced display on medium-sized screens. Mobile settings offer 1 to 4 columns, with a default of 1, ensuring content remains accessible on smaller screens. Usage examples include setting a higher column count for desktop viewing to display more content side-by-side, choosing a moderate column count for tablets to balance between desktop and mobile layouts, and maintaining a single column on mobile devices for easy navigation and readability. These settings are crucial for creating a responsive design that adapts to various screen sizes, enhancing both the aesthetic appeal and usability of your online store.

Caption settings

The Caption settings group is essential for managing how captions appear and function across your shop. These settings ensure a cohesive look and feel, allowing captions to enhance media content without overshadowing it. They can be applied universally or customized at the section or block level, providing flexibility to match your shop's design aesthetic. Key components include Caption media, which specifies whether the caption is associated with an image or video, and Text alignment, which offers options for left, center, or right alignment. The Caption position setting allows you to choose whether the caption appears at the top or bottom of the media, impacting visual hierarchy and readability. The Text size setting provides options from small to extra large, with a default of medium, ensuring legibility across devices. For practical usage, you might consider using the Caption settings to highlight product features by placing a descriptive caption at the bottom of a product image, aligned to the center, with a medium text size. For video descriptions, positioning the caption at the top with a large text size can immediately grab attention, maintaining a clean and professional look. These settings offer a versatile framework for enhancing media presentation, ensuring captions are both functional and aesthetically pleasing.

Card color settings

The settings outlined here are designed to control the app-wide look and feel of your shop, focusing on visual aspects such as colors and overlays. These core theme settings are organized into groups and are generally applied throughout the entire shop, but they can be overridden at the section or block level for more granular customization. The Color settings - Cards allow you to customize the color scheme of cards used throughout the theme. You can adjust the background, gradient, border, heading, and text colors to match your brand's aesthetic. This flexibility ensures that your cards can display various types of content, such as products, collections, or articles, in a visually appealing manner. The Banner color settings focus on the visual customization of banners, which are typically used for promotions or important announcements. You can choose overlay colors, apply gradient effects, and control overlay opacity to enhance text visibility against background images. For usage examples, you might consider adjusting card background and border colors to create a unique look that matches your brand. Additionally, applying a semi-transparent black overlay with a gradient effect on banners can help promotional text stand out without obscuring the background image. These settings provide a flexible way to maintain a cohesive visual identity across your shop while allowing for specific customizations where needed.

Color swatch settings

The Color Swatch Settings group allows you to manage the appearance and functionality of color swatches across your theme. These settings enhance the visual appeal and usability of your store by customizing how color options are displayed for products. While applied globally, they can be overridden at the section or block level for more detailed control. Key settings include the ability to display color swatches, choose from various swatch styles, and adjust the number of swatch columns for both desktop and mobile devices. This flexibility ensures a responsive design that adapts to different screen sizes, enhancing the shopping experience. Usage examples include enabling the Display color swatches setting to allow customers to easily select their preferred color options. You might consider customizing the swatch style to complement your store's design, and adjusting the column count settings to ensure an organized layout across devices. By configuring these settings, you can create a visually appealing and user-friendly interface.

Column settings

The settings outlined here define core theme configurations that control the overall look and feel of an online shop. These settings are applied globally but can be overridden at the section or block level. They focus on layout and structure, ensuring a consistent and customizable user experience across devices. Column settings allow you to define the number of columns displayed on different devices, optimizing layout and readability. For desktops, you can choose between 1 and 8 columns, with a default of 4. Tablets offer a range from 0 to 8 columns, defaulting to 0, which uses the desktop setting if unchanged. Mobile devices range from 1 to 4 columns, with a default of 1. These settings are crucial for maintaining a responsive design. For example, you might consider setting a higher column count on desktops to display more content simultaneously, while keeping mobile column counts lower to enhance readability and usability. This flexibility ensures a seamless and user-friendly experience across all screen sizes.

Dynamic content settings

The dynamic content settings are crucial for managing the overall look and feel of your theme. These settings are applied globally but can be overridden at the section or block level, allowing for the automatic integration of content from various sources. This enhances the flexibility and customization of your theme, ensuring that the most relevant and up-to-date information is displayed across your site. Key components include the blog setting, which allows you to specify a blog from which content can be dynamically pulled, and the tag setting, which enables the use of specific tags to filter and display content. The number of items setting controls the volume of content displayed, with a range from 0 to 50 and a default value of 0. Usage examples include integrating blog content into a homepage section to keep your site updated with fresh content, utilizing the tag setting to display content related to specific promotions or events, and adjusting the number of items setting to manage how much content is displayed in a section. These settings provide a robust framework for managing dynamic content, ensuring your site remains engaging and relevant to your audience.

Editor settings

The Editor settings group is an essential part of theme settings, designed to manage the overall look and feel of the shop. These settings are applied globally but can be customized at the section or block level for more specific adjustments. They enhance user experience by allowing for personalization and organization within the theme editor. The Title setting within the Editor settings allows users to define a custom title for the theme editor. This feature aids in organizing and identifying different themes or versions, making it easier to manage multiple themes. For practical usage, you might consider setting a unique title for each theme to easily distinguish them within the editor. This can be particularly useful for identifying themes used for specific promotions, like a "Summer Sale Theme." Additionally, customizing the editor settings can streamline workflows by providing descriptive titles that help team members understand the purpose or status of a theme at a glance.

Filter settings

The filter settings are essential theme settings that enhance the shopping experience by allowing customers to sort and filter products according to their preferences. These settings are applied globally across the shop but can be customized at the section or block level for more specific needs. Key settings include Display filters, which enables or disables the filter display, allowing customers to narrow down product selections. The Display in-stock items setting helps customers find available products by showing only those currently in stock. Display sorting options allows customers to sort products by criteria such as price or popularity, enhancing their shopping experience. For practical usage, you might consider enabling the Display filters setting to allow customers to filter products by categories like size or color. Using the Display in-stock items setting can help reduce customer frustration by showing only available products. Enabling Display sorting options provides flexibility for customers to sort products according to their preferences, aiding in quicker purchasing decisions. These settings collectively improve the store's functionality and user experience.

Footer layout settings

The layout settings are essential for defining the overall look and feel of your shop, impacting how content is displayed across the entire site. These settings allow you to organize content into columns and rows, ensuring a visually appealing and functional layout. While applied globally, they can be customized at the section or block level for more detailed control. The Fill available space setting enables content to stretch and fill its container, providing a balanced appearance. The Show in new column option allows for a multi-column layout, enhancing readability by displaying content side-by-side. Meanwhile, the Show in new row setting stacks content vertically, creating a clear hierarchy of information. For practical application, you might consider enabling the Fill available space to create a cohesive look. Using the Show in new column can enhance the shopping experience by organizing related content side-by-side. The Show in new row option is ideal for stacking content like testimonials or blog posts, making it easy for users to scroll through and consume information. These settings offer flexibility in designing a visually appealing and user-friendly shop layout.

Grid size settings

The grid size settings are essential for configuring the overall look and feel of your shop by managing how content is displayed in a grid format. These settings are applied globally but can be customized at the section or block level to ensure a responsive and visually appealing layout on both desktop and mobile devices. The default grid size setting allows you to choose between three or four columns for larger screens, impacting the presentation and accessibility of content. For mobile devices, the default grid size - mobile setting offers one or two-column options, ensuring content is easily viewable and navigable on smaller screens. Additionally, the enable grid size interface setting allows users to interact with and adjust the grid size settings directly, enhancing the user experience by providing more control over content display. Usage examples include adjusting the grid size to four columns for more content on larger screens, opting for a one-column layout on mobile for a cleaner presentation, and enabling the grid size interface for dynamic layout adjustments. These settings provide a flexible foundation for creating a visually appealing and user-friendly shop layout.

Header settings

The Header settings group is essential for defining the overall look and feel of your shop's header. These settings are applied globally but can be customized at the section or block level for more specific adjustments. They include options for text alignment, icons, headings, and button styles, providing a cohesive and customizable framework for your online store's header. Key components include text alignment, which allows you to control the alignment of text within the header, and icon, which lets you add visual elements to enhance aesthetic appeal. The heading and subheading settings define the main title and additional text layers, crucial for structuring your page and improving SEO. Button-related settings such as button icon, button text, and button style offer various customization options to enhance user interaction. You can also control the button's position and layout, both on desktop and mobile, ensuring a seamless user experience across devices. For practical usage, you might consider using the text alignment setting to center-align your header text, drawing attention to important announcements. Adding an icon next to your main heading can visually indicate the page's purpose, such as a shopping cart icon for a checkout page. For calls to action, choosing a primary button style can ensure it stands out against other elements on the page.

Icon settings

2,500 illustrative icons are available to you to use across various blocks and sections of Theme A from the Google Material Symbols icon set. All you need to do is enter its name!

Image overlay settings

The overlay settings are integral to the core theme settings, designed to enhance the overall look and feel of the shop. These settings apply a consistent aesthetic across the theme but allow for customization at the section or block level for specific design needs. By adding layers of color and transparency, overlay settings help create a cohesive design and draw attention to particular areas. Key components include the overlay color, which lets you select a color for the overlay to create a uniform look or highlight specific areas. The overlay gradient adds depth and visual interest with a gradient effect, while the overlay opacity controls transparency, ranging from 0% to 100%, with a default of 48%. Usage examples include using a semi-transparent overlay color to highlight featured products subtly, applying an overlay gradient to promotional banners for added depth, and adjusting overlay opacity on text-heavy sections to ensure readability while maintaining a cohesive design.

Image settings

The image settings are designed to control the appearance and functionality of images across your shop, ensuring a consistent visual style while allowing for customization at the section or block level. These settings include options for selecting images, customizing image styles, and defining maximum image widths and aspect ratios for both desktop and mobile devices. With the image style setting, you can choose from default, rounded corners, or circle styles to enhance the visual appeal of your images. The max image width setting allows you to specify the maximum width of images, providing flexibility in how images are displayed. The aspect ratio settings ensure that images maintain their intended shape across different devices, with specific options available for mobile to optimize display on smaller screens. Additional settings include the ability to set a border color for images, add clickable links, and decide whether these links should open in a new tab. These features enable you to create interactive elements that enhance user engagement without disrupting their browsing experience. In practice, you might consider using the image style and border color settings to align images with your brand's visual identity. The aspect ratio settings can be adjusted to ensure images display correctly on both desktop and mobile devices, maintaining a professional appearance across different screen sizes. By setting links on images and choosing to open them in a new tab, you can create interactive elements that enhance user engagement.

Image swatch settings

The Image Swatch Settings are essential for controlling the global appearance of image swatches across your shop. These settings allow you to visually represent product variants, such as different colors or styles, using images. They are applied globally but can be customized at the section or block level to suit specific needs. Key settings include enabling or disabling the display of image swatches, choosing from various swatch styles like circle or square, and setting the number of columns for swatches on both desktop and mobile devices. The flexibility in column settings allows for optimal display across different screen sizes. Usage examples include enabling the Display swatch image setting to enhance the shopping experience by providing a visual representation of each variant. You might consider selecting a swatch style that complements your theme's design, such as a modern circle style. Adjusting the column count for desktop and mobile ensures that swatches are displayed neatly and are easy to navigate, improving the overall user experience.

Imagery settings

The Imagery settings group is essential for managing the visual presentation of images across your theme. These settings ensure a consistent look and feel throughout your shop, while also allowing for customization at the section or block level for more specific adjustments. The Imagery layout setting provides flexibility in positioning images within your theme, offering options to display them at the top or bottom of the designated area. The default setting places images at the bottom, but you can choose the top position to enhance visual hierarchy. The Image selection setting allows you to choose an image to be used within the theme. This tool enables you to upload or select an image from your library, ensuring that your visuals align with your brand's aesthetic. For practical application, you might consider selecting the top option in the imagery layout setting to draw attention to product images. Additionally, using the image selection setting to upload a high-quality image can enhance the visual appeal of your shop, representing your brand or specific products effectively.

Layout settings

The layout settings are essential for defining the overall look and feel of your shop, applied globally but customizable at the section or block level. These settings ensure effective content display on both desktop and mobile devices, providing a cohesive and responsive design. Key components include the desktop column count, allowing you to specify between 1 and 8 columns, with a default of 4, and the mobile column count, ranging from 1 to 4, with a default of 2. These settings help optimize content arrangement for different screen sizes. The desktop layout and mobile layout settings offer options between a grid or slider format, enhancing visual appeal and usability. It's important to consider different settings for mobile to accommodate varying user experiences and screen sizes. Usage examples include adjusting column counts for seasonal promotions or switching layouts for a new collection launch. These settings provide a robust framework for customizing your store's visual presentation, ensuring a cohesive and responsive design across all devices.

Out of stock settings

The out-of-stock settings are essential for managing how unavailable products are displayed in your store. These settings influence the visibility and arrangement of out-of-stock items, affecting the overall aesthetic and functionality of your shop. They are applied globally but can be customized at the section or block level if needed. The out-of-stock settings offer options to control the visibility and placement of unavailable products. You can choose to display them in their usual position, hide them entirely, or move them to the end of product listings. This flexibility helps maintain a seamless shopping experience by clearly communicating product availability. For practical application, you might consider using the Default option to keep the standard product order, ideal for stores with frequent restocks. The Hide option is suitable for showcasing only available products, reducing customer frustration. Alternatively, the Show at end option allows customers to see the full range of items while prioritizing in-stock products. These settings help manage customer expectations and enhance the shopping experience.

Padding settings

The padding settings are integral to the core theme settings, influencing the overall look and feel of a shop. These settings are applied globally but can be customized at the section or block level. They manage the spacing around content sections on both desktop and mobile devices, ensuring a balanced and aesthetically pleasing layout. The padding settings allow you to adjust the space above and below content sections, which is crucial for maintaining consistent spacing across different devices. This enhances the user experience by providing a visually appealing and user-friendly interface. For practical use, you might consider setting the top and bottom padding for both desktop and mobile to maintain a consistent look and feel across devices. If a particular section requires more or less space, adjusting the padding settings can provide the necessary flexibility. Additionally, using different padding values for desktop and mobile can optimize the viewing experience, ensuring content is appropriately spaced for each device type.

Product card settings

The card settings for products are essential for controlling the visual presentation of product cards across your site. These settings allow you to customize the style, image aspect ratio, button appearance, text display, and alignment, providing a cohesive and tailored shopping experience. While these settings are applied globally, they can be adjusted at the section or block level for more specific customization. Key settings include card style, which offers options like banner and no image, and image aspect ratio, which supports various formats such as landscape and square. The button style setting allows for different call-to-action designs, while text display and alignment settings manage how text content is presented and positioned on the cards. For practical application, you might consider using the Banner card style to highlight promotional products or setting the image aspect ratio to Square for uniformity. Choosing Icon only for button style can create a minimalist look, focusing attention on the product image and details. These settings provide a flexible foundation for designing product displays that align with your brand's unique aesthetic and functional needs.

Product card slideshow settings

The Product card slideshow settings are essential for controlling the appearance and behavior of product slideshows across your site. These settings ensure a cohesive look and feel, while allowing for customization at the section or block level. Key components include animation style, autoplay options, and pagination settings, which collectively enhance the visual appeal and functionality of your slideshows. Animation style options, such as default and fade, allow you to choose the transition effect between slides. Autoplay settings enable automatic slide transitions, with adjustable delay and speed to control the pacing. Pagination and navigation settings provide users with controls to navigate through slides, enhancing user interaction. Usage examples include creating dynamic product showcases by enabling autoplay, customizing slideshow appearance with animation styles, and optimizing for different devices by adjusting column counts for desktop and mobile. These settings offer flexibility to tailor the slideshow experience to your brand's aesthetic and user needs.

Product gallery settings

The Product gallery settings are essential for managing the display of product images across your shop, ensuring a cohesive and visually appealing presentation. These settings allow for global application while also offering customization at the section or block level. Key components include options for image aspect ratios, column widths, gallery positions, styles, and zoom functionalities, all tailored for both desktop and mobile devices. For image aspect ratios, you can select from various options to ensure optimal display on different screen sizes. The gallery style settings provide flexibility in layout, allowing you to choose between single-column, multi-column, or slider formats. Additionally, the gallery zoom style enhances user interaction by offering different zoom options, such as lightbox or theme settings. Usage examples include considering different aspect ratios for desktop and mobile to optimize image display, experimenting with gallery styles for dynamic layouts, and enabling zoom features to improve customer engagement. These settings provide a robust foundation for tailoring the visual experience of your shop to meet diverse needs and preferences.

Section width settings

The Width settings group is essential for controlling the overall width of content and sections throughout the site. These settings are applied globally but can be customized at the section or block level for more specific design needs. They play a crucial role in shaping the visual layout and user experience of the shop. The Content width setting allows you to define the maximum width of the content area, ensuring consistent display across different devices. Options range from predefined widths like 768px to 1600px, or you can choose to have no maximum width for full-width content display. The Section width setting offers flexibility in how individual sections are displayed, with options such as content width, full-width, and full-bleed. This allows for different layout styles and visual emphasis within the theme. For practical usage, you might consider setting the section width to full-bleed for a visually impactful hero section. Maintaining a consistent content width can provide a cohesive look throughout the site. Additionally, using narrower content widths for mobile devices can enhance readability and navigation, accommodating varying design needs and user experiences.

Separator settings

The separator settings are essential for controlling the visual separation between different sections of your shop, contributing to a clean and organized layout. These settings are applied universally across the theme but can be customized at the section or block level for specific design needs. They allow you to define the style and color of lines that separate sections, enhancing the overall user experience. With the separator settings, you can choose from various styles such as dashed, dotted, solid lines, or opt for no line at all. The color of these separators can be customized to match your theme's color scheme, ensuring visual consistency and appeal. In practice, you might consider using subtle lines to organize content and guide the user's eye through the page. Alternatively, contrasting colors can be used to highlight specific sections like promotional banners or featured products. For a minimalist design, opting for no separators can help maintain a clean and content-focused layout.

Share and print settings

The Share and Print Settings allow you to manage the visibility of print and share buttons across your site. These settings are applied globally but can be customized at the section or block level to enhance user interaction and accessibility. The Show print button setting enables users to print pages directly from the site, which is beneficial for those who prefer physical copies of information. The Show share button setting allows users to share content on various platforms, helping to increase your site's reach and engagement. You might consider enabling the Show print button to allow users to print product pages or blog posts. Keeping the Show share button enabled encourages users to share your content on social media or via email, potentially boosting your site's visibility and interaction. These settings provide flexibility in how users engage with your site, enhancing both usability and accessibility.

Sidebar settings

The Sidebar settings group enhances the sidebar's functionality and appearance across your theme. These settings allow you to control the display of related products and customize the sidebar heading, providing a more engaging and personalized shopping experience. By utilizing a proprietary algorithm, the sidebar can automatically display products linked within your article content, enriching the user's browsing experience. Key components include the Display related products setting, which determines whether related products are shown in the sidebar. Enabling this feature can enhance product discovery and potentially increase sales by suggesting additional items of interest. The Heading sidebar setting allows you to customize the sidebar's heading text, aligning it with your store's theme or specific content. Usage examples include enabling the Display related products setting to automatically showcase related products, helping customers discover new items. Additionally, you might consider using the Heading sidebar setting to personalize the sidebar's heading, such as changing it to "Explore More Gadgets" for an electronics store. These settings offer flexibility, allowing for a tailored shopping experience adaptable to various themes and product types.

Slideshow control settings

The Slideshow control settings are essential for managing the functionality and appearance of slideshows within the theme. These settings ensure a consistent look across the site but can be customized at the section or block level. They allow you to control animation style, speed, autoplay, and navigation, enhancing the visual engagement of your site. Key settings include options for animation style, such as Default and Fade, and controls for animation speed and autoplay delay. You can also position controls vertically, choose pagination styles, and enable or disable features like looping slides, navigation, and pagination visibility. For practical usage, you might consider using the dynamic pagination style with autoplay for a self-running slideshow. Alternatively, setting the animation style to fade and disabling autoplay can help highlight key features by allowing manual navigation. Enabling loop slides and autoplay can create a continuous product showcase, ensuring constant visibility of your offerings.

Slideshow settings

The Swiper settings group manages the core theme settings for slideshow animations and behaviors, influencing the overall look and feel of the shop's slideshows. These settings include options for animation styles, autoplay functionality, and more, and are applied throughout the theme with the flexibility to customize at the section or block level. Key settings include Animation style, which offers options like Default and Fade for slideshow transitions, and Autoplay slideshow, which controls automatic slide progression. The Autoplay delay and Animation speed settings allow you to fine-tune the timing and speed of transitions, while Loop slides ensures a seamless viewing experience by continuously cycling through slides. Additionally, Show preview of next slides provides a glimpse of upcoming slides, enhancing the slideshow's interactivity. Usage examples include enabling Loop slides for a continuous slideshow experience, using the Fade animation style for elegant transitions, and setting a shorter Autoplay delay with a faster Animation speed for dynamic presentations. These settings offer flexibility to tailor the slideshow experience to fit the aesthetic and functional needs of your shop.

Sort settings

The Sort settings group is essential for managing how products are sorted and displayed across your store, impacting the overall look and feel. These settings are applied globally but can be customized at the section or block level for more specific needs. The Sort by setting allows you to choose the criteria for sorting products, such as by Title or Date published. This enhances the browsing experience by letting customers view products based on specific attributes. The Sort order setting determines the sequence in which products are displayed, offering options like Ascending or Descending. This flexibility allows for strategic presentation of products to align with your merchandising goals. For example, you might consider setting the Sort by option to Title and the Sort order to Ascending to list products alphabetically. Alternatively, setting the Sort by option to Date published and the Sort order to Descending can highlight the newest products at the top of the list.

Video overlay settings

The overlay settings for video are essential for enhancing the visual presentation of video content across your theme. These settings allow you to apply overlays, ensuring a consistent and appealing look that aligns with your brand's aesthetic. They are applied globally but can be customized at the section or block level if needed. The overlay settings - video include options for applying a solid color or gradient overlay, as well as controlling the transparency level with the overlay opacity setting. This flexibility allows you to maintain a cohesive and visually appealing design across your theme. For practical usage, you might consider using the overlay color to apply your brand's primary color over all video content, ensuring alignment with your overall brand aesthetic. If you have text overlaid on your videos, using a gradient overlay with higher opacity can ensure text legibility. Additionally, applying a subtle gradient overlay can add visual interest to your videos without distracting from the content.

Video settings

The video settings are designed to control the app-wide look and feel of video elements across the shop, ensuring consistent and responsive display. These settings can be applied universally or customized at the section or block level, enhancing the visual appeal and functionality of the shop. Key components include the video service URL, which allows embedding videos from YouTube or Vimeo, and the Shopify-hosted video option for using videos hosted directly on the platform. The video poster image setting lets you select an image to display as the first frame of your video, providing a visual cue before playback. The aspect ratio and aspect ratio for mobile settings determine the shape of the video display, with options like landscape, portrait, and widescreen. The maximum video width controls the video's width in pixels, while the autoplay video, loop video, mute video, and show video player controls settings offer additional customization for video playback. Usage examples include embedding promotional videos on your homepage, showcasing product demonstrations with hosted videos, and adjusting aspect ratios for optimal mobile viewing. These settings provide flexibility and control, allowing for a tailored and engaging user experience.

Visibility settings

The Visibility settings are integral to managing the app-wide display of elements across your shop. These settings ensure a consistent look and feel by controlling when and where components are visible. They can be applied globally, with the option for more detailed customization at the section or block level. Visibility settings allow you to tailor the user experience based on the device being used, such as desktops or mobile devices. This flexibility ensures that content is presented in the most appropriate format, enhancing the overall user experience. For example, you might consider setting the visibility to "Hide on mobile" for promotional banners that are too large for mobile screens, ensuring they only appear on desktop devices. Similarly, for content relevant only to desktop users, such as detailed product comparisons, you might set the visibility to "Hide on mobile" to maintain a clean mobile interface. These strategic uses of Visibility settings help display content that is most suitable for the device being used.

Release notes

We're constantly improving and updating our themes. Learn about what's in each version by reading the release notes.

View all

Align v1.9.1

This maintenance release fixes priority issues caught internally and reported by our customers (thank you, all!) Please reference the changelog to learn about everything included in the previous major v1.9 release.

This release should be considered a priority update for all current v1.9 users. For those waiting for v2.0: We've been working (very) hard to wrap up some awesome new features and can't wait to get it in your hands! Thanks for your patience!

Improved

Refined CSS processing to improve minification on Shopify CDNs.

Fixed

Theme setting issues causing some transparent color settings to default to black.

Removed

We’ve removed the Embrace theme preset and listings to get ready for some exciting new features. Stay tuned!

Align theme

Align v1.9

This major release prepares Align for some exciting new Shopify updates and continues to refine the experience of using the Align theme.

We’ve done a top-to-bottom rebuild of all style presets and we’ve added a dozens of thoughtful, refined templates to use with each new theme style. We hand-crafted each template to help you hit the ground running with intuitive layouts designed to maximize conversion. These updates will help you effortlessly create the polished look from any of our demo stores, and will give you a huge head start to continue building your dream storefront.

This is Align's eighth major release, and our twenty-second overall since Align went live 🎉 Please reference the changelog to learn about everything included in the previous v1.7 and v1.8 releases — they were huge!

We'd once again like to thank our customers for your trust and patience in our work. As always, we’re here to help and we welcome your feedback — please don’t hesitate to reach out with any questions, comments, or concerns. Your feedback helps us build a better theme.

Stay tuned for more exciting updates just around the corner!

Added

We’ve added dozens of hand-crafted templates to match your favorite theme style and look great out of the box.
Updated and refined the new “Align” preset (previously “Clean”).
Updated and refined the new “Darkroom” preset (previously “Dark”).
Updated and refined the new “Embrace” preset (previously “Calm”).
Updated and refined the new “Playroom” preset (previously “Playful”).
Updated and refined the new “Verdant” preset (previously “Bloom,” and “Natural” before that).
Added new Sitewide navigation settings group for more nuanced control of the sections and layout of your store’s main navigation.

Improved

Miscellaneous polish and incremental updates to various core templates.

Align theme

Align v1.8.1

This maintenance release fixes priority issues caught internally and reported by our customers (thank you, all!) Please reference the changelog to learn about everything included in the previous v1.8 major release — it was a big one!

New

All cards: Added new ”Image aspect ratio - Mobile” setting
Buttons: Added new “Circle” button style

Improved

All sections: Audited and improved full-bleed border radius
All slideshows: Improved renderering for "Preview next slides" setting
Banner section: Removed full-bleed left/right borders
Collection list section: Improved header button rendering
Footer section: Audit full bleed gap and border radius
Hero section: Icon margin on hover adjusted if/when only share UI available
Localization blocks: Flex-direction updated to display in single row
Logo list section: Desktop column count max setting increased to 12
Mega menu block: Polished first-level-only Mega menu layout
Mobile navigation: Improved ‘close’ hamburger click target
Mobile navigation: Removed extra gap below banners
Navigation section: Improved cursor hover style on non-link elements
Navigation section: Refined layout of Mega menu, Menu, and Search block modals
Navigation section: Improved overlay rendering for active modals
Product cards: Improved image loading
Product cards: Improved UX for edge-case of multiple cards with same product
Product information section: Improved full-bleed layout gap/padding
Product information section: Improved overflow rendering
Testimonial blocks: Improved rendering for no/zero rating
Miscellaneous section and block settings order and information updates

Fixed

All slideshows: Audited missing navigation interfaces
Buttons section: Audited extra top padding
Collage section: Aspect ratios audited for all blocks
Collection list section: Pagination and button positioning rendering issue fixed
Collection section: Empty filters buttons rendering edge-case fixed
Collection section: Mobile filtering and sort interface fixed
Features bar section: Mobile rendering audited everywhere
Hero sections: Correctly hiding empty featured image
Image/Video with text sections: Content alignment audited
Logo list section: Fixed column count setting issue (off by 1)
Mini-cart block: Fixed the color of items-in-cart number
Mobile: Viewport scale/drag edge-case fixed
Mobile navigation: Banner layout fully audited
Multicolumn section: Content alignment settings audited for all blocks
Navigation section: Fixed hover menus not closing with search UX
Product card: Padding card style fixed
Rich text: Fixed caption font rendering
Slideshow with text controls: Removed overlay from active slide

Align theme

Align v1.8

This major release launches some exciting new features and continues to refine the experience of using the Align theme. We've also fixed a number of priority issues which have been reported by our customers (thank you, all!)

Highlights of this release include: an entirely rebuilt Navigation section (previously known as “Main navigation” section), including the ability to easily fine-tune desktop and mobile layouts, and to use it as a standalone section in any template; awesome new text transform theme settings to easily control how text looks throughout your shop; groovy new theme settings to use a gradient for your primary body background or alt backgrounds; a refactored “sticky” engine for buttery smooth sticky/scrolling UI/UX; and some significant improvements to slideshow performance which leverages the work we released in v1.7. Also be sure to check out our new “Calm” theme style preset — we think you’ll love it.

There’s a ton of other frontend polish and “under the hood” refinement in this release, and we’re excited to see what you build.

This release also includes our eighth major round of theme localization support, including new support for Bulgarian, Czech, Hungarian, Latvian, and Romanian (👋 🇧🇬 🇨🇿 🇭🇺 🇱🇻 🇷🇴). This is in addition to the languages added in our previous releases and brings us to a total of 35 supported languages! (👋 🇦🇪 🇧🇩 🇨🇳 🇩🇰 🇳🇱 🇺🇸 🇬🇧 🇪🇪 🇫🇮 🇫🇷 🇩🇪 🇬🇷 🇮🇳 🇮🇩 🇮🇹 🇯🇵 🇮🇩 🇰🇷 🇱🇹 🇳🇴 🇵🇱 🇧🇷 🇵🇹 🇵🇰 🇷🇺 🇪🇸 🇸🇪 🇹🇷 🇺🇦 🇻🇳)

This is Align's eighth major release, and our nineteenth overall since Align went live 🎉 Please reference the changelog to learn about everything included in the previous v1.7 release — it was huge!

We'd once again like to thank our customers for your trust and patience in our work. As always, we’re here to help and we welcome your feedback — please don’t hesitate to reach out with any questions, comments, or concerns. Your feedback helps us build a better theme.

Added

Collection and article descriptions: Added “Expandable” setting to collapse long collection descriptions or article excerpts (great for SEO!)
Mobile navigation: "Show open by default" setting to control which menu starts opened
Navigation section: Added separator settings for full visual control
Theme settings: New body and alt background gradient theme settings
Theme settings: New text transform settings to easily make any text Capitalized, fixed width, lowercase, or UPPERCASE
Theme style: Added new “Calm” style preset (previous “Minimal” preset has been deprecated)

Improved

All slideshows (and all sections with slideshow functionality): Huge performance improvements; polished pagination styles; and new "freemode" scrolling for more natural UX
Banner section/block: Improved margins, layout, and settings precedence
Blog cards: Enhanced image rendering to improve image sharpness
Collection filters: Improved sticky location and UX
Collection section: Subnavs now have border option
Footer navigation: Improved custom colors support
Headings: Mobile layout polish and alignment settings
Hero sections: Improved content and heading widths; enhanced button color support
Logo block: Improved color settings
Menu blocks: Improved layout for smaller screen sizes
Menu blocks: Improved features bar rendering
Mini-cart: Removed outer border on mobile
Navigation and footer logo block: Added mobile width setting to provide even greater control of your mobile logos
Navigation section (previously "Main navigation"): Rebuilt from the ground up to provide better performance and layout control for desktop and mobile (and some fun new features in future releases! 👀)
Navigation section: Can now be used as a standalone section in any template
Navigation section: Enabled hover UX style in editor
Product cards: Improved image click UX and refined variant sizing
Product information section: The variant select/dropdown arrow is now clickable; the gallery has improved pagination spacing
Search: Polished mobile frontend layout
Social media icons: Improved frontend ordering to match theme settings (alphabetical)
Various content width and margin polish

Fixed

All separators: Fixed edge cases with custom colors
Articles: Fixed excerpts rendering the full post content
Collection filters: Fixed mobile dropdown icon on reload
Expandable text bug fixed on Safari mobile
Minicart: Fixed empty cart glitch
Navigation section: Fixed overlay "flash" bug
Product cards: Fixed default variant selection bug
Product information section: Fixed sticky add to cart bug with unavailable variants
Product information section: Fixed sticky image which was getting influenced by Featured product section
Product information section: Fixed mobile separator settings
Search: Fixed predictive search results edge case issues
Videos: Fixed the promise-based console error

Align theme

Align v1.7.1

This maintenance release fixes priority issues which have been reported by our customers (thank you, all!) Please reference the changelog to learn about everything included in the previous v1.7 major release — it was a big one!

Added

Theme setting: New WhatsApp setting
Translatable hardcoded strings for breadcrumb “shop” and collection “grid size view”

Improved

All sections: Audit background siblings
Banner section: Audit border radius
Cards: Audit card padding style
Product cards: Slideshow sizing
Product cards: Slideshow navigation layout
Collection and article cards: Setting to hide buttons

Fixed

Collections: Filter results loading in editor
Collections: Subnav background in editor
Product cards: Video autoplay
Product information section: Variant selector inconsistency

Align theme

Align v1.7

This major release launches some big new features and continues to refine the experience of using the Align theme. We've also fixed a number of priority issues which have been reported by our customers (thank you, all!) This is our biggest release to date, and we appreciate everyone's patience as we continue ensuring the highest level of quality.

Highlights of this release include: a complete product card overhaul (with hover imagery, video support, and variant interface); powerful new content and section layout settings; banner theme settings and a beautiful new banner card style; variant swatches in collection filters; a complete slideshow refactor; improved Multicolumn block column settings to more easily create custom layouts; and you can now add an icon to any button in the theme!

We're also excited to launch awesome new background settings in every section of the theme (and many blocks): you can now add background color, gradient, image, or video to any section in your shop 👀

This release includes our seventh major round of theme localization support, including new support for Arabic, Bengali, Estonian, Javanese, and Punjabi. This is in addition to the languages added in our previous major releases (👋 🇫🇷 🇩🇪 🇮🇹 🇱🇹 🇪🇸 🇨🇳 🇳🇱 🇯🇵 🇵🇹 🇧🇷 🇩🇰 🇬🇷 🇮🇳 🇹🇷 🇰🇷 🇳🇴 🇷🇺 🇺🇦 🇻🇳 🇬🇧 🇫🇮 🇮🇩 🇵🇱 🇸🇪) and brings us to a total of 30 supported languages!

This release also culminates an intensive theme-wide audit of all settings and setting organization, and aims to improve your experience in the theme editor. We've standardized all core section settings and added powerful new theme, section, and block settings throughout. And as always, we've continued to optimize our underlying codebase in preparation for exciting new updates in our forthcoming releases.

This is Align's seventh major release, and our seventeenth overall since Align went live 🎉 Please reference the changelog to learn about everything included in the previous v1.6 release — it was a big one too!

We'd once again like to thank our customers for your trust and patience in our work. As always, we're here to help and we welcome your feedback — please don't hesitate to reach out with any questions, comments, or concerns. Your feedback helps us build a better theme.

Added

All blocks: Ability to show/hide on desktop/mobile
All buttons: Ability to add icon and control icon layout
All cards: New banner style
All cards: Text alignment settings
All images: New "ultrawide" aspect ratio
All sections: Add background images or videos to any section in the theme, including support for custom mobile settings
All sections: Layout settings for content and section width, including new full-bleed section style
Banners: Added theme settings for theme-wide styles
Collections: Filter interface for variants and swatches
Product cards: Hover image/video support
Product cards: Slideshow gallery option
Product cards: Variant interface with swatch support
Product cards: Video and 3D model support
Product galleries: Added setting to toggle image zoom functionality
Product information section: Added testimonial block support
Theme settings: Added border-radius layout setting for customized corner roundness on most frontend elements

Improved

Accordion section/block: Improved dynamic post/page functionality to use excerpts and links
All articles and pages: Improved excerpt control via tag
All sections and blocks: Improved setting organization and information
All slideshows: Completed core audit with miscellaneous improvements, including enhanced pagination styles
Cart, Mini-cart, and Product information sections: Added keyboard support to the quantity input field
Collage section: Improved layout support for 3-5+ blocks
Hero section: Video block support and miscellaneous layout improvements
Image and video sections/blocks: Improved width control via "max-width"
Logo list section: Improved column settings and item text
Multicolumn section: New block column controls for improved layout flexibility
Product information section: Extended and improved the stock status component
Theme settings: Improved setting organization and information

Fixed

Banner block: Fixed minor issues and liquid errors related to foreground image
Collections: Fixed mobile grid sizing edge-cases
Mini-cart: Fixed miscellaneous UX/performance issues
Product and Collection templates: Fixed sticky scrolling and performance issues
Search: Fixed "clear all" functionality and miscellaneous minor issues

Align theme

Align v1.6.1

This maintenance release fixes priority issues which have been reported by our customers (thank you, all!) Please reference the changelog to learn about everything included in the previous v1.6 major release.

Fixed

Missing translations in section and block settings
Predictive search functionality issues in the main navigation section
Price range filter issue when applied filter does not match any products

Improved

Fallback settings for cards using "default" and "theme setting" image aspect ratio settings
Styling of Slideshow section cards on mobile devices
Styling of the Rich text block with a specific combination of section settings
Styling of the Variant picker block on mobile devices

Align theme

Align v1.6

This major release provides significant refinement and control to the Align theme and fixes priority issues which have been reported by our customers (thank you, all!) This is our biggest release to date and we appreciate everyone's patience as we ensure the highest level of quality.

We're most excited to launch our new color and image-based variant interfaces for Product templates — check out the improved Variant block in the Product information section! This leverages the recent updates Shopify has made to swatch handling, but we've added a few of our own concepts and settings: we're loving this additional flexibility, but we'd love to get any/all feedback as you start to implement this in your stores. (Next up: we'll be implementing these swatch filters in Collections! 👀)

This release also includes our fifth major round of theme localization support, including support for English (GB), Finnish, Indonesian, Polish, and Swedish languages (👋 🇬🇧 🇫🇮 🇮🇩 🇵🇱 🇸🇪). This is in addition to the languages added in our previous major releases (👋 🇫🇷 🇩🇪 🇮🇹 🇱🇹 🇪🇸 🇨🇳 🇳🇱 🇯🇵 🇵🇹 🇧🇷 🇩🇰 🇬🇷 🇮🇳 🇹🇷 🇰🇷 🇳🇴 🇷🇺 🇺🇦 🇻🇳) and brings us to a total of twenty-five supported languages!

Beyond that, we've added additional powerful new theme, section, and block settings throughout and we've continued to optimize our underlying codebase to continue launching exciting new updates in our next major releases.

This is Align's sixth major release, and our fourteenth overall since Align went live. Please reference the changelog to learn about everything included in in previous v1.5 release!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping to build a better theme.

Added

New section: Buttons; a simple section to display a row or column of buttons
New interface and theme settings: Color and Image swatch variants in Product information section
Accordion block: New video controls setting
Accordion: Heading alignment setting
All cards: Added "default" image setting (i.e. natural aspect ratio)
All cards: Border color setting
Banner: New border setting
Banner: New mobile Background video setting
Buttons: New XS style
Buttons: New setting to open link in new tab
Collections: Added 'Sort by' interface on mobile
Collections: New 'Out of stock' product handling setting
Discovery: Conditional section groups
Featured product: Added Column width options
Footer: Mobile alignment setting in all blocks
Heading section/block: Include all header settings
Heading: Add button link target
Image/video block: New overlay color/gradient setting
Multicolumn: Add Heading block and audit alignment settings
Products: New color swatch variant interface and settings
Products: New image swatch variant interface and settings
Theme defaults: New 'Add to cart' default text setting
Theme defaults: New 'Subscribe' button default text setting

Improved

Accordion: Improve tag filtering
Accordion: Improve video border radius
All cards: Improve card and image border radius
Article cards: Improve cta width
Article cards: Improve text display logic
Articles: Improve product sniffer logic to only display unique products
Banners: Improved image settings
Banners: Open link in new window
Blogs: Improve tag filtering
Collage: Improve image block display
Collection filter: Conditional clear button
Collection filter: Improve availability filter
Collection filter: UI display settings
Collection: Improve filters border radius
Collection: Improve hover UX in "Showing" UI
Collections: Deep audit of filters JavaScript
Collections: Improve 'Sort by' dropdown functionality
Collections: Improve filter stickiness when fixed sticky nav setting is enabled
Email signup: Improve email signup error message handling
Email signup: Improve tablet size display
Featured collection: Improve pagination logic
Footer blocks: Deep audit of all layout settings for all blocks
Hero - Basic: Improve overlay z-index logic
Hero: Improve share/print icon layout
Image blocks: Improve alignment layout
Image section/block: Audit rounded corners style
Image/video: Mobile aspect ratio
Logo list: Audit presets
Main navigation: Deep banner audit
Main navigation: Improved menu column layout logic
Main navigation: Improved nested menu display
Product cards: Improve price display logic
Product cards: Improve tablet/in-between layout display
Product cards: Various price, sale, availability improvements
Product information: Audit Shopify subscriptions app
Product information: Deep block audit
Product information: Improved availability message on unavailable variant selection
Product information: Improved button sizes
Product information: Improved price update on variant selection
Product information: Improved sticky Add to cart interface
Product information: Improved unavailable variant logic
Products: Improve unavailable variants handling
Rich text: Audit button layout
Search: Various UX improvements
Slideshow: Banner block aspect ratio fix
Testimonials: Custom icon and color settings
Testimonials: Improved logic to handle testimonials without associated product
Variant selector: Color Swatch UI
Video block/section: Improved handling of custom poster size
Video: Audit alternative aspect ratios
WYSIWYG: Better image height logic

Fixed

Accordions: Audit dynamic content edgecase
Banners: Fix video background image fit
Buttons: Audit secondary style borders
CSS: Fix CSS issue in the Dark preset
Collection cards: Audit aspect ratio overrides
Collections: Fix anchored submenu flickering on mobile Safari
Collections: Fix filters 'Clear all' sort-by query
Main navigation: Fix CSS z-index issues
Main navigation: Fix layout issue when the header is not fixed
Main navigation: Fix menu auto-close bug
Main navigation: Predictive search overlay not closing correctly on menu click
Overlays: Fix 'blur' effect display issue
Price range filter: Fix Firefox display bug
Price range filter: Update missing “uses_comma_decimals” conditional
Product cards: Remove selected_or_first_available_variant from url
Search results: Fix sidebar empty links
Slideshow text control: Broken layout fix
Video block: Fix YouTube embed code error

Align theme

Align v1.5.2

This maintenance release fixes priority issues which have been reported by our customers (thank you, all!)

Fixed

Issue with the predictive search overlaying elements on mobile screens
Issue with the empty predictive search sidebar links
Issue with the price range filter when comma-separated currencies are used in a store
Issue with the sticky subheader animation on iOS devices

Align theme

Align v1.5.1

This maintenance release fixes priority issues which have been reported by our customers (thank you, all!)

Improved

Sale badge takes priority over others on product cards for better product merchandising accuracy

Fixed

Issue with the mobile menu closing
Issue with the banner default aspect ratio setting
Issue with the footer navigation blocks in the theme editor
Issue with element height in the collage and multicolumn sections
Wrong label in the theme editor for the top mobile padding section setting

Align theme

Align v1.5

This major release provides additional refinement and control to the Align theme and fixes priority issues which have been reported by our customers (thank you, all!)

We've added powerful new theme, section, and block settings throughout the theme and we've continued to optimize our underlying codebase to prepare for some exciting new updates in our next major release.

This release also includes our fourth major round of theme localization support, including support for Korean, Norwegian, Russian, Ukrainian, Vietnamese languages (👋 🇰🇷 🇳🇴 🇷🇺 🇺🇦 🇻🇳). This is in addition to the languages added in our previous major releases (👋 🇫🇷 🇩🇪 🇮🇹 🇱🇹 🇪🇸 🇨🇳 🇳🇱 🇯🇵 🇵🇹 🇧🇷 🇩🇰 🇬🇷 🇮🇳 🇹🇷) and brings us to a total of twenty supported languages.

This is Align's fifth major release, and our eleventh overall since Align went live. Please reference the changelog to learn about everything included in in previous v1.4 release!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping to build a better theme.

Added

Support for customizing how filters are displayed when no matching products are found in a store using the Shopify Search & Discovery app
Ability to adjust the padding of the Main navigation section allowing control over Main navigation height
Setting to hide video controls in the product gallery
Setting to control the product gallery display on mobile
Slideshow option for the Testimonial section
Ability to add inline icons to an Accordion block title
Ability to link content in the Icon with text block
Theme settings to customize the display of Collection cards
Theme localization for Korean, Norwegian, Russian, Ukrainian, Vietnamese languages (👋 🇰🇷 🇳🇴 🇷🇺 🇺🇦 🇻🇳)

Improved

Better dynamic calculation of Menu and Predictive search block position relative to the Main navigation bar on mobile
Mobile predictive search layout
Minor styling improvements in sections and blocks
Product gallery video controls
Removed Hero section template restrictions

Fixed

Mobile Menu and Predictive search close UX
Banner section aspect ratio settings
Cart and mini-cart special order insructions
Submenu flickering on Safari
Heading type control in the Hero section

Align theme

Align v1.4

This major release provides additional refinement and control to the Align theme and fixes priority issues which have been reported by our customers (thank you, all!)

We've added powerful new theme, section, and block settings throughout the theme, and we've added a few new templates to show off the power and flexibility of Align. We're also excited to launch a full overhaul of our Predictive search system, which will provide better performance and customization, and paves the way for some exciting new features in our next major release.

This release also includes our third major round of theme localization support, including support for Danish, Greek, Hindi, and Turkish languages (👋 🇩🇰 🇬🇷 🇮🇳 🇹🇷). This is in addition to the languages added in our previous major releases (👋 🇫🇷 🇩🇪 🇮🇹 🇱🇹 🇪🇸 🇨🇳 🇳🇱 🇯🇵 🇵🇹 🇧🇷) and brings us to a total of fifteen supported languages.

This is Align's fourth major release, and our tenth overall since Align went live. Please reference the changelog to learn about everything included in v1.3!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping to build a better theme.

Added

"Minimal" theme preset and demo store
Theme setting for card heading font
New product, collection, and blog templates for additional layout options
Ability to show the five most recent searches in the Predictive search block
Ability to show Page results within the Predictive search results
Ability to search by product SKU in the Predictive search block
Block setting to control default Predictive search results title
Block setting to control the text size in the Heading block in the Hero section
Icon with text block added to the Product information section
Image block added to the Footer navigation section
Banner video support for mobile navigation
Section setting to disable the shipping and tax policy notice in the Product information section
Section setting to control the ancillary image width in the Banner section
Section setting to display the Main navigation as always fixed to the top, reveal/hide on scroll, or not be fixed
Section setting to control column count in the Footer navigation section
Section setting to make a block span the full width of the Footer navigation section
Theme localization for Danish, Greek, Hindi, and Turkish languages (👋 🇩🇰 🇬🇷 🇮🇳 🇹🇷)

Improved

Rebuilt our Predictive search functionality for better control and performance
Rebuilt blog filtering functionality to not require page reload when filtering posts by tags
Inactive collection filters hidden in a Collection
Increased the maximum column width in the Slideshow section
Altered the logic of the product cards to display product variant information when filters are applied in a Collection
Various minor styling and UX improvements

Fixed

Conditions for the sale badge to show up in the product card
Collection subnav background color and animation issues in Safari on iPhone devices
"View cart" button display in mini-cart
Various minor styling fixes

Align theme

Align v1.3.3

This minor release fixes priority issues which have been reported by our customers (thank you, all!) We've also included various priority style and UX refinements for various sections, blocks, and elements.

This is the third minor update to our recent Align v1.3 major release, and our ninth overall since Align went live. Please reference the changelog to learn about everything included in Align v1.3! It was a big one!

Fixed

Bug related to the "Show quick add button" theme setting
Banner overlay flashing when navigating through the megamenu items

Added

External links added to the announcement bar now open in a new tab automatically

Improved

Increased the maximum allowed size of the images added to the "Collection List" section
Audited empty cart elements in cart drawer and cart page
Various section, block, and element UX and style improvements and optimizations
Various mobile, tablet, and XL screen size UX and style improvements and optimizations

Align theme

Align v1.3.2

This minor release fixes an issue which is causing visual website issues for some existing customers.

Please reference the changelog to learn about everything included in Align v1.3! It was a big one!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping to build a better theme.

Fixed

Replaced display_mini_cart with ux_cart theme setting

Align theme

Align v1.3.1

This minor release fixes an issue which is causing theme updates to fail for some existing customers.

Please reference the changelog to learn about everything included in Align v1.3! It was a big one!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping to build a better theme.

Fixed

Reverted to v1.2.3 Hero section template restrictions
Reverted blog templates to use hero-basic section

Align theme

Align v1.3

This major release adds significant refinement and additional control to the Align theme and fixes priority issues which have been reported by our customers (thank you, all!)

We've added powerful new theme, section, and block settings throughout the theme, and we've added some great new templates showing off the power and flexibility of Align. We're also excited to launch an overhaul of our mini-cart and cart system, which will provide better performance, easier customization, and better compatibility with third-party apps.

(Oh, and we did a top-to-bottom JavaScript audit and reduced our scripts and dependencies by over 50%! And we introduced a small-but-mighty navigation setting to help create centered-style header layouts! And much more! We've been busy!)

This release also includes our second major round of localization support, including support for Chinese, Dutch, Japanese, and Portuguese languages (👋 🇨🇳 🇳🇱 🇯🇵 🇵🇹 🇧🇷). This is in addition to the key EU languages we added in our previous major release (👋 🇫🇷 🇩🇪 🇮🇹 🇱🇹 🇪🇸).

This is Align's third major release, and our sixth overall since Align went live. Please reference the changelog to learn about everything included in v1.2!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping to build a better theme.

Added

"Natura" style preset and demo store
Page templates: About, Hero, Home page, Landing 01, and Landing 02
Collection templates: Basic, Featured subcollection, Hero with background, No banners, and With promos
Blog templates: Documentation, Landing 01
Article template: Documentation
Theme setting for the action performed after a product is added to cart: open the mini-cart drawer, update the icon in the header, or redirect to cart page automatically (Theme settings > Cart > "Add to cart style")
Theme setting to choose sitewide card hover effects (Theme settings > Cards > "Show box shadow", "Show image filter on hover", "Scale on hover")
Theme setting to set a default image to be used in page, product, article, or collection cards instead of the default Shopify image placeholder (Theme settings > Cards > "Default image")
Theme setting to change the Add to cart button style in the product cards, or to hide it completely (Theme settings > Cards > "Button style")
Theme setting to display or hide the product price from the product cards sitewide (Theme settings > Cards > "Show price")
Theme setting for LinkedIn URL, which will display the icon alongside other social media icons sitewide (Theme settings > Social media > "LinkedIn url")
Section settings to change the header and footer background, text, and icon colors (Main navigation, Footer navigation)
Section setting in the “Product information” section to change the column widths on desktop devices (Product information section > "Column width")
Section setting to align text and content in the Hero section
Section and block settings to hide the video controls in all video sections and blocks
Section and block settings to display blog posts from a selected blog or article in the Accordion section and block
Section setting to choose the number of columns for tablet screen sizes for Slideshow and Multicolumn sections
Block setting to pin any Main navigation block to the center of the section
Block setting in Accordion blocks to display a button inside of the accordion
Block setting to disable predictive search in the header and hero section search blocks (Search block > "Show predictive results window")
Block setting a footer block in a new column (Footer navigation > block > "Show in new column")
Block setting to display a footer block in a new row (Footer navigation > block > "Show in new row")
Block setting to align the footer block content
Block setting to display custom images in a Testimonial block
New blog post footer section with more controls and better UI to showcase author, post date, tags and share/print icons

Improved

Lots of miscellaneous mobile, layout, and style polish throughout! 💎🧐
Refined default settings throughout all sections and blocks
Overhauled mini-cart and cart page rendering using the Shopify Section Rendering API for better performance, easier customization, and better compatibility with third-party apps
Improved performance and load times by reducing CSS file size and removing certain JavaScript dependencies
Improved the handling of lazy/eager loaded images using the latest upgrades from Shopify
Better styling of various WYSIWYG editor, hero, icon, text, and button elements
Polished the styling for ordered and unordered lists for better nested list support
Updated the placement of the “view all” button in the megamenu when there are more than three menu columns
Improved the handling of certain theme color settings when transparent colors are selected
Add to cart buttons now use translation JSON files instead of the block setting
Changed the Twitter logo to X
Removed grayscale from linked logo blocks
Better 404 page layout and customization settings
Pagination layout and style
Better support for products with a 3D model as primary media

Fixed

Miscellaneous edge cases for theme color settings
Cart price display issue which prevented the display of “amount_no_decimals” setting
Cart issue related to products with automated discounts
Testimonial section image size issue
Features bar default icon color issue
Flashing of related product tooltips on initial load of a blog post

Align theme

Align v1.2.3

This release improves app support and fixes priority issues which have been reported by our customers (thank you, all!) We've also added some small style refinements to various sections.

This is our third minor update to our core v1.2 release, and our fifth overall since Align went live. Please reference the changelog to learn about everything included in v1.2!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping to build a better theme!

Fixed

Display custom fonts in headers.
Out of stock message on product pages.

Improved

Hide the Features bar section on mobile if it is removed or hidden on desktop.
Better validation for contact form inputs.
Use final_line_price instead of original_line_price in cart items.
Refined styles in Hero section if no featured image.
Better header display in Hero section.
Theme setting for Free shipping "threshold" updated to use number input instead of range (which was previously capped at 100).
ReCharge app support (view documentation for more information).

Align theme

Align v1.2.2

This release fixes a bug we've encountered with collection filters.

This is our second minor update to our recent v1.2 release, and our fourth overall since Align went live. Please reference the changelog to learn about everything included in v1.2!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping build a better theme!

Fixed

Display of filters on collection pages.

Align theme

Align v1.2.1

This release fixes a bug we've encountered with mobile collection filters, adds backorder support to the product template, improves a few features in various blocks, and refines presets to better use new theme settings from the v1.2 release.

This is our first minor update to our recent v1.2 release. Please reference the changelog to learn about everything included in v1.2!

We'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping build a better theme!

Fixed

Display of mobile filters.
Display of search bar in hero section.

Improved

Refined preset settings for new theme settings.
Better translation support for predictive search block results.
Hide accordion if no content available, e.g. empty metafield.
Backorder status: Display "on backorder" for products with 0 remaining inventory, but marked to continue selling when out of stock.

Align theme

Align v1.2

This release adds refinement and additional control to the Align theme, and is the first major release which accounts for customer feedback. Along with key bug and layout fixes, we've added more nuanced settings within various sections and introduce a powerful new setting to help create more flexible navigation layouts. We're also excited to introduce the concept of using article and page content within sections (only the Accordion section for now, but more to come soon!) We've also included our first round of localization support focused on key EU markets.

This is our second update since the Align theme went live, and we'd once again like to thank our customers for your trust and patience in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns. Your feedback is helping build a better theme!

Added

Support for the "Follow on Shop" button
Support for the Gift Card Recipient form
Support for theme editor section previews
Support for custom third-party and self-hosted fonts
Setting to "fill available space" checkbox in all Main navigation blocks to allow highly flexible layouts
Setting to display a full-width menu in the Main navigation
Setting to control the layout of the search bar in the Main navigation, including the ability to show icon-only or full-width layouts
Setting to display Vendor name in the product card
Option for article and product cards to not show an image
Setting to show/hide the add to cart button in the product card
Setting to control the button style of the contact form
Setting to control the "View all" button, including adding it to the mobile megamenu
Setting to hide or show the announcement bar
Settings for sitewide input styling
Setting for Hero sections without featured image
Support for custom date formats
Support for videos in the Accordion section
Support for page and article content in the Accordion section
French, German, Italian, Lithuanian, and Spanish theme translations 🇫🇷 🇩🇪 🇮🇹 🇱🇹 🇪🇸 (More soon!)

Changed

Updated organization of editable content (translatable fields)
Moved the "items" string in the cart to a translatable field

Fixed

In-stock button handling when no other filters are present in search and collection pages
Logo maximum width issue on mobile
Animation issue with the sticky add to cart button
Megamenu issues when no maximum container width is set
Audited and fixed background color and gradient settings across all sections

Improved

The predictive search open/close logic to only show one predictive search dialog at once
Standardized font weights and line heights across the theme
Product page benefit block styling on mobile
Cart drawer payment buttons setting and styling
Article card caption content handling
Improved Google Material Icon loading technique for better performance
Full WCAG 2.1 compliance review and confirmation
Other minor section and block styling updates

Align theme

Align v1.1

This release introduces better pre-defined theme templates that mimic the Themea demo store more closely, along with some minor bug and layout fixes.

This is our first update since the Align theme went live in the Shopify theme store! 🎉 We'd like to thank our customers for your trust in our work. As always, we are here to help and we welcome your feedback! Please don’t hesitate to reach out with any/all questions, comments, or concerns.

Added

New Product templates which show alternative gallery styles.
New Collection templates which show potential banner settings in use.
New "FAQ" page template.
New setting in Product templates to disable the sticky add to cart functionality.
New setting in the Banner section to define mobile aspect ratio and mobile background image.
New separator block in the footer navigation section.
New “Demo 01 - Themea” theme style preset.

Changed

Adjusted the default index, product, collection, blog, article, contact, and cart templates to make the theme resemble the Themea demo store more closely on first install.

Other fixes and improvements

Improved spacing of text and icon elements across multiple sections.
Improved handling of the sticky “add to cart” animation.
Fixed an issue with featured products in articles if multiple links to the same product present.
Removed button settings from rich text section.
Miscellaneous style and layout improvements.

Align theme

Documentation

FAQs

Theme settings

Sections

Blocks

Settings

Release notes

Improved

Fixed

Removed

Added

Improved

New

Improved

Fixed

Added

Improved

Fixed

Added

Improved

Fixed

Added

Improved

Fixed

Fixed

Improved

Added

Improved

Fixed

Fixed

Improved

Fixed

Added

Improved

Fixed

Added

Improved

Fixed

Fixed

Added

Improved

Fixed

Fixed

Added

Improved

Fixed

Fixed

Improved

Fixed

Fixed

Improved

Added

Changed

Fixed

Improved

Added

Changed

Other fixes and improvements

Subscribe to our emails