Skip to content
Elooo SystemHelp Center Go to website

Online store

How to create product collections and show them in your store

Create the collection in Payments › Products › Collections (name, image, SEO title and description, handle). Then, in the store builder, add the Collections List element, click each card and pick the real collection to display. Save and publish.

Updated on

Before you start

  • You need access to Payments and Sites in your account.
  • The store must already exist, with products created and Include in Online Store turned on.
  • Have an image for each collection if you want to show images instead of text only.
Where to find it

Payments › Products › Collections · then, in the store builder, Add element › Store › Collections List

Step by step

Create or edit the collection

  1. Open Payments › Products and click Collections.
  2. Create a new collection or open an existing one.
  3. Fill in the name and, optionally, upload an image.
  4. Fill in the SEO title, SEO description and handle (the last part of the collection's URL).
  5. Save and add products to the collection.

Show collections on a store page

  1. Open the store in the page builder and go to the page where you want the list (for example, the home page).
  2. Click Add element and, under the Store category, drag Collections List onto the page.
  3. The element shows 3 placeholder collections. Click the element to open its settings on the right.
  4. Under the Collections group, click each card and pick the real collection. You can also double-click a card on the canvas: if it has no collection yet, the selection panel opens; if it does, the collection is highlighted.
  5. Under Text, enter the section heading, or leave it empty to show no heading.
  6. On the Layout tab, set the number of columns for desktop (up to 5) and mobile (up to 2). The default is 3.
  7. Adjust margins, colors, borders and fonts like any other element.
  8. Click Save, then Publish.

Tips

  • If the collection has an image, the card shows it; if not, the card shows the name centered on a background.
  • The collection's image and SEO details are used on the product list page when a customer filters by that collection.
  • The order of collections in the element stays the same even when you add or remove cards.

Common problems

  • The live site shows placeholder collections → The cards aren't linked to real collections yet. Click each one and pick a collection; placeholders do nothing on a live site.
  • The card doesn't show an image → The collection has no image uploaded. Open it in Payments › Products › Collections and add one.
  • Changes don't show on the site → It hasn't been published. Click Save and Publish in the builder.
  • I can't set more than 5 columns → That's the maximum on desktop (2 on mobile).

Was this helpful?