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.

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.

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.

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.

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.

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.

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.

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.

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.

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