Read More
Read More
Menu Close

    PrestaShop Web to Print {User Guide}

    PrestaShop Web to Print allows your customers to customize the products as per their requirements.

    From T-shirts to rubber stamps, to online ads and business cards – the user can personalize it all.

    The Web to Print module provides various custom options to customize the product as per the need. You can choose to provide the following custom options to customize the product.

    • Text
    • Number
    • Image

    The module also facilitates the import of images from Facebook as well as Instagram to customize the product. Customers can choose to use these features as well.

    Features of the PrestaShop Web to Print module

    • Offer your customers various options to create their own personalized products.
    • Wide range of custom options engages customers on the store which reduces the website’s bounce rate.
    • A customer can add image to customize the product.
    • Customers can also add text on a personalized image to get the personalized product.
    • A customer also gets to preview the product they have designed by applying various custom options.
    • Customers can also download the customized product image.
    • Ask your customers to upload the customized image and then proceed to purchase to get the personalized product.
    • Social import allows customers to add images to the products directly from their Facebook and Instagram accounts.

    How to install the PrestaShop Web to Print module

    1. Firstly, go to the module manager in back office and click on ‘upload a module’.
    2. After that, drag and drop the module file or select the file from the system.
    3. In this way, the module installation will be successful.
    Click to install the Prestashop Web To Print module
    Drop or select the file of Prestashop Web To Print
    Prestashop Web To Print module installed successfully

    How to configure the PrestaShop Web to Print module

    After the successful installation of the module, an admin needs to configure the module.

    Searching for an experienced
    Prestashop Company ?
    Read More

    On the configuration page, there are only two options to configure image import settings. An admin can allow import via Facebook & Instagram both.

    To allow import via both Facebook & Instagram, an admin will need the API keys. The process to get the API keys are available in the next section.

    Configure Prestashop Web To Print module

    Suppose an admin allowed the import of images from Facebook and Instagram both, then the customers can fetch the images from their own Facebook and Instagram accounts.

    Social import offer customers to add the images directly from their Facebook and Instagram accounts to customize the product.

    How to Generate Facebook and Instagram Credentials

    Create Facebook Credentials

    First of all, an admin needs to create an account on the Facebook developer site.

    After creating the account, navigate to My Apps->Add New App.

    Create New app for web to print import feature

    After clicking on the Add New App button, the following page will open. Here, enter the display name and contact email to add a new App.

    Enter details of the app for web to print import feature

    Now, go to the Basic section under Settings. Here, on this page, you’ll find your App ID & App secret required to configure the module.

    API key to import Facebook images in Prestashop Web To Print

    Now, let’s proceed to see the process of generating the Instagram API credentials.

    Create Instagram Credentials

    In order to proceed to generate API keys, visit the link. After landing on the page, click on the “My Apps” button.

    Instagram API key generation for web to print import feature

    On clicking the “My Apps” button, you will land on the following page. Here, you can see the list of all the previously created apps.

    Now, in order to create a new app, click on the “Create App” button.

    Create App

    After that select the app category as “Something Else”.

    Select purpose of creating app

    Now, enter the name of the app & contact email to proceed.

    Enter name of the app

    Also, complete the security check.

    Complete the security check

    Upon creation of an app, you will land on the dashboard of the app. Here, go to the “Basic” under the settings section.

    Set up instagram basic display app

    Now, at the end of the page, you will find a button to add a platform.

    Add platform

    Click on the “Add Platform” button & after that select the platform as “Website”.

    Select the platform as website

    Here, you will need to add the URL of your website. Add the front-end URL of your shop & click on save changes to proceed.

    Enter front-end URL of your shop

    Set up Instagram Basic Display app

    After adding the URL of your shop, now go to the products section. Here, you will need to set up a product that’ll help you to show Instagram feeds.

    Go to products section

    To fetch & show the Instagram feeds, proceed to configure the “Instagram Basic Display” product. Click on the “set up” button to proceed.

    12-1

    Now, click on the “Create New App” to configure Instagram basic display app.

    Create a new app to configure Instagram basic display

    Enter the name of the app & proceed.

    Enter the anme of the app

    After creating the app for Instagram basic display, you will find the App ID & App Secret needed to configure the module.

    On this page, you will also need to fill OAuth redirect URL, Deauthorize callback URL & the data deletion request URL.

    The redirect URL which needs to be filled is already available in the configuration settings of the module. You just need to copy & paste the URL here.

    Get the API keys

    So, this was all about the process to generate the API keys for the module. Enter these keys in the configuration settings to fetch the Instagram feeds.

    Apart from the generation of API keys, you also need to add an Instagram tester in order to access the Insta account via the Facebook app.

    Add Instagram Tester

    In the above picture, you may notice a section of the user token generator. In this section, there is an option to add or remove Instagram Testers.

    Now, you need to click on this button in order to proceed to the next step.

    151-1

    Upon clicking the “Add Instagram Tester” button, a popup will open. Here, enter the username of the Instagram account that you want to add as an Instagram tester.

    152

    After selecting the user & clicking on the “Submit” button, the Instagram user will be added as a tester.

    153

    Now go to Instagram. After that navigate to the “Apps and Websites” section under “Settings“.

    154

    Under “Apps and Websites“, you now need to go “Tester Invites” to view all the tester requests.

    155

    Here, either you can accept/decline the tester request of the Facebook app via which you sent the request.

    156

    On clicking the “Accept” button, you are authorizing the Facebook app as Instagram Tester.

    157

    Upon accepting the request, the status of the Instagram Tester will also update from “Pending“.

    158

    How to add product customization fields to a product

    After the installation of the module, an admin can customize products. To do so, navigate to Catalog->Products->Edit Product->Modules.

    Now, click on the “configure” button to proceed to add the customizable fields to the product.

    Customize the web to print functionalities

    After clicking on the “configure” button, you will land on the following page. Here, click on the “Add New Image” button to add the template title and image.

    Add a customizable product image in web to print

    Enter the “Title” & add the “Image” of a template and save the details.

    Enter the template details for web to print

    After saving the template, you need to select the customizable area on the product. On selecting the customizable area, you’ll need to click on the “Add Area” button.

    Add customizable area for web to print

    Click on the “Add Area” button & a popup will appear on the screen. Now, proceed to select the area type.

    There are three types of editor types available under the area type available with the module.

    • Text
    • Number
    • Image

    Text Editor

    Select an area type for web to print feature

    On selecting the text editor, you need to enter the area name. Now, click on the Save button to add the customizable area to the product.

    Add text area for web to print functionality

    In the following image, you can see a new customizable area is now added.

    text area added for web to print feature

    For your information, the title & type fields are editable. You can just click on them to edit the details.

    update customizable area details for web to print

    How Web to Print helps a customer to customize the product

    On the product page, a customer can now see a “Customize” button.

    customize the product

    After clicking on the “Customize” button, a popup appears on the screen. This popup contains all the options to helps customers customize the product.

    add text to customize the product

    When a customer clicks on the customization section(area), an editor open just like the image below.

    text area options
    text added to the product image

    Once a customer finishes customizing the product, he/she can preview it by clicking on the “Preview” button.

    customized product image preview

    Image Editor in Web to Print

    An admin can also add an image area type in the same way as explained above.

    In case, if he adds an image area, a customer gets an option like in the image below at the front end.

    image area

    After uploading the image, a customer can choose to change, delete, or adjust the image.

    image added using web to print feature

    Number Editor in Web to Print

    Now, let’s see what options a customer will get on the front end if an admin adds the number area type.

    As you can see in the image below, a customer can now add the number to the customizable area. Additionally, he/she can also customize the look of the number.

    number editor

    After adding the number, it’ll look something like in the image below.

    After customizing the product, a customer can download the customized product image. Thereafter, he/she can also upload the image by clicking on the “Upload” button.

    number added using web to print feature

    On uploading the customized image successfully, it’ll appear on the product page too.

    all the customized product image available on the product image

    Cart Page

    A new link named “Product Customization” is also available on the cart page to view the customization details.

    cart page

    When a customer clicks on the “Product Customization” link, a popup appears on the screen with details of customized product images.

    customization product images added cause of web to print module

    A customer can also view product customization details on the Order Details” page.

    order details page

    Product customization details at the admin’s end

    The details of the product customization i.e., images uploaded by a customer is also available on the admin order details page.

    Admin order details page

    So, this was all about the PrestaShop Web to Print module. I hope this document will help you in checking the functionality of the module in a better way.

    Also, do let us know about your views in the comments.

    In case, if you are also looking for a module with similar functionality for your marketplace, then do check out the blog.

    Support

    For any kind of technical assistance or query, please raise a ticket at http://webkul.uvdesk.com or send us a mail at [email protected]

    Also, please explore our PrestaShop development services & vast range of featureful PrestaShop Addons.

    Current Product Version - 4.2.1

    Supported Framework Version - 1.7.x.x

    Blog Version - 1.7.x.x
    • Version 1.7.x.x
    • Version 1.6.x.x
    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Table of Content