---
title: "How to Create Automated Collection using Shopify Remix App?"
url: "https://magecomp.com/blog/create-automated-collection-shopify-remix-app/"
date: "2025-04-25T09:07:55+00:00"
modified: "2025-04-25T09:07:56+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "Remix"
  - "Shopify"
word_count: 517
reading_time: "3 min read"
summary: "Shopify provides merchants with two types of collections: manual and automated. While manual collections require you to add products one by one, automated collections use rules to dynamically inclu..."
description: "Learn how to create automated collections in Shopify using the Remix App framework."
keywords: "Remix, Shopify"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Add App Review Field in Shopify Remix App?"
    url: "https://magecomp.com/blog/add-app-review-field-shopify-remix-app/"
  - title: "How to Set Contextual Save Bar instead of Save Button in Shopify Remix App"
    url: "https://magecomp.com/blog/set-contextual-save-bar-instead-of-save-button-in-shopify-remix-app/"
  - title: "Breaking Boundaries: How SKELTA Lets You Buy X Without the Limitations of Y?"
    url: "https://magecomp.com/blog/guide-to-skelta-buy-x-restrict-y/"
---

# How to Create Automated Collection using Shopify Remix App?

_Published: April 25, 2025_  
_Author: Bharat Desai_  

![How to Create Automated Collection using Shopify Remix App](https://magecomp.com/blog/wp-content/uploads/2025/04/How-to-Create-Automated-Collection-using-Shopify-Remix-App-1024x512.webp)

Shopify provides merchants with two types of collections: manual and automated. While manual collections require you to add products one by one, automated collections use rules to dynamically include products.

[![Shopify Development Services](https://magecomp.com/blog/wp-content/uploads/2025/01/Shopify-Development-Services.webp)](https://magecomp.com/services/shopify-development-service/)In this blog post, we will learn how to create an automated collection with the help of the Shopify Remix app.

Also learn – [**How to Create a Collection on Shopify?**](https://magecomp.com/blog/create-collection-shopify/)

## Prerequisites:
Before proceeding, ensure that the user has the necessary permissions and write access scope to create the collection and create products within the Shopify store.

## Steps to Create Automated Collection using Shopify Remix App:
### Step 1: Create a page named collection.jsx
First, we need to create an automated collection:

```
import { json } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
import { Button, TextField, Card, Page } from "@shopify/polaris";
import { authenticate } from "../shopify.server";
import { useState } from "react";

export const loader = async ({ request }) => {
    await authenticate.admin(request);
    return null;
};

export const action = async ({ request }) => {
    const { admin } = await authenticate.admin(request);
    const formData = await request.formData();
    const title = formData.get("title");
    const tag = formData.get("tag");

    try {
        const response = await admin.graphql(
            `#graphql
                mutation collectionCreate($input: CollectionInput!) {
                    collectionCreate(input: $input) {
                        collection {
                            id
                            title
                            ruleSet {
                                rules {
                                    column
                                    condition
                                    relation
                                }
                            }
                        }
                        userErrors {
                            field
                            message
                        }
                    }
                }
            `,
            {
                variables: {
                    input: {
                        title,
                        ruleSet: {
                            appliedDisjunctively: false, // Set to true for OR logic, false for AND
                            rules: [
                                {
                                    column: "TAG",
                                    relation: "EQUALS",
                                    condition: tag,
                                },
                            ],
                        },
                    },
                },
            }
        );

        const data = await response.json();

        if (data.data.collectionCreate.userErrors.length > 0) {
            return json({
                errors: data.data.collectionCreate.userErrors,
            });
        }

        return json({
             success: `Collection "${data.data.collectionCreate.collection.title}"
            created with ID: ${data.data.collectionCreate.collection.id}`,
        });
    } catch (error) {
        return json({ errors: [{ message: error.message }] });
        }
    };

    export default function CreateAutomatedCollection() {
        const actionData = useActionData();
        const [title, setTitle] = useState("");
        const [tag, setTag] = useState("");

        return (
            <Page title="Create Automated Collection">
                <Card>
                    <Form method="post">
                        <TextField
                            label="Collection Title"
                            value={title}
                            onChange={(value) => setTitle(value)}
                            name="title"
                            autoComplete="off"
                        />
                        <TextField
                            label="Product Tag (e.g., summer)"
                            value={tag}
                            onChange={(value) => setTag(value)}
                            name="tag"
                            autoComplete="off"
                        />
                       <Button submit primary>
                           Create Collection
                       </Button>
                   </Form>
                   {actionData?.success && (
                       <p style={{ color: "green" }}>{actionData.success}</p>
                   )}
                   {actionData?.errors && (
                                                  {actionData.errors.map((error, index) => (
                               {error.message}                           ))}
                                          )}
               </Card>
           </Page>
       );
}
```

Using this code, you can create an automated collection by just adding the collection name and product tag.

### Step 2: Check it in the app and create a collection
Now, let’s create a collection from the remix app by adding a collection name and a product tag.

Now check the Shopify collection page that your created collection is displaying or not.

In this case, we have generated an automated collection with product tags “free” and it is also shown in Shopify collections.

## Conclusion:
In conclusion, creating collection from Shopify is very hard and time consuming, instead of it you can use this method and create collections within a minute, this code is having GraphQL so if you are having good knowledge of GraphQL then you can customize it and also make multiple collection at a time and also customize it.

[![Hire Shopify Developers](https://magecomp.com/blog/wp-content/uploads/2024/12/Hire-Shopify-Developers-png.webp)](https://magecomp.com/services/expert-shopify-developers/)


---

_View the original post at: [https://magecomp.com/blog/create-automated-collection-shopify-remix-app/](https://magecomp.com/blog/create-automated-collection-shopify-remix-app/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-07-02 01:09:22 UTC_