Blocks

@app

The @app block is a versatile element designed to enhance the functionality and presentation of various sections within a theme. It is particularly useful for showcasing products, blog content, and detailed product information. By integrating this block, users can customize and improve the visual appeal and interactivity of their content. Available in sections such as Featured product, Blog post, and Product information, the @app block plays a crucial role in enhancing both the visual and functional aspects of these areas. It adapts to different screen sizes, ensuring optimal viewing on both desktop and mobile devices, while also maintaining fast performance and accessibility for all users. Usage examples include highlighting specific products with engaging presentations in the Featured product section, enhancing the layout and readability of blog posts, and providing comprehensive product details to assist customers in making informed purchasing decisions.

Accordion

The Accordion block is a versatile tool for creating expandable information tabs within a theme, ideal for organizing content like FAQs or additional product details. It allows users to add multiple rows that can be expanded or collapsed, providing a clean and organized presentation of information. Key features include display settings to control the initial state of the Accordion, content linking for enhanced informational value, and customizable heading and icon options. Users can also manage content display with excerpts, and enrich the block with imagery and video settings, ensuring a visually appealing and informative experience. Practical usage examples include creating a FAQ section on a product page, where each question is a heading and the answer expands upon clicking. The Accordion can also be used to provide detailed product specifications, warranty information, or care instructions, keeping the page tidy while offering comprehensive details. Additionally, it can link to blog posts or pages, providing summaries or excerpts to encourage further reading.

Account icon

The Account Icon block enhances navigation by providing a visual icon for user account access, typically used in the main navigation section. It allows users to easily locate and access their account settings or login page, contributing to a streamlined user experience. Key settings include layout options such as filling available space and centering the icon, ensuring a balanced and visually appealing design. Visibility settings allow the icon to adapt to different devices, offering options to hide it on desktop or mobile as needed. Usage examples include placing the Account Icon in the main navigation bar for quick access to account settings, which is particularly beneficial for e-commerce sites. Additionally, leveraging visibility settings ensures the icon is appropriately displayed across various devices, enhancing accessibility and user experience.

Benefits

The Benefits block is a versatile tool designed to highlight up to three key features or benefits of a product. It enhances product presentation by showcasing unique selling points, and all settings within this block are optional, allowing for flexible customization. The block can be used in sections such as Featured Product and Product Information to effectively communicate product features. Key settings include options for selecting icons, headings, and subheadings for each benefit, with defaults provided for ease of use. Visibility settings allow you to control how the block appears on different devices, ensuring an optimized display across various viewing contexts. In practical use, the Benefits block can be employed in the Featured Product section to highlight top features like durability, eco-friendliness, and warranty. In the Product Information section, it can provide additional context and value propositions, enhancing customer understanding and interest.

Blog post

The Blog Post block is a versatile tool designed to display an article card within various sections of a theme. It highlights a blog post's title, featured image, and excerpt, providing a link for readers to explore more. This block can be seamlessly integrated into sections such as Blog Posts, Collage, Slideshow, and Multicolumn, enhancing the visual and functional appeal of your site. Key settings include options for image aspect ratio, card style, text content, button style, and text alignment, allowing for extensive customization to match your theme's aesthetic. The block also offers flexibility in displaying additional information like author and date as captions. Usage examples include featuring recent articles in a grid layout within the Blog Posts section, creating a visually appealing mix of images and text in a Collage, highlighting featured articles in a Slideshow, and presenting multiple articles side by side in a Multicolumn layout. These examples demonstrate the block's ability to enhance content presentation and user engagement across different sections of your site.

Breadcrumb

The breadcrumb block is a navigation tool that provides a hierarchical list of links, allowing users to easily navigate back to parent pages. This feature enhances the user experience by offering a clear path through the website's structure. Key settings include the ability to add a static parent link, customize the breadcrumb text, and define the URL for each breadcrumb link. Additionally, you can choose whether links open in a new tab and control the visibility of the breadcrumb on different devices. Visibility settings ensure that the breadcrumb block is displayed appropriately across various devices, with options to hide it on desktops or mobile devices if needed. This flexibility helps maintain a clean and user-friendly interface. Practical usage examples include creating breadcrumbs for product pages to help users return to categories or the homepage, enhancing blog navigation by allowing users to navigate back to main or category pages, and using custom parent links to create specific navigation paths for related content. These examples illustrate how the breadcrumb block can be effectively utilized to improve site navigation and user experience.

Breadcrumbs

The Breadcrumbs block is a navigation tool that provides a hierarchical list of links, helping users easily navigate to parent pages. It typically appears at the top of a page and is available in the Hero and Multicolumn sections. Key settings include customizing the home and separator icons, defining text and links for each breadcrumb, and controlling link behavior such as opening in a new tab. The block also offers alignment settings for consistent display across devices, an editor title for customization within the theme editor, and visibility options to manage how breadcrumbs appear on different devices. These features collectively enhance the user experience by providing clear navigation paths. Practical usage examples include using the Breadcrumbs block in the Hero section for basic navigation, creating custom parent links in the Multicolumn section to reflect site hierarchy, and adjusting alignment settings for responsive design. These implementations ensure an intuitive and user-friendly navigation system that improves site usability.

Button

The Button block is a versatile tool designed to enhance user interaction by providing customizable button elements that can be integrated into various sections of a site. It offers a range of styling and layout options, making it adaptable to different design needs. Key features include the ability to add icons, customize button text, and specify link behavior, such as opening in a new tab. Users can choose from various button styles, including Primary, Secondary, and Extra Large, and configure the button layout with options like Icon Left or Icon Only. The Button block also includes settings for full-width display on mobile devices and controls for horizontal alignment and visibility across different devices. In practical use, the Button block can serve as a primary call-to-action in the Hero section, a navigation button in the Footer, or a product information button with an icon layout. These examples demonstrate the block's flexibility and its ability to enhance site navigation and user engagement.

Buy buttons

The Buy buttons block enhances the shopping experience by offering customizable options for the Add to Cart functionality. It allows users to modify button appearance and behavior, and includes features like displaying payment options and shipping information. Key settings include the ability to choose an icon, display additional checkout buttons, and show free shipping information. This block also supports local pickup options, payment icons, and a sticky cart feature that remains visible during scrolling. Users can enable a gift card recipient option and display payment terms for Shop Pay Installments. Visibility settings allow the button to be hidden on specific devices, ensuring a responsive design. Practical usage examples include enhancing the checkout experience by displaying additional checkout buttons and payment icons, promoting free shipping offers, and attracting local customers with pickup options. The gift card recipient feature is useful for special occasions, and visibility settings help maintain a clean design across different screen sizes.

Cart

The Cart block is a customizable feature designed to display cart-related information, enhancing the shopping experience by allowing users to view and manage their cart contents easily. It is available in the "Main navigation" section and can be tailored to fit the aesthetic and functional needs of a site. Key settings include layout options that allow the Cart block to fill available space and be centered on desktop devices. Background settings offer customization through solid colors, gradients, and imagery, with specific options for mobile devices to ensure optimal display. Color settings enable users to adjust the colors of icons, text, and subheadings, while visibility settings allow the block to be shown or hidden on different devices. Usage examples include optimizing the desktop layout by enabling "Fill available space" and "Show centered" options, using background gradients and overlay colors for visual appeal, and setting different background images for desktop and mobile devices to maintain a cohesive look across all screen sizes. These settings help create a Cart block that is both functional and visually appealing.

Collection banner

The Collection Banner block is a versatile tool designed to enhance the visual appeal of collection pages by allowing users to add customizable banners. It offers a range of settings to adjust the banner's size, background, and content alignment, making it ideal for creating engaging and visually appealing pages. Key features include options for banner size, background customization with images or videos, and foreground content alignment. Users can also add buttons with customizable styles and layouts, enhancing user interaction. The block supports responsive design by allowing different background and foreground images for mobile devices. Usage examples include creating promotional banners to highlight sales or special promotions, incorporating video backgrounds for brand storytelling, and ensuring a seamless experience across all screen sizes with responsive design options. By leveraging these settings, the Collection Banner block helps capture visitors' attention and enhances their browsing experience.

Contact form

The contact form block is a versatile tool designed to be integrated into various sections of a theme, allowing users to collect information from visitors. It offers a range of customization options, including button styles, text alignment, and the ability to add icons and captions. Users can also specify headings and subheadings to provide context and detail. This block is available in sections such as Collage, Contact form, Product information, Multicolumn, and Featured product. It ensures accessibility with clear labels and instructions, and its responsive design adapts to both desktop and mobile devices. Practical usage examples include integrating the contact form block into a product information section to facilitate customer inquiries, using it in a multicolumn layout for a visually appealing design, and adding it to a featured product section to enable customer engagement with highlighted products.

Contact information

The Contact Information block is a versatile tool designed to display essential contact details within a theme, enhancing user experience by providing easy access to information. It is commonly used in sections like the Contact Form, allowing users to quickly find phone numbers, email addresses, and physical locations. Key features of the Contact Information block include customizable headings, subheadings, and the ability to display social media icons. Users can also personalize the block's appearance with background and overlay settings, ensuring it aligns with the overall theme design. Visibility settings allow for control over where the block appears, optimizing it for both desktop and mobile views. Practical usage examples include placing the Contact Information block within a Contact Form section to provide comprehensive contact details, adding it to the footer for consistent accessibility across all pages, or incorporating it into an About Us page to facilitate easy communication with the business.

Copyright

The Copyright block is a customizable element designed to display copyright information in the footer navigation section of a website. It allows you to specify the text for the copyright notice, with a default setting of "All rights reserved." This text can be tailored to fit your specific needs. The block offers alignment settings to ensure the text is displayed correctly across different devices, with options for both desktop and mobile views. Layout settings provide flexibility in how the block integrates with other elements, allowing it to fill available space or be displayed in a new column or row. Visibility settings enable you to control when and where the block is shown, with options to hide it on desktop or mobile devices. By default, the block is set to do not hide, ensuring it remains visible across all platforms. Practical usage examples include using the default text for a simple copyright notice, adjusting alignment for a balanced look on different devices, enabling responsive layout options for consistent appearance, and setting conditional visibility to maintain a clean layout on smaller screens. These features help ensure the copyright information aligns with your website's design and branding.

Custom CSS

The Custom CSS block empowers users to personalize their site's appearance by adding custom CSS code. This feature is ideal for those looking to implement unique styling rules that extend beyond the default theme options. Users can modify colors, fonts, and layouts, providing a tailored look and feel to their site. Available in the "Custom code" and "Code viewer" sections, the Custom CSS block offers flexibility in applying custom styles. Users can input their CSS code in a designated text area, labeled as "Code," to achieve their desired visual adjustments. Practical usage examples include changing button background colors, adjusting font sizes for headings, and hiding specific elements like banners. These examples illustrate how the Custom CSS block can be utilized to align the site's design with the user's brand or personal preferences.

Custom JavaScript

The Custom JavaScript block allows users to insert custom JavaScript code into their theme, enhancing its functionality with embedded forms, services, or other scripts. This block is available in the "Custom code" and "Code viewer" sections, offering flexibility in script application. Users can input JavaScript code directly into the block without <script> tags, ensuring proper execution within the theme. This feature is ideal for integrating third-party services or adding custom functionalities not natively supported by the theme. Practical uses of the Custom JavaScript block include embedding third-party forms, adding analytics tracking scripts, and enhancing user interaction with dynamic elements like sliders or pop-ups. By leveraging this block, users can tailor their theme to meet specific needs and preferences.

Custom asset

The Custom asset block is a powerful tool that allows users to integrate custom code snippets into their theme, enhancing site flexibility and functionality. It supports HTML, CSS, and JavaScript, enabling users to extend their theme's capabilities beyond default settings. This block is particularly useful for embedding custom scripts or styles that are not natively supported. The primary purpose of the Custom asset block is to provide a flexible way to incorporate custom code into the theme. This is ideal for advanced users who want to add unique features or styling not available through standard theme settings. Usage examples include embedding third-party widgets, applying custom styling, and enhancing user interaction with JavaScript functionality. By utilizing the Custom asset block, users can significantly enhance their site's functionality and appearance, making it more engaging and tailored to specific needs.

Custom liquid

The Custom Liquid block allows users to add custom Liquid code into specific sections of their theme, providing flexibility for integrating third-party applications or displaying dynamic content using metafields. This block can be used in sections such as Featured Product, Blog Post, and Product Information, enhancing the customization capabilities of your theme. Users can control the visibility of the Custom Liquid block, choosing to hide it on specific devices like desktop or mobile, or keep it visible across all platforms. This ensures that content is displayed appropriately based on user preferences and device types. Practical usage examples include integrating third-party applications by adding code snippets for chat widgets or analytics tools, displaying dynamic content from metafields such as personalized product recommendations, and customizing product information with additional details not available through default settings.

Description

The block is designed to enhance the presentation of product descriptions by offering customizable settings. Users can adjust text size and color to align with their design preferences, ensuring the description is both readable and visually appealing. The block also includes an expandable feature, allowing for a concise display with the option to view more details. Visibility settings provide control over how the block appears on different devices, ensuring optimal display across platforms. This flexibility makes the block suitable for various sections, such as Featured product and Product information, allowing for consistent thematic presentation. In practical use, the block can be employed on product detail pages to highlight specifications and benefits. For mobile optimization, the expandable feature keeps the layout clean while offering full access to information. Additionally, matching text color with brand themes ensures a cohesive look throughout the site.

Feature

The Feature block is a versatile tool designed to highlight specific features or announcements within a theme. It allows you to present key information with optional links and visibility settings, making it ideal for drawing attention to important content. This block is primarily used in the "Features bar" section, providing a structured way to showcase features with icons, titles, and subheadings. Key settings include the ability to select an icon, set a descriptive title, and provide a brief subheading for additional context. You can also add a URL link for users to explore more about the feature, with the option to open the link in a new tab. Visibility settings allow you to control when and where the feature is displayed, ensuring optimal presentation across different devices. Practical usage examples include highlighting a new product feature by using an icon to represent the product category, setting the title to the product name, and using the subheading to describe the new feature. Additionally, you can announce a limited-time offer by selecting an attention-grabbing icon, titling the block with the offer name, and linking to the offer page for easy navigation.

Filter group

The Filter group block is a versatile tool designed to enhance user navigation by providing filter options within content sections, particularly useful in blog content. It allows users to refine content visibility by filtering posts based on specific criteria, such as tags or categories. This functionality is crucial for improving user experience by enabling quick access to relevant content. Key settings include the ability to show the filter group open by default, specify a filter title for context, and define filter tags for categorizing content. These settings ensure that users can easily understand and utilize the filters available to them. In practical use, the Filter group block can be implemented in a blog content section to allow users to filter posts by tags like "news," "updates," or "tutorials." This helps users find content that matches their interests efficiently. Additionally, similar filtering logic can be applied to product collections, enabling users to filter products by categories such as "new arrivals," "best sellers," or "on sale."

Follow on shop button

The Follow on Shop Button block is a versatile tool designed to boost user engagement by encouraging visitors to follow the shop. Typically placed in the footer navigation, it allows users to easily connect with the shop's updates and offerings, enhancing interaction and retention. Key settings include alignment options for both desktop and mobile views, ensuring the button integrates seamlessly with other elements. Layout settings offer flexibility, allowing the button to fill available space or be displayed in new columns or rows. Visibility settings provide control over when and where the button appears, tailoring the user experience across different devices. Practical usage examples include placing the Follow on Shop Button in the footer navigation to promote shop updates and utilizing responsive design settings to maintain a consistent appearance across devices. Additionally, custom layouts can be created by integrating the button into promotional banners or call-to-action areas, enhancing its visibility and effectiveness.

Footer menu

The Footer Menu block is a versatile tool designed to display a navigation menu in the footer section of a website. It allows for customization of alignment, layout, and visibility, ensuring the menu integrates seamlessly with the site's design. Users can select the menu to display, with the default set to footer, and adjust settings for both desktop and mobile devices. Key features include alignment settings for different devices, layout options to fill available space or display the menu in new columns or rows, and visibility controls to manage how the menu appears across various devices. These settings provide flexibility in design and functionality, enhancing user navigation. Practical usage examples include setting up a basic footer navigation with links to important pages like Contact Us and Privacy Policy. The Footer Menu block can also be configured for responsive design, ensuring optimal appearance on both desktop and mobile devices. Additionally, it supports multi-column layouts, allowing for a more organized footer with distinct sections.

Heading

The Heading block is a versatile element designed for use within the Multicolumn section of a theme. It allows users to add and customize headings with various styles, enhancing both the visual appeal and functionality of a webpage. Key features include options for text alignment, heading types, and button configurations, providing flexibility to match your design needs. Users can enhance their headings by adding icons and captions, offering additional context or visual cues. The block also supports subheadings, allowing for more detailed information to be displayed alongside the main heading. Button settings offer customization for style, layout, and position, ensuring optimal placement and functionality across devices. Practical usage examples include creating prominent section headers with call-to-action buttons, adding icons for visual enhancement, and ensuring responsive button placement for improved user experience. By leveraging these settings, the Heading block can significantly enhance the overall design and usability of your theme.

Icon with text

The Icon with Text block is a versatile tool designed to enhance your theme by highlighting key features or unique selling points with customizable icons and text. It can be used in various sections such as Featured Product, Product Information, and Hero, providing a visually appealing way to convey important information. Key settings include the ability to select an icon, input descriptive text, and add a clickable link. You can also choose whether the link opens in a new tab. Alignment settings ensure the block looks great on both desktop and mobile devices, while visibility settings allow you to control which devices display the block. Usage examples include showcasing product features in the Hero section, emphasizing unique selling points in the Product Information section, and guiding users to more information or related products in the Featured Product section. These features make the Icon with Text block an effective tool for enhancing user engagement and navigation.

Image

The Image block is a versatile tool designed to enhance your store's visual appeal by allowing you to add and customize images across various sections. It offers a range of settings to adjust the image's appearance, alignment, and additional features like captions and overlays, ensuring a cohesive and engaging presentation. Key settings include options for selecting and styling images, controlling aspect ratios for both desktop and mobile views, and customizing border colors and link behaviors. You can also adjust alignment settings, add captions, and apply overlays to enhance visual effects. Practical usage examples include displaying a product image with a caption, creating a hero image with an overlay, and linking an image to a product page. These features help create a dynamic and interactive user experience, tailored to fit seamlessly within your store's layout.

Localization selectors

The Localization Selectors block enhances user experience by providing country and language selectors within the footer navigation. This feature allows users to switch between different countries and languages, offering a personalized and accessible shopping experience. The block includes settings for displaying country and language selectors, with options to manage their visibility on different devices. Key settings include the ability to show or hide country and language selectors, with defaults set to enabled. Visibility settings allow you to control when and where these selectors appear, with options to hide them on desktops or mobile devices. Practical usage examples include catering to a multinational storefront by enabling selectors for a diverse customer base, tailoring promotions based on the user's selected country, and optimizing responsive design by adjusting visibility settings to improve the user interface on various devices.

Logo

The Logo block is a versatile feature designed to display your store's logo within a theme. It offers customization options to control the logo's appearance and behavior, making it adaptable to various design needs. This block can be placed in the "Footer navigation" and "Main navigation" sections, providing flexibility in its integration across your site. Key settings include the ability to upload a logo image, adjust its maximum width, and control its visibility on different devices. The Logo block can fill available space or be centered within its section, particularly on desktop views, ensuring a cohesive and professional look. Practical usage examples include using the Logo block in the "Main navigation" section to prominently display your brand logo at the top of your site. In the "Footer navigation" section, it helps maintain brand visibility at the bottom of your site. Additionally, the visibility settings allow you to hide the logo on mobile devices if space is limited, ensuring a clean and uncluttered mobile experience.

Logo item

The Logo item block is a versatile tool designed to display logos within a theme, offering various customization options. It is primarily used in the Logo list section, allowing users to showcase multiple logos with ease. Key settings include selecting an image, adjusting the maximum image width, adding captions, and linking logos to specific URLs. Users can also control whether links open in a new tab and manage the visibility of the block across different devices. Practical applications of the Logo item block include displaying partner logos, highlighting certifications, and featuring media mentions. For instance, businesses can use this block to showcase logos of partner companies, adding captions to describe partnerships and linking each logo to the partner's website. Similarly, certifications or awards can be highlighted with explanatory captions and links to detailed pages. Media mentions can also be featured, with captions providing brief descriptions and links to the original articles or videos. These settings ensure logos are presented in a visually appealing and informative manner.

Main menu

The Main Menu block is an essential part of the theme's navigation system, enabling users to create and customize the main navigation menu. It offers settings for managing menu items, displaying features, and adjusting layout options to enhance user experience. The block is designed to fit seamlessly within the design, providing a balanced and visually appealing navigation menu. Key settings include options for linking lists, displaying a features bar, and managing layout and banner settings. Users can customize the background and foreground content of the banner, including image and icon selections, as well as button styles and layouts. Visibility settings ensure the menu is optimized for both desktop and mobile devices. Practical usage examples include setting up a navigation menu that links to key pages, enhancing navigation with a banner to highlight promotions, and ensuring responsive design for a seamless user experience across all platforms. By leveraging these settings, users can create a dynamic and visually appealing navigation menu that enhances the overall functionality and aesthetics of their site.

Mega menu

The Mega Menu block is a powerful tool designed to enhance website navigation by organizing and displaying a large number of menu items in a visually appealing format. It allows users to easily navigate through different sections of a website, improving the overall user experience. Key features of the Mega Menu include customizable menu selection, a features bar for highlighting promotions, and "View All" buttons for quick access to all items within a category. Users can also adjust layout settings to fill available space or center content, and add banners for promotions or announcements. Background settings allow for the customization of banner backgrounds with images or videos, while foreground content settings manage text and alignment. Button settings offer various styles and layouts, and visibility settings ensure the Mega Menu is displayed appropriately on different devices. Practical usage examples include creating promotional banners to draw attention to special offers, organizing complex menus for structured navigation, and adjusting visibility settings for responsive design across desktop and mobile platforms.

Payment icons

The Payment Icons block is a versatile tool designed to display icons of the enabled payment methods within your theme. Typically used in the footer navigation section, it visually represents the payment options available to customers, enhancing trust and transparency. Key settings include alignment options for both desktop and mobile views, allowing you to control how the icons are positioned. Layout settings offer flexibility in presentation, enabling the icons to fill available space or be displayed in new columns or rows. Visibility settings provide control over when and where the icons are displayed, with options to hide them on specific devices if needed. In practice, the Payment Icons block can be placed in the footer navigation to showcase available payment methods, enhancing customer confidence at the point of purchase. By utilizing alignment and layout settings, you can ensure the icons are displayed consistently across different devices, maintaining a professional appearance. Additionally, visibility settings allow for conditional display, such as hiding icons on mobile devices to save space.

Price

The Price block is a versatile tool designed to display a product's price with customizable settings. Users can adjust the display to include shipping and tax policy information, ensuring transparency for customers. The block offers options to modify text size and color, allowing for alignment with the store's branding and design preferences. Visibility settings enable users to control how the Price block appears on different devices, supporting responsive design needs. This flexibility ensures that the price display can be tailored to fit various screen sizes and layouts. Practical usage examples include highlighting discounts by changing the sale price color, enhancing brand consistency through text color adjustments, and optimizing the display for mobile devices by utilizing visibility settings. These features collectively enhance both the aesthetic and functional aspects of the store's design.

Product

The Product block is a versatile tool designed to display a product card within a theme. It showcases essential product details such as the title, featured image, and a link for more information. This block can be customized with various settings to align with different design preferences and is available in sections like Collage, Slideshow, and Multicolumn. Card settings allow for customization of the product card's appearance and behavior, including options for card style, image aspect ratio, button style, text display, and variant display. Editor settings provide control over the block's title and visibility, ensuring seamless integration into your design. Usage examples include using the Product block in a Collage section to create a visually appealing display of products, incorporating it into a Slideshow section for dynamic transitions, and arranging multiple Product blocks in a Multicolumn layout to showcase a variety of products side by side.

Quantity selector

The Quantity Selector block enhances the shopping experience by allowing customers to specify the number of items they wish to purchase directly from the product page. Available in the Featured Product and Product Information sections, it provides a seamless interface for quantity selection. Key features include displaying product availability to inform customers about stock levels and a low stock notice threshold to create urgency when inventory is running low. The visibility setting offers flexibility, allowing the block to be shown or hidden on different devices. In practical use, the Quantity Selector block can be integrated into the Featured Product section to facilitate bulk purchases during promotions. In the Product Information section, it streamlines the purchasing process by enabling easy quantity adjustments without leaving the product details page.

Rich text

The Rich Text block is a versatile tool designed to enhance your theme by allowing you to add and format text content across various sections. It supports basic text formatting, color customization, and visibility settings, making it adaptable to different design needs. With options for text size, color, and background customization, the Rich Text block ensures your content is both visually appealing and accessible. This block is available in sections such as Featured Product, Footer Navigation, Product Information, Logo List, and Hero. It allows you to provide detailed descriptions, add additional information or links, enhance product pages, and deliver impactful messages or calls to action. The Rich Text block is optimized for responsive design, ensuring readability across devices, and it supports accessibility standards by allowing for sufficient text color contrast.

Rich text

The Rich Text block is a flexible tool designed to enhance text presentation with customizable options for alignment, icon positioning, and text size. It supports rich text formatting, allowing for the inclusion of links, bold, and italic styles. This block is ideal for creating visually appealing content across various sections such as Collage, Video with Text, Slideshow, Multicolumn, and Image with Text. Key features include the ability to add headings, captions, and icons, as well as customize button styles and layouts. Background settings offer options for solid colors, gradients, images, and videos, while visibility settings ensure optimal display across devices. Usage examples include creating promotional banners with call-to-action buttons, adding informational sections within a Multicolumn layout, and overlaying text on images for enhanced visual impact. By utilizing the Rich Text block's settings, users can craft engaging and informative content tailored to their specific needs.

Row

The Row block is a dynamic element designed to enhance the Accordion section by allowing users to display content from blog posts, pages, or directly through content settings. It is ideal for creating expandable information tabs, such as FAQs or additional details, within an accordion layout. Key features include the ability to display the Row open by default, integrate dynamic content from your site, and customize visual elements like headings and icons. The block also supports rich text content, button customization, and imagery settings, ensuring a visually engaging experience. Video settings allow for the integration of YouTube, Vimeo, or hosted videos, with options for autoplay, looping, and muting. Visibility settings ensure the Row adapts to different devices, providing a responsive design. Usage examples include creating a comprehensive FAQ section, integrating product details from blog posts or pages, and showcasing promotional videos. These functionalities help create a dynamic and engaging user experience that is both informative and visually appealing.

Search

The Predictive Search block enhances search functionality by providing real-time suggestions and results as users type, improving the overall user experience. It allows customization of the search input field and button, including placeholder text, button text, and input style. Users can choose from various layout and alignment options to ensure the search block fits seamlessly within the theme design. Predictive search settings enable the display of potential matches and a features bar to highlight key announcements. Default and secondary results can be configured to guide users when no search terms are entered. Banner and background settings offer additional customization options, including the use of images or videos. Usage examples include enhancing user experience by enabling predictive search, customizing appearance to match the theme design, and highlighting features through the features bar. These functionalities make the Predictive Search block a versatile tool for improving search efficiency and user engagement.

Separator

The Separator block is a versatile tool designed to create visual separation between different sections of a page. It enhances the overall layout and readability by providing a customizable line that can be adjusted in terms of height and style. This block is available in various sections, including Featured product, Footer navigation, Product information, and Hero. With the Separator block, you can control the height of the separator line for both desktop and mobile views, ensuring a consistent look across devices. The line style can be customized with options such as dashed, dotted, line, or none, allowing you to match the design to your theme's aesthetic. Practical usage of the Separator block includes creating a visual break between content sections, which helps organize information and improve readability. Additionally, you can adjust the height and style to align with your design preferences, ensuring a cohesive and engaging page layout.

Share/print UI

The Share/Print UI block is a versatile tool designed to enhance user interaction by allowing easy sharing and printing of webpage content. Typically integrated within the Hero section, it seamlessly blends with the main visual area of a page, offering users straightforward access to share and print functionalities. Key settings include options to show or hide the print and share buttons, customize icon colors, and adjust alignment for both desktop and mobile views. Visibility settings further allow you to control the display of these buttons across different devices, ensuring a consistent user experience. Practical usage examples include enabling the share button to boost content engagement, customizing icon colors to match your site's design, and utilizing alignment and visibility settings to maintain a responsive layout. By configuring these settings, the Share/Print UI block effectively enhances user interaction and content dissemination.

Slide

The Slide block is a dynamic element used within a theme's slideshow section, designed to display slides with text, imagery, and video options. It is ideal for highlighting product features or details in an engaging manner. Users can customize the slide with icons, headings, and rich text content, making it versatile for various presentations. Imagery and video settings allow for the addition of visual content, enhancing the slide's appeal. Overlay settings provide options to adjust color and opacity, ensuring a consistent look. Visibility settings control how the slide appears on different devices, offering flexibility in presentation. Practical usage examples include showcasing a new product with images and descriptive text, incorporating a promotional video to highlight special offers, and creating thematic presentations with a series of slides. These features make the Slide block a powerful tool for creating visually compelling content.

Social media icons

The Social Media Icons block is a versatile tool designed to display icons for various social media accounts linked to your site. By enhancing the visibility of these links, it allows users to easily connect with your brand's social media profiles, fostering greater engagement. This block can be strategically placed in sections such as Footer navigation, Product information, and Featured product. The visibility settings offer flexibility, allowing you to control when and where the icons appear, ensuring they are visible on the desired devices and contexts. Practical usage examples include placing the icons in the footer for easy access from any page, alongside product details to encourage sharing, or in a featured product section to draw attention to your social media presence. By integrating the Social Media Icons block effectively, you can enhance user interaction and promote your brand's social media channels.

Testimonial

The Testimonial block is a versatile tool designed to enhance the credibility of products or services by showcasing customer feedback. It can be integrated into various sections such as Collage, Testimonials, Slideshow, Multicolumn, Product Information, and Featured Product. This block allows users to display a customer rating, a quote, and the source of the testimonial, with the option to link to a related product for a comprehensive view of customer satisfaction. Key settings include the ability to set a customer rating from 0 to 5, customize the testimonial content with rich text, specify the source, and choose an image style. The image style options include default, rounded corners, and circle, allowing for aesthetic customization. Usage examples include displaying a customer testimonial in a product section to help potential buyers make informed decisions, enhancing a homepage with testimonials in a Slideshow section for dynamic engagement, and creating a dedicated testimonials page to compile various customer reviews. These applications ensure the Testimonial block is both functional and visually appealing across different devices and contexts.

Title

The Title block is a versatile tool designed to display a product's title with customizable settings. It can be used in sections like "Featured product" and "Product information," allowing for adjustments in text size, color, and the inclusion of UI elements such as print and share buttons. These settings ensure that the product title is presented effectively across different devices and sections. For practical application, the Title block can be used in the Featured product section to highlight the product name, with options to adjust the text size and color to align with the overall design. In the Product information section, the block ensures the product name is clearly visible and accessible, with functionalities to print or share the product details, enhancing user experience and accessibility.

Variant selector

The Variant Selector block is a crucial tool for products with multiple variants, such as different sizes or colors. It allows customers to select their preferred option before adding the product to their cart. This block can be styled as a dropdown menu or pill-shaped buttons, providing flexibility in how variant options are presented. Color and image swatches offer visual representations of product variants, enhancing the shopping experience by allowing customers to see their options at a glance. Swatch styles can be customized in shape and column count for both desktop and mobile devices. Additionally, swatch borders can be adjusted to highlight selected options, ensuring clarity and ease of use. The Variant Selector block is available in the Featured product and Product information sections, making it versatile for various product displays. Usage examples include products with multiple colors or image variants, where swatches can be used to visually guide customer choices. Responsive design considerations ensure that the block functions seamlessly across all devices, enhancing accessibility and user experience.

Video

The Video block is a versatile tool designed to integrate video content into various sections of your site, such as Collage, Video with text, Slideshow, Multicolumn, Product information, Featured product, and Hero. It supports videos from platforms like YouTube, Vimeo, or self-hosted sources, offering a range of customization options to enhance both the visual and functional presentation of video content. Key settings include alignment options for desktop and mobile, video source and display settings, caption customization, and overlay features. These settings allow you to tailor the video block to fit different design and functional needs, ensuring optimal presentation across different screen sizes. Practical usage examples include embedding a YouTube video by using the Video service URL setting, adding descriptive captions to enhance viewer engagement, and applying overlays to maintain a consistent color scheme or improve text readability. These examples demonstrate how the Video block can be effectively used to create a seamless integration of video content across various sections of your site.

Blocks

Subscribe to our emails