Electro How to Create Electro Collection Page
Theme: Electro · Section type: Collection template
The Collection template controls every collection page in your store. It shows a banner with the collection title, followed by the products in the collection with filters, sorting, product comparison, and quick buy.
Note: The Collection template has 2 fixed sections: Collection header and Collection products. You can hide them, but you can't remove them. You can add, remove, and reorder any other section on this template.
What you can do
- Open the Collection template
- Show the collection image and description in the header
- Set up the product grid
- Let customers filter and sort products
- Let customers compare products and buy from the card
- See what customers see
- Change the Collection header and Collection products settings
- Fix common problems
Open the Collection template
- In the theme editor, open the page selector at the top of the screen.
- Click Collections and choose a collection to preview.
- To preview a different collection, click Change in the left sidebar and select the collection.
Tip: Changes to the template apply to every collection that uses it. To give one collection a different layout, create a new collection template and assign it to that collection in the Shopify admin.
Show the collection image and description in the header
The Collection header uses the collection title as the page heading. The image and description come from the collection itself, in Products > Collections in the Shopify admin.
- In the left sidebar, click Collection header.
- Under General, check Show collection image to use the collection image as a background banner.
- Check Show collection description to show the description under the title.
- Choose a Heading size for the collection title.
- Under Collection image layout, choose the Image height on large screen and Content position on large screen. Set the mobile options too.
- Click Save.
Tip: Light text on a busy photo can be hard to read. Raise Overlay opacity, or set a Custom mask overlay color, until the title stands out.
Set up the product grid
- In the left sidebar, click Collection products.
- Under General, set Items per page. Pagination appears when a collection has more products than this.
- Under Product layout, choose a Default layout: Grid or List.
- Set Items per row on large screen and Items per row on mobile. These apply to the Grid layout only.
- Optional: check Enable grid/list layout switcher so customers can change the layout themselves.
- Click Save.
Tip: The List layout gives each product a full-width row with more room for attributes. It suits products with detailed specifications. The Grid layout suits products that sell on their looks.
Let customers filter and sort products
- In the Collection products section, under Filter and sort, check Enable product filter and Enable sort.
- Choose a Filter and sort layout on large screen: Sidebar, Topbar, or Drawer.
- Optional: check Expand all filters by default to open every filter group when customers see the filters.
- Click Save.
The filters themselves (for example Availability, Price, Color, or Brand) come from the Search & Discovery app in the Shopify admin. Add, remove, or reorder them there.
Let customers compare products and buy from the card
- In the Collection products section, under Product comparison, check Enable comparison. Each product card gets an Add to compare button.
- Choose how Quick buy works on the product cards: Don't use, Standard (variant picker), or Bulk order (all variants).
- Click Save.
Note: Customers can compare up to 3 products from a collection at a time. To set up which details appear in the comparison, see "How to use Electro Product Comparison".
What customers see
- Collection banner: the collection title, with the description and the collection image as a background when they're turned on.
- Filters: a Filter button that opens a drawer, filter dropdowns above the products, or a sidebar beside them, depending on the layout you choose. The product count and the sort menu sit above the products.
- Layout switcher: customers click the grid or list icon to change how products are shown.
- Compare: customers click Add to compare on up to 3 products. A Compare button shows how many are selected (for example 2/3). It opens a Product comparison panel where customers can remove products, click Clear all, or click Compare to see the products side by side. If they try to add a 4th product, a message tells them the limit is 3.
- Quick buy: with Standard, the Quick Buy button opens a popup where customers pick a variant and add it to the cart. With Bulk order, the popup lists all variants so customers can order several at once.
- Mobile: products show 1 or 2 per row, based on Items per row on mobile.
Settings reference
Collection header: General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the header. Edit schemes in Theme settings > Colors. |
Overlay opacity | Darkens the collection image so the text is easier to read, from 0 % to 90 %. |
Custom mask overlay | Sets a custom color for the overlay on the collection image. Applies when the collection image is shown. |
Custom text overlay | Sets a custom color for the title and description on the collection image. Applies when the collection image is shown. |
Heading size | Sets the size of the collection title: Headline, H1, H2, or H3. |
Show collection image | Shows the collection image as the header background. |
Show collection description | Shows the collection description under the title. |
Collection header: Collection image layout
Setting | What it does |
|---|---|
Image height on large screen | Sets the header height on large screens: Adapt to content, 50% screen height, 70% screen height, Fill screen height, or Adapt to image. The section grows if the content doesn't fit. |
Content position on large screen | Places the title and description at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
Image height on mobile | Sets the header height on mobile, with the same options as large screens. |
Content position on mobile | Places the title and description on mobile, with the same options as large screens. |
Collection products: General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the product area. |
Show collection title | Shows the collection title above the products. |
Items per page | Sets how many products show on each page, from 8 to 24 in steps of 4. |
Collection products: Product layout
Setting | What it does |
|---|---|
Default layout | Shows products as a Grid or a List when the page opens. |
Enable grid/list layout switcher | Adds buttons that let customers switch between Grid and List. |
Items per row on large screen | Shows 3, 4, 5, or 6 products per row. Applies to the Grid layout only. |
Items per row on mobile | Shows 1 or 2 products per row. Applies to the Grid layout only. |
Collection products: Filter and sort
Setting | What it does |
|---|---|
Enable product filter | Shows the filters. Set up the filters in the Search & Discovery app. |
Enable sort | Shows the sort menu. |
Filter and sort layout on large screen | Shows the filters in a Sidebar, a Topbar above the products, or a Drawer that opens from a Filter button. |
Expand all filters by default | Opens every filter group instead of showing them collapsed. |
Collection products: Product comparison
Setting | What it does |
|---|---|
Enable comparison | Adds an Add to compare button to each product card so customers can compare products in this collection. |
Quick buy | Sets how customers add products straight from the card: Don't use, Standard (variant picker), or Bulk order (all variants). |
Troubleshooting
The collection image doesn't show in the header.
Check that Show collection image is on, and that the collection has an image in Products > Collections in the Shopify admin.
The filters don't appear, or a filter is missing.
Check that Enable product filter is on. The list of filters comes from the Search & Discovery app, so add the missing filter there.
Changing Items per row has no effect.
Items per row applies to the Grid layout only. If the page opens in List, change Default layout to Grid or switch the layout on the storefront.
Customers can't add a 4th product to compare.
The collection comparison holds up to 3 products. Customers can remove a product in the Product comparison panel to add another.
Related articles
- Electro Theme Settings
- How to use Electro Product Comparison
- Electro How to Create Electro Collection List Page
- Electro How to Use Electro Collection List
- Electro Template
Updated on: 30/10/2026
Thank you!