Blocks

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.

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.

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.

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.

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