If you follow our design-first approach, you can skip this section. Instead, you can directly create a block and connect it to a storage later on.

Frontstack uses an intermediate storage layer to hold data between external sources and your frontend. You can manage your storages from the Data Storages section of your dashboard.

Storages organize data in a normalized structure, making it a reliable source for your custom Blocks. They are populated with data from connected feeds using the Ingest feature.

Think of storages as a database, but instead of querying them directly, you build views on top.

Define storages

You can create a new Storage by clicking the New Data Storage button in the Data Storages section of your dashboard.

Create a new storage

Start by defining a name and selecting a schema type. The type specifies specific features that are available for the storage.

TypeDescription
ProductsDesigned for storing product data, including structures like variants and prices.
ContentUsed for storing all other types of data.

After you save, the storage will be empty and show up in the list of storages.

Open the storage to have a look at the available fields. By default, all storage schemas will have at least two fields:

  • key - a unique identifier for the record
  • active - a boolean field to enable or disable a record

Products storages will have two additional variant level fields:

  • options - a field to store a list of options that define the variant
  • price - a field to store the price of the variant

These fields are automatically added to all storages and cannot be edited or removed.

Add fields

Add additional fields to a storage by clicking the Add Field button.

You can select from a variety of field types, each with its own properties and capabilities. Refer to the Storage Field Types Reference for an overview of the available field types.

Additionally, for each field you can configure the following:

  • Name - the internal name of the field
  • Description - a description of the field that will make it easier for others to understand the purpose of the field
  • Array - whether the field is an array. Array fields can contain multiple values of the same type.
  • Translatable - whether the field is translatable. Translatable fields can have different values for each language.
  • Scoped - whether the field is restricted to a specific scope. Scoped fields can only be used in certain contexts.

For product storages, you can also configure the following:

  • Shared Across Variants - whether the field is shared across variants. Shared fields will have the same value for all variants of a product.

Option Fields

If you’re using the built-in Option composite type, that field will always be an array field. We’re using that structure to create dynamic filters for all options, if you choose this field in a listing.

Populate a storage

You’ve come a “where ends meet” section of the documentation. We recommend you to first read the Ingest section to understand how to create integrations and data feeds.

Here we will only cover how to connect a data feed to a storage.

Initially, the storage will be empty. You can populate it by connecting a Data Feed to the storage. A data feed is a configuration that defines how to fetch data from an external source and how to map it to the storage fields.

Connect a data feed

Click Connect on the right side of your storage view to start the process of connecting a data feed.

Connect a data feed

The feed wizard will guide you through the process of creating a data feed.

You can select from a list of data sources. The available data sources depend on the integrations you have enabled in your project. After selecting a data source, you can select which data feed to connect to the storage.

Configure the data feed

In the next step, the wizard will ask you to map scopes provided by the integration to your project’s scopes. That involves defining the locale mapping for every scope in your project. Click Save to save the data feed configuration.

Configure the storage mapping

In the final step, you will map the data feed fields to the storage fields. Select the data feed that you just saved and go to the Merge tab to see the fields that you can map.

You are presented with two columns - Storage Fields and Map To Value.

Storage mapping in Data Sync > Merge

In the second column you can define how the data is mapped to the storage fields. Click the wand icon to open the field mapping modal. Click into the field to see a list of available data feed fields and select the one you want to map to. Ultimately, click Apply changes to persist the mapping configuration.

Now, head to the Data Storages section of your dashboard and click the storage that you created earlier. You will see a list of items that are populated from the data feed.