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.
- 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.
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.
What are Sections?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This liquid file represents the breadcrumb active filters component. It displays active filter selections, helping users understand their current filtering choices.
This liquid file renders checkboxes for filters. It is a crucial element for users to select filter options on your site.
This liquid file is responsible for rendering color filter value components. It plays a significant role in displaying and selecting color filter options.
This liquid file represents the structure of color filter items. It controls how color filter options are presented on your site.
This liquid file defines the structure for filter items. It allows you to create the layout and presentation of filter options.
This liquid file represents the structure for nested filter items. It is used when you have hierarchical filter options that need a specific layout.
This liquid file is responsible for rendering a range filter slider component. It allows users to set a range for filtering products or content.
This liquid file defines the structure of range filter options. It controls how range filter options are presented on your site.
This liquid file is used for rendering rating filter components. It enables users to filter products or content based on ratings.
This liquid file represents the filter layout component rendered within search and collection sections. It allows users to input specific search criteria.
This liquid file defines the structure for text filter value components. It enables users to filter products or content based on specific text criteria.
This liquid file represents the structure of text filter items. It controls how text filter options are presented on your site.
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.
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.
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.
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.
This liquid file renders a loader feedback component in SVG format. It provides visual feedback to users, indicating that a process is in progress.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Updated about 1 month ago