Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

string

Retrieves a collection with the provided ID.

import { collections } from '@wix/stores';

async function getCollection(id) {
  const response = await collections.getCollection(id);
};

getCollection: Wix-hosted

import { createClient } from '@wix/sdk';
import { collections } from '@wix/stores';
// Import the auth strategy for the relevant access type
// Import the relevant host module if needed

const myWixClient = createClient ({
  modules: { collections },
  // Include the auth strategy and host as relevant
});


async function getCollection(id) {
  const response = await myWixClient.collections.getCollection(id);
};

Self-hosted SDK calls require you to [create a client](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/docs/sdk/articles/work-with-the-sdk/about-the-wix-client).

getCollection: Self-hosted

getCollection

Collection

Retrieves a list of up to 100 collections, given the provided paging, sorting and filtering.
See [Stores Pagination](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/rest/wix-stores/pagination) for more information.


|PROPERTY	|SUPPORTED FILTERS & SORTING	
|:---:|:---:|
|`_id`|[`eq()`](/collections/collections-query-builder/eq),[`ne()`](/collections/collections-query-builder/ne),[`exists()`](/collections/collections-query-builder/exists),[`in()`](/collections/collections-query-builder/in),[`hasSome()`](/collections/collections-query-builder/has-some),[`startsWith()`](/collections/collections-query-builder/starts-with),[`ascending()`](/collections/collections-query-builder/ascending),[`descending()`](/collections/collections-query-builder/descending)|
|`name`|[`eq()`](/collections/collections-query-builder/eq),[`ne()`](/collections/collections-query-builder/ne),[`exists()`](/collections/collections-query-builder/exists),[`in()`](/collections/collections-query-builder/in),[`hasSome()`](/collections/collections-query-builder/has-some),[`startsWith()`](/collections/collections-query-builder/starts-with),[`ascending()`](/collections/collections-query-builder/ascending),[`descending()`](/collections/collections-query-builder/descending)|

import { collections } from '@wix/stores';

async function queryCollections() {
  const { items } = await collections.queryCollections().find();
};

queryCollections: Wix-hosted

import { createClient } from '@wix/sdk';
import { collections } from '@wix/stores';
// Import the auth strategy for the relevant access type
// Import the relevant host module if needed

const myWixClient = createClient ({
  modules: { collections },
  // Include the auth strategy and host as relevant
});


async function queryCollections() {
  const { items } = await myWixClient.collections.queryCollections().find();
};

queryCollections: Self-hosted

queryCollections

CollectionsQueryBuilder

To use the Collections API, install the `@wix/stores` package using npm or Yarn:
  ```console
npm install @wix/stores
```

or

```console
yarn add @wix/stores
```

Then import `{ collections }` from `@wix/stores`:

```js
import { collections } from '@wix/stores'
```
  

CollectionsQueryResult

stores_collections

Collection ID (generated automatically by the catalog).

description

Media items (images, videos etc) associated with this collection. Read only.

media

Media

name

Number of products in the collection. Read only.

numberOfProducts

number

slug

Collection visibility. Only impacts dynamic pages, no impact on static pages. Default: `true`.

visible

boolean

Adds a sort to a query, sorting by the specified properties in ascending order.

The `ascending()` function refines a `CollectionsQueryBuilder` to sort by the value of `propertyName` in ascending order.
You can specify multiple properties for sorting in ascending order by passing each property name as an additional argument. `ascending()` sorts the results in the order the properties are passed.
You can sort the following types:
- Number: Sorts numerically.
- Date: Sorts by date and time.
- String: Sorts lexicographically, so `'abc'` comes after `'XYZ'`.
If a property contains a number stored as a string (for example, `'0'`), that value is sorted alphabetically and not numerically. If a property doesn't have a value, that value is ranked lowest.

ascending

Adds a sort to a query, sorting by the specified properties in descending order.

The `descending()` function refines a `CollectionsQueryBuilder` to sort by the value of `propertyName` in descending order.
You can specify multiple properties for sorting in descending order by passing each property name as an additional argument. `descending()` sorts the results in the order the properties are passed.
You can sort the following types:
- Number: Sorts numerically.
- Date: Sorts by date and time.
- String: Sorts lexicographically, so `'abc'` comes after `'XYZ'`.
If a property contains a number stored as a string (for example, `'0'`), that value is sorted alphabetically and not numerically. If a property doesn't have a value, that value is ranked lowest.

descending

Refines a query to match items where the specified property equals the specified value.

The `eq()` function refines a `CollectionsQueryBuilder` to match only items where the value of the specified `propertyName` equals the specified `value`.
`eq()` matches only values of the same type. For example, `0` stored as a number doesn't match `'0'` stored as a string.
Matching strings with `eq()` is case-sensitive, so `'text'` isn't equal to `'Text'`.

Refines a query to match items where the specified property contains a value.

The `exists()` function refines a `CollectionsQueryBuilder` to only match items where the value of the specified `propertyName` doesn't equal null or undefined.
 `exists()` checks for either existence or non-existence based on the boolen parameter. Note that `exists()` does match items where the value of the specified `propertyName` is an empty string or an invalid value. `exists()` is only useful for properties which don't contain default values and therefore their values may be unassigned.

exists

Returns the query results.

The `find()` function returns a Promise that resolves to the query results and metadata.
The Promise is rejected if `find()` is called with insufficient permissions or if any of the previous functions used to refine the query are invalid.

find

Refines a query to match items whose specified property contains any of the specified values.

The `hasSome()` function refines a `CollectionsQueryBuilder` to match only items where the value of the specified `propertyName` equals any of the specified `values`.
Matching strings with `hasSome()` is case-sensitive, so `'text'` isn't equal to `'Text'`.
If the specified property is an array, `hasSome()` matches if any of that array's elements equal any of the specified values.

hasSome

Refines a query to only match items where the specified property conatins any of the values in the provided array of values.

The `in()` function refines a `CollectionsQueryBuilder` to match only items where the specified `propertyName` is equal to any of the values in the provided array.
Matching strings with `in()` is case-sensitive, so `'text'` isn't equal to `'Text'`.

Limits the number of items the query returns.

The `limit()` function defines the number of results a query returns in each page. Only one page of results is retrieved at a time.
You can use the `next()` and `prev()` functions to navigate the pages of a query result.

limit

Refines a query to match items where the specified property doesn't equal the specified value.

The `ne()` function refines a `CollectionsQueryBuilder` to match only items where the value of the specified `propertyName` doesn't equal the specified `value`.
`ne()` matches only values of the same type. For example, `0` stored as a number doesn't match `'0'` stored as a string.
Matching strings with `ne()` is case-sensitive, so `'text'` isn't equal to `'Text'`.

Sets the number of items to skip before returning query results.

The `skip()` function defines the number of results to skip before returning new query results.
For example, if you query a collection and 50 items match your query, but you set `skip()` to `10`, the first 10 items that match are ignored, and the 11th through 50th items are returned.

skip

Refines a query to match items where the specified property starts with the specified value.

The `startsWith()` function refines a `CollectionsQueryBuilder` to match only items where the value of the specified `propertyName` starts with the specified `string`.
Matching with `startsWith()` is case-sensitive, so `'TEXT'` doesn't start with `'text'`.
You can only use `startsWith()` with a property whose value is a string.

startsWith

Indicates whether the query has more results.

You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.

hasNext

Indicates whether the query has previous results.

You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.

hasPrev

Retrieves the next page of query results.

The `next()` function retrieves the next page of query results.
The page size is defined by the [`limit()`](/collections/collections-query-builder/limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.
If items are added or removed between calls to `next()`, the values returned by `CollectionsQueryBuilder` may change.

Retrieves the previous page of query results.

The `prev()` function retrieves the previous page of query results.
The page size is defined by the [`limit()`](/collections/collections-query-builder/limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.
If items are added or removed between calls to `prev()`, the values returned may change.

Returns the index of the current page of results.

`currentPage` is a zero-based index of the current page of results, meaning the 1st page is `0`, the 2nd page is `1`, and so on.
If no results match the query, `currentPage` is undefined.
The page size is defined by the [`limit()`](/collections/collections-query-builder/limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.

currentPage

Returns an array of `collections` items that match the query.

`items` contains the current page of results retrieved by the query.
If no results match the query, `items` is an empty array.
The page size is defined by the [`limit()`](/collections/collections-query-builder/limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.

items

Returns the number of items in the current page of results.

`length` returns just the number of items in the current page, not the total number of items that match the query. For the total number of items that match the query, see [`totalCount`](#totalcount).
The page size is defined by the [`limit()`](/collections/collections-query-builder/limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.

length

Returns the requested page size.

`pageSize` returns the page size set in [`limit()`](/collections/collections-query-builder/limit) in `CollectionsQueryBuilder`.

pageSize

Returns the `CollectionsQueryBuilder` object used to get the current results.

Use `query` to create and run a new query by chaining additional `CollectionsQueryBuilder` functions to it. You can filter only on properties that haven't already been used in the previous `CollectionsQueryBuilder`.

query

Returns the total number of items that match the query.

`totalCount` returns the total number of items that match the query, not just the number of items in the current page. For the number of items in the current page, see [`length`](#length).

totalCount

Returns the total number of pages the query produced.

The page size is defined by the [`limit()`](/collections/collections-query-builder/limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `collections` to navigate the pages of a query result.

totalPages

GetCollectionBySlugResponse

collection

Media (images, videos etc) associated with this product.

Primary media (image, video etc) associated with this product.

mainMedia

MediaItem

image

video

Media ID (for example, `"nsplsh_306d666a123a4a74306459~mv2_d_4517_2992_s_4_2.jpg"`).

mediaType

MediaItemType

thumbnail

MediaItemUrlAndSize

title

Alt text. This text will be shown in case the image is not available.

altText

format

height

width

MediaItemVideo

Data (URL, size) about each resolution for which this video is available.

files

ID of an image taken from the video. Used primarily for Wix Search indexing. For example, `"nsplsh_306d666a123a4a74306459~mv2_d_4517_2992_s_4_2.jpg"`.

セットアップ