Collection page
Collection page
Collection page
Product filters are features used to refine and narrow down search results or product listings based on specific criteria such as price, color, size, or category. They enhance the shopping experience by allowing customers to quickly find the products that match their preferences or requirements. At the theme level, you cannot directly add filters to your store. Instead, you'll need to utilize apps like Shopify Search & Discovery. These apps offer advanced filtering capabilities and integration with your Shopify store. For detailed instructions on how to set up and customize filters, you can refer to the Shopify guide here. Once configured through such apps, the theme's role is to display these filters on your storefront, typically on collection and search results pages, enabling customers to easily navigate through available options. The product grid section is set to display 15 products per page in a five-column layout on the desktop. It has the product filtering and product sorting options enabled. You can also enable sticky filters bar on desktop. When this setting is enabled, the filters bar will remain fixed to the top of the viewport as your customers scroll on desktop devices.
Collection page
The section has both the Show featured image of collection and Show collection title options checked. In order for all the necessary information to show up you will need to set a Title, a Description and a Collection image for each of your Collections. You can do that from the Collections menu under Products in your Shopify Admin. Section settings Image Show featured image of collection Used to show collection image Image opacity Set the opacity of image Image width Choose option for image width ( Boxed width/ Full width) Collection title Show collection title Used to show collection title Position Adjust the position of collection title Size Adjust collection title size Color Change color collection title Description Show description Used to show description of collection Content alignment Change the alignment of description Layout ( Desktop/Mobile) Image height Select height option:*Use image of the first slide*Fixed height *Full screen Fixed height Adjust image height for each device: *Desktop : 300px - 800px*Mobile : 200px - 500px Padding ( Top/Bottom) Adjust the padding on top of the section (range from 0 to 100 px).
Collection page
1. What is a collection banner? A collection banner is a key visual and informational component on a collection page, primarily used to highlight and present various content such as featured images and breadcrumbs. It serves both aesthetic and functional purposes, enhancing user engagement and guiding users through the collection. 2. How to show a collection banner on a collection page? To show a collection banner on a collection page and configure its settings, follow these steps: Look for the option labeled "Show collection image" and tick the checkbox to display the collection image on the banner. Adjust the height of the collection image on desktop devices. Set the overlay opacity of the image. The higher the value, the clearer the overlay on the image. Adjust the height of the collection image for mobile devices. Set the padding on top & bottom of the banner. This can range from 0 to 100 px. If you need to add a specific title to the collection banner, you will need to follow these settings: Decide whether to display the collection title. Adjust the position of the collection title. Adjust the size of the collection title. This can range from 50% to 200% of the default size. 3. How to show breadcrumbs in the collection page? Breadcrumbs are a navigational aid used in websites and applications to help users understand their location within the site's hierarchy and to easily navigate back to previous sections. To show breadcrumbs on a collection page and configure their settings, follow these steps: Select "Breadcrumbs" from the list of available blocks. Tick “Show breadcrumb borders” or “Make breadcrumbs full width on desktop” if needed Adjust the alignment of the breadcrumbs on desktop/mobile devices. Choose the color of background/text/text link for light/dark mode for the breadcrumbs. 4. How to show a collection description on a collection page? To show the collection description on a collection page and configure its settings, follow these steps: Add a block and select "Description". Adjust the alignment of the content on desktop/mobile devices. Adjust the style settings (like background color, text color, and padding) to match your website's design. Adjust the padding on top/bottom of the block If the collection description is long, use the "Show Read More" button feature. The "Read More" button helps manage long descriptions, keeping the page clean and user-friendly. Specify how many lines are shown by default. Customize the label of the button.
Collection page
1. What is a product filter? Product filters are features used to refine and narrow down search results or product listings based on specific criteria such as price, color, size, or category. They enhance the shopping experience by allowing customers to quickly find the products that match their preferences or requirements. At the theme level, you cannot directly add filters to your store. Instead, you'll need to utilize apps like Shopify Search & Discovery. These apps offer advanced filtering capabilities and integration with your Shopify store. For detailed instructions on how to set up and customize filters, you can refer to the Shopify guide here. Once configured through such apps, the theme's role is to display these filters on your storefront, typically on collection and search results pages, enabling customers to easily navigate through available options. In the collection page: In the search page: 2. How to create filters for collection/search results pages? To create filters for your collection and search results pages, you'll need to rely on apps like Shopify Search & Discovery. Each app may have its own documentation and instructions for adding filters, so it's essential to refer to the specific documentation provided by the app you're using. You can find detailed instructions in the documentation provided by the Shopify app you've installed. For more information, you can refer to the Shopify documentation here: Shopify Search & Discovery Filters Documentation. 3. How to customize the filters in the storefront? To customize the filters in the storefront, the Eurus theme has these settings: Enable the filters and customize the filters. Configure the layout, including options for sticky filters. Choose desktop filter layout: Drawer, Aside, Above Set up pagination for navigating through the filtered results: Offer options for customers to select the layout of products on desktop and mobile separately; Pagination type Customize the information shown on the product cards like vendor, Quick view button.. Adjust padding and styling to ensure the filters blend seamlessly with your storefront's design. By configuring these settings, you can tailor the filters to suit your preferences and optimize the browsing experience for your customers.
