Magento 2 Multi Vendor Web to Print

Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. You need to transfer this app folder into the Magento 2 (Adobe Commerce) root directory on the server as shown below.

After the successful installation, you have to run these commands in the Magento 2 root directory:

First command – php bin/magento setup:upgrade

Second Command – php bin/magento setup:di:compile

Third Command – php bin/magento setup:static-content:deploy

After running the commands, you have to flush the cache from Magento admin panel by navigating through->System->Cache management as shown below.

For the multilingual support, the admin will navigate through Store->Configuration->General ->Locale Options and select the locale as German (the language into which admin want to translate his store content).

If you need to do the module translation, please navigate the following path in your system app/code/Webkul/MarketplaceWebToPrint/i18n. Now, open the file named en_US.CSV for editing.

Once you have opened the file for editing. Replace the words after the comma(,) on the right with your translated words.

After editing the CSV file, save it and then upload it to the same folder. Now your module translation is complete.

The admin needs to navigate to Stores -> Configuration -> Webkul -> Marketplace -> Seller Product’s Settings.

Under Seller Product’s Settings section,  enable the  Web to Print product type for the sellers. Otherwise, sellers will not be able to create the customizable products for the customers.

The seller will have a Web To Print menu option in their accounts as per the below image.

Using the sub-menu options, the seller will configure the settings for Web To Print product.

Image Categories:

For uploading the images for the templates, the seller first needs to create image categories. For this, the seller will click on the Image Categories option and navigate to the image category page as per the below image.

Here, the seller can –

• View the complete list of the categories.
• Edit or delete the category.
• Add new image category.

For adding the new category, click on the Add New Image Category and navigate to the New Image Category Page as per the below image.

Here, enter the category name and category description. Also, upload the image which will represent the category.

Images:

After creating the categories for the images, the seller can now upload images to the templates. For this, the seller will click on the Images option and navigate to the image page as per the below image.

Here, the seller can –

• View the complete list of the images.
• Edit or delete the images.
• Add new images to the categories.

For adding the new image, click on the Add New Image and navigate to the New Image Page as per the below image.

Here, enter the image description and select the image category from the drop-down. And then upload the image which will be added to that selected category.

Fonts:

The seller can even upload custom font files for the text editor. For this, the seller will click on the Font option and navigate to the Font page as per the below image.

Here, the seller can –

• View the complete list of the font files.
• Edit or delete the fonts.
• Add new fonts for the text editor.

For adding the new fonts, click on the Add New Font and navigate to the New Fonts Page as per the below image.

Here, enter the font name and then upload the font file.

Colors:

The seller can add the predefined colors for the template using the color codes. For this, the seller will click on the Colors option and navigate to the Colors page as per the below image.

Here, the seller can –

• View the complete list of the colors.
• Edit or delete the colors.
• Add new colors.

For adding the new colors, click on the Add New Color and navigate to the New Color Page as per the below image.

Here, enter the color name and color code.

For creating a new personalized product for your online store click on New Product menu option.

After this, select the product type Web To Print Product and navigate to the Add New Product page.

Here, the seller first saves the product with the product basic details. Then, only the seller can view the Create Web To Print Template button as per the below image.

Now, click on Create Web To Print Template button and the editor will be displayed as per the below image.

Adding Template:

To insert a new template, click Add More and the following form will appear.

Here, the seller needs to provide the template information:

Title – Set the title for the frontend.

Description – Enter any description of the template.

Base Image –  Upload the base image of the product.

Mask Image – Upload the mask image of the product where customization can be done.

Adding Text:

To add a text in the template, click Text icon and edit the text as per the choice.

The text editor has various options to customize the text – font face, bold, italic, size, color etc.

Adding Images:

The seller can add the images to the template. The height and width of the image can be adjusted accordingly.

Adding Shapes:

For adding shapes, click Shape. You can also customize the shape using fill color, border color, width, etc.

Click on Preview button to preview the template.

And finally, select the template which you want to display on the frontend and save the configuration.

On the product page, the customers will see the Customize Product button.

Canvas

After clicking the Customize Product button, the Canvas editor will open. Here, the customer can customize the product images using the text editor, upload image, or add shapes to the image. The customer can choose any of the templates and customize it accordingly.

Preview – Marketplace Web to Print

Once, the customer is done with the customization, the customer will save the template. And can even preview it by clicking on the Preview button.

A pop-up window will display where the customer needs to check the declaration, enter quantity, and then click Add to Cart button.

Shopping Cart

After adding the product to the cart, the customer can proceed further to place the order.