How to Create Automated Collection using Shopify Remix App?

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.

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?

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 && (
                       <ul style={{ color: "red" }}>
                           {actionData.errors.map((error, index) => (
                               <li key={index}>{error.message}</li>
                           ))}
                       </ul>
                   )}
               </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.