Store Creator

Note: This feature is currently a proof of concept and will evolve over time. We appreciate any feedback you may have.

Introduction

With Store Creator, you can quickly assemble a fine-tuned Sylius store without tedious manual steps. Imagine you need a store that sells office furniture, complete with a CMS, refund functionality, and invoicing. Normally, you would have to:

1. Create a new Sylius-Standard project

2. Install each plugin one by one

3. Prepare and load fixtures (e.g., products, images)

4. Adjust the visual style of the storefront

Our goal is to deliver a comprehensive web application (see “Future Plans” below) where you:

1. Select the plugins you need

2. Use AI assistance to craft custom fixtures and tweak the layout

3. Choose your preferred deployment target

To have better understanding take a loot at the architecture of tooling we proposed:

DemoCreator is currently under development. However, you can try it out using the prepared Store configuration available in the Store Presets Repository.

What is a Store Preset?

A store preset defines everything you need to bootstrap a finely tuned Sylius store.

• store-preset.json: a JSON configuration file that lists

  • The store’s internal name

  • Which plugins to install

  • Theme variables (colors, logos)

  • Which fixtures to load

• fixtures: a directory containing your YAML fixture definitions and any images you need to import (e.g., product photos)

• themes: a folder with your custom theme assets (e.g., logo images)

The directory structure for a single store preset might look like this:

store-preset
├── fixtures
│   ├── fixtures.yaml
│   └── images
│       ├── product_01.jpeg
│       └── product_02.jpeg
├── store-preset.json
└── themes
    └── shop
        ├── banner.png
        └── logo.png

Example store-preset.json

{
    "name": "car_parts",
    "plugins": {
        "sylius/cms-plugin": "^1.0"
    },
    "themes": {
        "shop": {
            "cssVariables": {
                "--bs-btn-bg": "#5d182f",
                "--bs-btn-hover-bg": "#4a1327",
                "--bs-body-bg": "#f9f5f5",
                "--bs-text-color": "#3f0d12",
                "--bs-link-color": "#5d182f",
                "--bs-link-hover-color": "#4a1327",
                "--bs-link-color-rgb": "93, 24, 47",
                "--bs-link-hover-color-rgb": "74, 19, 39",
                "--bs-primary": "#5d182f",
                "--bs-primary-rgb": "93, 24, 47",
                "--bs-bg-opacity": "1"
            },
            "logo": "logo.png",
            "banner": "banner.png"
        }
    },
    "fixtures": {
        "suite": "car_parts"
    }
}

For more details, check the repositories:

https://github.com/Sylius/StoreAssembler

https://github.com/Sylius/StorePreset

How to apply a Store Preset Locally

1. Create Sylius-Standard project:

   composer create-project sylius/sylius-standard my_store
   cd my_store

2. Add Store Assembler package:

   composer require sylius/store-assembler

3. Copy your store-preset directory into the root of the project. For example, if your preset is called car_parts, you should have the following structure:

   my-store/
   ├── bin/
   ├── config/
   ├── src/
   ├── store-preset/
   │   └── car_parts/
   │       ├── fixtures/
   │       ├── store-preset.json
   │       └── themes/
   └── ... (other Sylius files)

4. Run the following command:

   vendor/bin/store-assembler

How to deploy a Store with the Store Preset to Platform.sh

1. Clone DemoCreator and install its dependencies:

   git clone https://github.com/Sylius/DemoCreator.git demo-creator
   cd demo-creator
   yarn install
   composer install

2. Configure Platform.sh credentials

   • Create a platform.sh project and environment (e.g., “booster-<random>”).

   • In your .env.local (inside demo-creator), set:

     PLATFORM_PROJECT_ID=<your Platform.sh project ID>

3. Prepare a Store Preset Place your store preset directory under store-templates/template-name inside the DemoCreator project. For example:

   demo-creator/
   └── store-templates/
       └── jutrzenka/
           ├── fixtures/
           ├── store-preset.json
           └── themes/
   

4. Call the DemoCreator API to create a new store Send a POST request to the /create-demo endpoint (you can use curl or Postman). For example:

   POST http://localhost:3000/create-demo
   Content-Type: application/json
   
   {
     "environment": "booster",
     "store": "jutrzenka"
   }
   

• environment: the name of the Platform.sh environment you want to update (e.g., booster).

• store: the name of your preset (must match the folder under store-templates/).

Internally, DemoCreator will:

1. Clone the Sylius-Standard “booster” branch into a fresh folder

2. Copy your store-templates/jutrzenka folder into sylius/jutrzenka/store-preset/

3. Commit those files and push to the specified Platform.sh environment

4. Trigger Platform.sh build hooks (which run the same console commands as above: plugin install, fixture import, theme prepare, etc.)

• Wait for the Platform.sh build to finish Once the build completes, your environment’s URL (e.g., https://booster-<project>.platform.sh) will serve the newly created store with all plugins, fixtures, and themes applied.

Future Plans

We plan to evolve DemoCreator into a full-fledged “wizard” application. Imagine a guided interface where you can:

• Select Plugins: Easily browse and choose from a catalog of Sylius plugins, toggling features on or off with a click.

• AI-Powered Fixture Designer: Use GPT behind the scenes to generate YAML fixtures (products, categories, pages) based on simple prompts—no manual editing required.

• Live Theme Preview: Adjust colors, logos, and CSS variables in real time and immediately see how your store’s design will look in a built‐in preview window.

Together, these features will let you configure plugins, craft sample data, and tweak the storefront’s appearance—all within a single intuitive wizard interface.

Feedback Welcome

Your feedback is invaluable as we continue refining DemoCreator. If you encounter any issues or have suggestions:

1. Slack Community Join our Slack workspace first—share your thoughts, ask questions, and discuss ideas with the team and other users in real time.

2. GitHub Repository If you prefer, you can also submit feature requests or bug reports by opening an issue on the DemoCreator repository.

We appreciate your input and look forward to making DemoCreator better together!