TABLE OF CONTENTS

Modify the Collection Page



I. General Settings

- Max number of item per row: drag to decide how many products will be shown in each row

- Total items per page: use "up&down" button to limit the number of items on each page

- Paginate style: choose a style for displaying the collection

  • Pages: it will show several pages depending on how many items on the collections, and it will be separated into  many pages including the number of page at the bottom of the collection
  • Infinite loading: you just need to scroll down and it will show gradually all the items on the collections until it ends at the last product

TOOLBAR

- Tick to Show view mode

- Total view list: enter the number to set the options to show the total items eg: 5,10,15,20 (Blank to hide)


FILTER

- Filter type: these two types are created by blocks Products by tags and Products by attributes

  • by Product tags
  • by Product attributes

- Enable 'AND' operator in a group filter: tick the check-box if you want to choose many options in a column

- Fitler style

  • Dropdown
  • Sidebar

SECTION STYLE

- Boxed layout: have a padding around the main wrapper

- Breadcrumb layout:

  • Boxed

  • Wide

- Section margin: set the margin for this whole section following the order: Top Right Bottom Left (Eg: 20px 30px 50px 30px). As always, if you want to set the different section margins for Desktop, Mobile, and Tablet, you just need to add a comma between values. For example, 20px 30px 50px 30px10px 30px 50px 20px20px 40px 30px 40px - MobileTabletDesktop (After a comma, the margin will be set for another device)

Section padding


>>> View the demo clip to see the collection general settings in more details



II. Block Settings

1. Filter by Attributes

Filter by attributes style will be shown like this 


Because this block cannot be modified at the theme editor so we first. need to add the Filter attributes to the Shopify admin. Therefore, I'll show you how to modify the Filter by attribute. 


#1: Make sure the products on your Shopify have theirs Options (Variants)

To check, you first 

  • Login to your Shopify partner to access the Shopify admin 
  • Go to Products section on the menu left column, all of the products will be shown. Just clicking on a specific product you want to check or add Options 
  • At the product editor itself, scrolling down until you see the Options area. Then, tick on the check-box to add Options if the product hasn't have it yet
  • Insert the values for Options
  • Finally, SAVE all of it

#2: Add Filters 

  • Clicking on the Online Stores section that placed under the menu at the left hand
  • A list of menu will show up, you choose the Navigation
  • At the Navigation interface, scrolling down to see the Collection & Search filters 
  • At Filter block, click on Add filter link at the right corner of the block
  • A list of filters occurs, just tick on the options that you want to display on the Filter

>>> Demo clip for more details


2. Menu

Select a menu to display it on the Filter 


3. Filter by Tags

- Filter title: Give the filter group a title 

- Filter options: insert the options for that filter. Separating each value by a comma