Components Overview

In this section, we will provide an overview of the components integrated into your store's theme when you install Findify's native Shopify app. It's important to note that, for effective customization, there is a suggested order to follow: Sections, Snippets, and then Assets.

1. Sections serve as the foundational entry points, essentially acting as the indexes for rendering our components. They form the core structure of your theme and are rendered using the renderAPI. These Sections are injected into the Document Object Model (DOM) through JavaScript, allowing for efficient manipulation.
2. Snippets are a step deeper, residing within Sections. They are code snippets used to isolate and compartmentalize specific functionality. This approach streamlines code management, making it more concise, enhancing overall readability, and encouraging code reusability. Snippets are integral to the workings of Sections.
3. Assets, on the other hand, play a role at both the Section and Snippet levels. They include files containing scripts and styles that define the look and feel of Findify solutions. From a developer's perspective, the ideal workflow often begins with a thorough understanding of Sections and Snippets, exploring the HTML and liquid structure. After determining what needs to be customized, developers may delve into the Assets, which can include CSS and JavaScript, to fine-tune the visual and functional aspects of your Findify integration.

While merchants are welcome to modify these components to customize the appearance of Findify on their individual stores, it is important to note that this work should only be carried out by a developer – ideally a developer who has had previous experience working with Shopify and with Liquid. This guidance ensures that customization is carried out effectively and aligns with the structure and best practices of your Shopify theme.

👍

In the public "findify-liquid-components" repository, you'll discover all the files generated for a theme. These files come with specific technical naming conventions, but they are exposed and can be customized by external parties.

SECTIONS

📘

What are Sections?

Sections are the designated entry points for our components, essentially serving as the indexes for rendering them. They are rendered using the renderAPI and injected into the DOM through JavaScript for manipulation.

findify-autocomplete.liquid

This liquid file serves as the entry point for the autocomplete feature. It defines the layout and behavior of the autocomplete component, making it essential for creating a smooth and user-friendly search experience on your site. Customize it to control how autocomplete suggestions are displayed.

findify-grid-collection.liquid

This liquid file acts as the entry point for the collection layout component. It controls the layout and presentation of collections within your store. Modify it to ensure that your collection pages align with your store's design and branding.

findify-grid-content.liquid

This liquid file represents the content card components index that is injected within findify-search.liquid. It plays a vital role in the display of content within your search pages, offering flexibility in how content is presented. Customize it to achieve your desired content layout.

findify-filter-group.liquid

This liquid file is responsible for rendering filter groups of a particular type. It is inserted within filter sidebars found in both findify-collection and findify-search. Each filter type, such as category, price, or color, returned from the Search API uses this component to be rendered. Customize it to control the display and behavior of different filter types.

findify-pagination.liquid

This liquid file serves as the entry point for the pagination layout component. It is injected within findify-search.liquid and findify-collection.liquid, allowing users to navigate through search results or collection pages with ease. Modify it to achieve your desired pagination style and functionality.

findify-recommendation.liquid

This liquid file acts as the entry point for the recommendation layout component. It is essential for displaying product recommendations to users. Customize it to control the layout and behavior of product recommendations, enhancing product discoverability on your site.

findify-grid-search.liquid

This liquid file serves as the entry point for the search layout component. It defines the layout and structure of search pages on your site. Customize it to ensure that search pages align with your store's design and offer an intuitive search experience.

SNIPPETS

📘

What are Snippets?

These are code snippets employed within Sections to isolate and compartmentalize code. This approach serves to make files smaller, enhance readability, and promote code reusability.

findify-autocomplete-connector.liquid

This liquid file converts RenderAPI GET URL into liquid parameters for the autocomplete. It plays a vital role in adapting the autocomplete behavior to suit your specific needs.

findify-autocomplete-view-all.liquid

This liquid file provides a "View All" button for the autocomplete component. It enhances the user experience by allowing customers to see all autocomplete suggestions, facilitating a more comprehensive search experience.

findify-content-card.liquid

This liquid file represents the content card component. It is responsible for rendering content cards in your store, making it a crucial element for showcasing content effectively.

findify-content-grid.liquid

This liquid file is the content grid component. It plays a central role in displaying content within your search page. You can customize it to control how content is presented in a grid format.

findify-content-pagination.liquid

This liquid file is responsible for the content pagination component. It facilitates pagination for your integrated content, allowing users to navigate through content sections easily.

findify-content-tabs.liquid

This liquid file represents the content tabs component. It enables the creation of tabbed content sections, enhancing the organization and presentation of content on your site.

findify-toolbar-desktop.liquid

This liquid file represents the header of search/collection for desktop component. It provides the header layout for search and collection pages on the desktop version of your site.

findify-icon-filter.liquid

This liquid file is responsible for rendering a filter icon in SVG format. It is used to display a filter icon on your site, enhancing the visual representation of filtering options.

findify-filter-selected.liquid

This liquid file represents the breadcrumb active filters component. It displays active filter selections, helping users understand their current filtering choices.

findify-filter-checkbox.liquid

This liquid file renders checkboxes for filters. It is a crucial element for users to select filter options on your site.

findify-filter-color-value.liquid

This liquid file is responsible for rendering color filter value components. It plays a significant role in displaying and selecting color filter options.

findify-filter-color.liquid

This liquid file represents the structure of color filter items. It controls how color filter options are presented on your site.

findify-filter-items.liquid

This liquid file defines the structure for filter items. It allows you to create the layout and presentation of filter options.

findify-filter-nested.liquid

This liquid file represents the structure for nested filter items. It is used when you have hierarchical filter options that need a specific layout.

findify-filter-range-slider.liquid

This liquid file is responsible for rendering a range filter slider component. It allows users to set a range for filtering products or content.

findify-filter-range.liquid

This liquid file defines the structure of range filter options. It controls how range filter options are presented on your site.

findify-filter-rating-value.liquid

This liquid file is used for rendering rating filter components. It enables users to filter products or content based on ratings.

findify-filter-search-input.liquid

This liquid file represents the filter layout component rendered within search and collection sections. It allows users to input specific search criteria.

findify-filter-text-value.liquid

This liquid file defines the structure for text filter value components. It enables users to filter products or content based on specific text criteria.

findify-filter-text.liquid

This liquid file represents the structure of text filter items. It controls how text filter options are presented on your site.

findify-head-injector.liquid

This liquid file includes assets injections to be placed within the section of your website. It's essential for adding essential assets that enhance your site's functionality.

findify-icon-arrow.liquid

This liquid file is responsible for rendering an arrow icon in SVG format. It allows you to display an arrow icon for various purposes on your site.

findify-icon-cross.liquid

This liquid file is used to render an "X" icon in SVG format. It's commonly used for actions such as closing or removing items on your site.

findify-icon-star.liquid

This liquid file is responsible for rendering a star icon in SVG format. It's commonly used for displaying star ratings or favorites on your site.

findify-loader.liquid

This liquid file renders a loader feedback component in SVG format. It provides visual feedback to users, indicating that a process is in progress.

findify-toolbar-mobile.liquid

This liquid file represents the header of search/collection for mobile devices. It provides the header layout for search and collection pages on the mobile version of your site.

findify-grid-connector.liquid

This liquid file converts RenderAPI GET URL into liquid parameters for search and collection components. It's a crucial component for linking search and collection functionality with your store's liquid parameters.

findify-product-card.liquid

This liquid file represents the product card component. It is responsible for rendering product information in a consistent format, making it an integral part of displaying products effectively.

findify-product-price.liquid

This liquid file represents the component for displaying product prices. It ensures that prices are presented in a standardized and clear manner on your site.

findify-icon-sorting.liquid

This liquid file is used for rendering a sorting icon in SVG format. It allows you to display sorting icons to indicate options for sorting products or content.

findify-sorting.liquid

This liquid file represents the sorting component. It enables users to choose how products or content are sorted, offering a vital element for enhancing user experience and product discoverability.

ASSETS

📘

What are Assets?

Assets are files that include scripts and styles for different components of Findify. These are responsible for the look and feel of Findify solutions.

To modify these files, the workflow is standard for Shopify users, similar to making changes elsewhere. The assets are contained within "snippets/findify-head.liquid," which is rendered within the "" section of the "theme.liquid" file.

findify-analytics.js

This file contains JavaScript scripts that are responsible for event bindings related to analytics. It allows you to track and gather data on user interactions and behavior on your online store, providing valuable insights into your customers' engagement with Findify's solutions.

findify-autocomplete.css

In this stylesheet, you'll find the styling code that enhances the visual presentation of the autocomplete component. It controls the appearance and layout of autocomplete suggestions.

findify-autocomplete.js

This JavaScript file governs the behavior of the autocomplete feature. It handles event bindings and interactions associated with the autocomplete, making it an essential part of ensuring smooth and efficient autocomplete functionality on your store.

findify-content-grid.css

This stylesheet focuses on the styling of the content grid within the search page. It plays a crucial role in determining how your content is presented on the search page, ensuring it aligns with your store's aesthetics.

findify-content-tabs.css

This stylesheet is responsible for the styling of tabs used in the search page for content integration. It controls the appearance and behavior of these tabs, allowing you to create a user-friendly interface for your content.

findify-content-tabs.js

In this JavaScript file, you'll find the event bindings and functionality for tabs used in content integration. It ensures that users can easily navigate through different content sections on your store.

findify-content.js

This JavaScript file contains logic for loading and presenting content integrated into your store. It's crucial for ensuring that your content displays correctly and functions as expected.

findify-filter-selected.css

This stylesheet is dedicated to the styling of active filter breadcrumbs. It enhances the visual representation of active filters on your store, making it easier for customers to understand their filtering choices.

findify-filter.css

This stylesheet controls the styling of various filters on your store. It's responsible for defining how filters look and function, making them visually appealing and functional.

findify-filter.js

This JavaScript file handles event bindings for filters. It ensures that filters respond as expected when customers make selections, allowing for effective filtering of products or content.

findify-sidebar-mobile.css

This stylesheet is responsible for styling the mobile side panels used for filters and sorting. It makes sure that the mobile interface is visually appealing and easy to use.

findify-sidebar-mobile.js

This JavaScript file contains the logic and event bindings for the mobile side panels. It ensures that mobile users can easily access and interact with filtering and sorting options.

findify-pagination.css

This stylesheet focuses on the styling of the pagination component, which is essential for navigating through search results or content. It defines the visual appearance of pagination elements.

findify-product-card.css

This stylesheet is dedicated to styling the product cards, which are used consistently across autocomplete, recommendation, and search/collection components. It ensures a consistent look for product listings.

findify-recommendation.css

This stylesheet controls the styling of recommendation components, particularly the swiper elements that are a part of these recommendations. It helps create visually appealing product recommendations.

findify-grid.css

This stylesheet governs the styling of the page structure for search/collection components. It defines the layout and appearance of these pages, ensuring they align with your store's design.

findify-sorting.css

This stylesheet is responsible for styling the sorting dropdown, allowing customers to choose how products or content are sorted. It controls the visual aspects of sorting options.

findify-sorting.js

This JavaScript file manages the event bindings and functionality for sorting. It ensures that customers can easily sort products or content according to their preferences.