Set up a new product in the Product Designer

Christian Kilb
47 steps
4 minutes

Cilb

Photopea

Navigate to the product page of the product you like to enable the designer for. Then, copy the product number to your clipboard.

Open the product designer in the admin panel.

Click "Configurations"

Click the copy icon of one of your existing configurations.

Click the eye icon of the new, copied configuration.

Update the name and label of your configuration.

Delete all existing article numbers assigned to the configuration.

Add the product number from the clipboard to the input field.

Click "Add"

Click "Save configuration"

Double-check that the product designer got enabled for your product.

In the admin panel click the eye icon for your new configuration to open it.

Remove the existing value in "URL of Article image which will be placed behind the canvas" field.

In a new tab, open the media manager of Shopware.

Click "Upload file" and upload the boilerplate image of your product.

Select the newly uploaded image.

Click "Copy link"

Go back to the previous tab and paste the URL from your clipboart to the "URL of Article image which will be placed behind the canvas" field.

Click "Save configuration"

In your Frontend, click "Create design" and double-check that the background image was replaced. It may look odd and wrongly positioned - but we will get to that.

Again, open the configuration in admin panel by clicking on the eye icon.

Now open your boilerplate image in your favorite image editor. In this example we will use the browser based editor [https://www.photopea.com](https://www.photopea.com).

Usually you have a selection tool like this which will show you the position, width and height of your selection when using it. Click it to enable it.

First, simply select the whole image to find out the full width and height of it.

Back in the admin panel, enter the image width in the corresponding field.

Also, add the image height into the corresponding field.

Click "Save configuration"

Back in your Frontend, click "Create design". Double-check that the article image should now be positioned correctly.

You now have to find out 4 more values in your image. Back in your image editor, create a selection from the very top left point to the top left point where the design of your product should be located. The width and height of the selection will be the top left position of where the canvas should be located. Remember both values. Right after, select the area that should be editable by your customers. This will give you the canvas width and canvas height. Remember these both values, too. In the end you should know these 4 values: - the position from top where the editable canvas area should start - the position from left where the editable canvas area should start - the width of the editable canvas area - the height of the editable canvas area

Back in the admin panel, open the configuration again by clicking the eye icon.

Enter the value for the canvas width.

Enter the value for the canvas height.

Click "Save configuration"

Click "Create design". You'll now see that the editable area should already have the right size - but most likely the wrong position.

Back in your admin panel, again, open the configuration by clicking the eye icon.

Now enter the value for the field "Canvas position on background, from left".

Now enter the value for the field "Canvas position on background, from top".

Click "Save configuration"

Backend in youre Frontend, click "Create design". The article image and the editable area should now have the right size and position.

A few things may not yet look the way you like. In this example the outer area is faded in white color. And the grid size that helps customers to align their elements position is way too small.

Again, open the configuration in your admin panel.

Now play around with all the configuration options the designer provides. For example, to decrease the white color for the outer area you could increase the transparency.

This may look more the way you like.

To increase the grid size just enter a bigger value to the corresponding field.

You may also want to change the color of the grid.

Every time you changed the configuration, don't forget to click "Save configuration"...

And always double-check your changed in the Frontend.

Set up a new product in the Product Designer

Christian Kilb
47 steps
4 minutes

Cilb

Photopea

Navigate to the product page of the product you like to enable the designer for. Then, copy the product number to your clipboard.

Open the product designer in the admin panel.

Click "Configurations"

Click the copy icon of one of your existing configurations.

Click the eye icon of the new, copied configuration.

Update the name and label of your configuration.

Delete all existing article numbers assigned to the configuration.

Add the product number from the clipboard to the input field.

Click "Add"

Click "Save configuration"

Double-check that the product designer got enabled for your product.

In the admin panel click the eye icon for your new configuration to open it.

Remove the existing value in "URL of Article image which will be placed behind the canvas" field.

In a new tab, open the media manager of Shopware.

Click "Upload file" and upload the boilerplate image of your product.

Select the newly uploaded image.

Click "Copy link"

Go back to the previous tab and paste the URL from your clipboart to the "URL of Article image which will be placed behind the canvas" field.

Click "Save configuration"

In your Frontend, click "Create design" and double-check that the background image was replaced. It may look odd and wrongly positioned - but we will get to that.

Again, open the configuration in admin panel by clicking on the eye icon.

Now open your boilerplate image in your favorite image editor. In this example we will use the browser based editor [https://www.photopea.com](https://www.photopea.com).

Usually you have a selection tool like this which will show you the position, width and height of your selection when using it. Click it to enable it.

First, simply select the whole image to find out the full width and height of it.

Back in the admin panel, enter the image width in the corresponding field.

Also, add the image height into the corresponding field.

Click "Save configuration"

Back in your Frontend, click "Create design". Double-check that the article image should now be positioned correctly.

Back in the admin panel, open the configuration again by clicking the eye icon.

Enter the value for the canvas width.

Enter the value for the canvas height.

Click "Save configuration"

Click "Create design". You'll now see that the editable area should already have the right size - but most likely the wrong position.

Back in your admin panel, again, open the configuration by clicking the eye icon.

Now enter the value for the field "Canvas position on background, from left".

Now enter the value for the field "Canvas position on background, from top".

Click "Save configuration"

Backend in youre Frontend, click "Create design". The article image and the editable area should now have the right size and position.

A few things may not yet look the way you like. In this example the outer area is faded in white color. And the grid size that helps customers to align their elements position is way too small.

Again, open the configuration in your admin panel.

Now play around with all the configuration options the designer provides. For example, to decrease the white color for the outer area you could increase the transparency.

This may look more the way you like.

To increase the grid size just enter a bigger value to the corresponding field.

You may also want to change the color of the grid.

Every time you changed the configuration, don't forget to click "Save configuration"...

And always double-check your changed in the Frontend.