Building in Replo

Data Collections

Data Collections are a lightweight way to manage structured content, built into Replo. If you've ever used a Content Management System (CMS) like Contentful, Strapi, or Sanity before, you'll be familiar with Data Collections.

You can thing of Data Collections as a kind of spreadsheet - every item in the collection is a row, and each column has a type. Replo lets you create and edit these collections without needing a third-party CMS.

Creating and Editing a Data Collection

To create a data collection, use the "CMS" button in the header.

Clicking this button, you'll have a view of all your data collections. Clicking "Edit" on a collection will allow you to add more rows.

To create a Data Collection:

  1. Click the "CMS" button in the editor header.
  2. Click "Create Collection"
  3. Give your collection a name. You can also specify specific names for singular and plural names of the collection.
  4. Click "Add a Field" to add your first field that every row in the collection will have.
  5. Add a name for the field, and select the type of the field (for example, if each row should have a product, select Shopify Product here from the dropdown).
  6. Click the "Add" button in the lower right to add the field
  7. Click the "Save" button in the lower right to save the Data Collection.

To add a row to a Data Collection:

  1. Select an existing Data Collection, or create a new one.
  2. Click the "New" button in the upper right to create a new row.
  3. In the row, use the built-in controls to edit the content of each cell of the row.

Types of Data Collection Fields

There are many different types of fields that can be added to a Data Collection:

  • Shopify Product: each cell will be a product which is pulled automatically from your Shopify Store.
  • Text: each cell will be fully editable rich text content.
  • Color: each cell will be a specific color
  • Image: each cell will be an image, either from your Shopify Store or from a url
  • Image List: each cell will be a list of images (for example, to use in a carousel)

Using a Data Collection

To use a data collection, you'll need to use one of the components that shows one piece of data out of a collection of many rows. Carousel is a great example.

  1. Add a Carousel to the page.
  2. In the right side of the editor, scroll down to "Carousel Items" and click "Select Data Collection"
  3. Select the Data Collection you want to use as items in the Carousel.
  4. All components inside the Carousel Panels now have access to the Data Collection row as part of Dynamic Data
Drag and Drop