Collections

Each page has its own default sections and settings. By default, collection pages have a Collection banner and a Product grid section.


⬇️ On this page:

  1. Navigate to the collections page
  2. Customize the collection banner
  3. Change collection banner background
  4. Customize the product grid

Navigate to the collections page


Steps to open up the collection template:

  1. In your Shopify admin dashboard, go to Online Store > Themes.
  2. Find Elevated and click on the Customize button.
  3. Click on the arrow down next to Home page↓and select Collections > Default collection.
  4. Click on Correction banner which is a section specific to the collection page. We will cover customization options for this section later in this article.
  5. Click on Product grid which is a section specific to the collection page. We will cover customization options for this section later in this article.

Shopify's resources:

  1. Collection pages ↗

Customize the collection banner


Once you have opened the template following the steps above, you can now configure your Collection banner section template.

Collection banner customization controls:

  1. Show collection title - Displays the title of the collection.
  2. Show product count - If checked, the number of products within each collection will be displayed in the title.
  3. Show collection description - If checked, displays the description of the collection.
  4. Show collection image - If checked, displays the image of the collection.
  5. Desktop image height - Changes the collection image height. Available options are Small, Medium, Large, or Original.
  6. Image focal point - You can set a focal point to ensure that a key part of an image won't get cropped. Choose Left, Middle, or Right Image focal point.
  7. Content position - Choose where, relative to the image, you want to display your content block with collection title and description. Available options include Top left, Middle Right, Bottom Left, etc.
  8. Text alignment - Set the alignment of the text within the content block for desktop computers. Choose between right, left, or center.
  9. Choose the size under Heading size. Choose between small, medium, large, or extra large.
  10. Color scheme - It controls the background color of your content block, the text color, etc. Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one in Theme settings.
  11. Enable Gradient - If marked, this will bring the text to the bottom and add a gradient to the image.
  12. Click + Add Collection banner to add

Change collection banner background

By default, the collection image (which can be uploaded on the collection page) will be displayed as the collection banner background. You can change the background for each collection by following the steps below.

To change the collection background:

  1. Click + Add Collection banner under Collection banner section.
  2. Click Select collection and choose the collection you want to change the banner background for.
  3. Under Image, click Select image or Explore free images if you want to choose an image from Shopify's library. You can always click Change > Remove image to go back to the version without a background image.
  4. (Optional) Upload an image for mobile screens.
  5. Choose Desktop image hight between small, medium, large, original.

Repeat the steps above to change a banner background for another collection.



Customize the product grid


Steps to customize product grid:

  1. Enable breadcrumbs - If checked, it will show a breadcrumb trail which offers navigational cues that help users understand their current location on a website.

For example, the users will see the trail such as this one: Home / Fall Collection / Floral dress

  1. Products per page - The number of products that you want to display on each page. Can be any from 2 to 48.
  2. Number of columns on desktop - Use the range scale to select the number of columns that display on desktop computers. Minimum is 2, maximum is 4.
  3. Number of columns on mobile - Select whether you want to show 1 or 2 columns on mobile screen.

Product card

  1. Layout - There are two options:
    • Product info floating - Product information will be displayed directly on the product image.
    • Product info stacked - Product information will be displayed under the product image.

Filtering and sorting

  1. Enable filtering - Click to activate filtering of search results.
  2. Desktop filter layout - Choose between a horizontal (default), vertical, or drawer layout.
  3. Enable sorting - Click to activate sorting of search results.
  4. Enable toolbar border - Click to show border around toolbox such as Filter, Sort, View.

Grid layout

  1. Grid Layout - When checked, the customer will have additional grid views to choose from, including two, three, four, and eight card views.

Size guide

  1. Size guide option - Choose between a page link or a modal popup. Make sure the Enable size guide box is checked.
  2. If you chose Page link in step 10, click Select page under Size guide page to link the size guide page.

Pagination options

  1. Pagination options - Choose between Default, Load more button, or Infinite scroll.

Section padding

Add spacing to the top or bottom of the search results. Use the range slider to add between 0px and 100px of space above or below the search results.



Still need help? Contact Us Contact Us

Related Articles