Fashionopolism Theme: Collection pages

On this page

Collection pages show groups of products, sometimes referred to as categories. In Shopify a collection would be a category, you can create, edit and organize your collections from the main  Shopify admin by going to Shopify Admin > Products > Collections. Within the theme editor, there are also options on which content is shown on the collections page and the order of that content.

To edit the collection page settings, from the theme editor go to the template picker and choose  Collection pages

Section settings:

  • Products per row:
    Choose how many products will be shown per row, can specify from a minimum of 2 to a maximum of 4 (defaults to 2 on mobile).
  • Rows:
    How many rows of products will be shown per page, can specify from a minimum of 1 to a maximum of 10. Note that Shopify's collection pages will only show a maximum of up to 50 products before pagination will be added to the page 
  • Sort by:
    The Sort By allows customers to sort your products by name, date, price, and best selling. By default, the collection pages will load in the order that you have specified within the collection admin.

Content settings

Collection pages can include an optional sidebar that will contain up to 12 blocks of content.
Choose which content to show and reorder it using the Add Content area

  • Image
    Adds an image with a link 
  • Text
    Add Rich text that can be formatted to show bold or italic with links
  • Menu
    Allows you to choose a menu from the Navigation section of your store admin.
    For help with creating or editing menus see Shopify's  helpful documentation
  • Vendor list
    A vendor list is an automatically generated list of all vendors that appear in your store.
    Note that when clicking on a vendor list, this will not filter just vendors in the current collection but will instead go to a page displaying all products that share the same vendor.
  • Filtering with tags
    You can filter collections by using tags that have been added to your products.
    The Fashionopolism theme allows you to group those tags into specific areas so that you can keep certain filters separated from others. This is especially useful when creating layered navigation for filtering by Size and Color.
    • Sidebar filter
      Add tags to filter your collection pages which will show in the sidebar
    • Dropdown filter
      Add tags to filter your collection pages which will show as dropdowns above products

    For example:
    1. In your main Shopify admin add the tags Red, Black, White, to a selection of your products where those might be applied for filtering the color of the item.
    2. In the theme editor navigate to a Collection page and in the left Section sidebar select Add content and Choose: Tag filter
    3. Add those tags: Red, Black, and White ( comma separated ) within a selected Tag filter block.
    You will see those appear on your collection page which when clicked will filter the view down to products that have the selected tags.

Theme settings

Beyond the Section settings for Collection pages, you also have Theme settings that differ slightly as they apply to content that is shared with other sections of the store.
To access the Theme settings, in the theme editor at the bottom of the left sidebar look for the Theme settings button which will change the left sidebar view.
Scroll down and open the area named:   Products, here you can change how the products and their content are displayed within your collections.

Product grid settings:

  • Product image size
    Let the theme control the size of your images by choosing from the given formats:
    • Natural: Theme shows the images in the ratio that you have uploaded in
    • Square: Product images will show square
    • Landscape: Product images will show in Landscape format
    • Portrait: Product images will show in Portrait format
  • Show product vendor
    Toggles visibility of the vendor for each product
  • Product detail alignment
    Left or Center align product title + price
  • Switch product image on hover
    The second image will be shown when the product is hovered
  • Show alternate product colors
    Show color icons that indicate other color options available for each product
  • Enable quick view
    Toggles a quick shop modal for each product