documentation

Flowery

Thank you so much for purchasing our item from templatemonster.

Installation

Follow the steps below to setup your site template:

  1. Prerequisites:
    • Install Node JS - Refer to https://nodejs.org/en/ to install nodejs.
    • Install create-react-app - Install create-react-app npm package globally. This will help to easily run the project and also build the source files easily. Use the following command to install create-react-app.
      npm install -g create-react-app
                        
  2. Unzip the downloaded package and open the React-App/app folder to find all the template react files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  3. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • React-App/api - php files and folders
    • React-App/app - all react-app files and folders
      • React-App/app/node_modules - dependencies that are needed for an initial working react app
      • React-App/app/package.json - contains various metadata that is relevant to our project
      • React-App/app/.gitignore - specifies intentionally untracked files that Git should ignore
      • React-App/app/public - Root folder that gets served up as our react app.
        • React-App/app/favicon.ico - It’s an icon file that is used in index.html as favicon.
        • React-App/app/index.html - template file which is served up when we run start script to launch our app.
        • React-App/app/manifest.json - used to define our app, mostly contains metadata.
      • React-App/app/src – react app folder
        • React-App/app/assets - Images
        • React-App/app/components - Components files and folders
        • React-App/app/constants - Content files
        • React-App/app/sections - Sections files and folders
        • React-App/app/App.js - file has react root component
        • React-App/app/index.css - Contains styles for general setup of our app.
        • React-App/app/index.js - This files renders our component and registers service workers.
  4. Running the Application in local:
    • Install all the npm packages. Go into the project folder and type the following command to install all npm packages:
      npm install
      -- OR --
      npm install --legacy-peer-deps
      
      
    • In order to run the application. Type the following command:
      npm start
  5. Deployment:
    • Builds the app for production to the build folder.
      npm run build
    • Your app is ready to be deployed.
  6. You are good to go for adding your content now!

Sections structure

This template have these sections folders, have respective js & css files.

components Files and Structure

This template have these components folders, have respective js & css files.

constants Files

This template have these constants files.

php

In this template, contact form is created using PHP. It include sending email using SMTP server and the PHPMailer library.

  1. This template have these PHP files and folder.
    • React-App/api/phpmailer/smtp - Contains php mailer files
      • class.phpmailer.php
      • class.smtp.php
      • PHPMailerAutoload.php
    • React-App/api/phpmailer/submit.php - Php file where you put your email address that will receive the message after sending through contact form
  2. creating an app password:
    • Step#1: Login to Google Account
    • Step#2: Enable 2-Step Verification
      • First, you have to enable the 2-Step Verification on your account before you set up the app password.
      • Click on the Security tab on the left-hand side.
      • Go to the Security page and within the section Signing in to Google, click on 2-Step Verification.
      • Click on Get Started and on the next page enter your password to verify your account and hit Next.
      • enter the phone number you want to use for verification and then select the method to receive your code.
      • Enter the verification code & hit Next.
    • Step#3: Setup Application password
      • Within the section Signing in to Google, you will notice a new option that says App passwords.
      • Click on App passwords and verify your account.
      • select Mail from Select app and Other (custom name) from Select device and provide it a name and hit generate.
      • Now you have successfully generated your app password. The App Password is the 16-character code in the yellow bar on your device.
      • Copy this code and save it somewhere safe to use it later as instructed.
  3. You only have to make little changes in submit.php to get started:
    • In the Username field, you have to enter your Gmail ID which you want to use as an SMTP server:
          // Gmail ID which you want to use as SMTP server
          $mail->Username = "your_email@gmail.com"; // (Your Mail)
                        
    • In the Password field, you have to enter your Gmail App password (that you have created above):
          // App Password
          $mail->Password = "Your App Password"; // Your app password
                        
    • Now in the addAddress field, you have to enter another email id in which you want to receive form submission mails
          // Recipient Email ID where you want to receive emails
          $mail->addAddress("your_email@gmail.com", "your name"); // (Your Mail)
                        
    • Change the subject Here:
          $mail->Subject = "(Flowery) New Contact Info";
                      
  4. Make sure change API_PATH in Contact folder according to your website.
        const API_PATH = 'https://www.example.com/api/phpmailer/submit.php';
                  

Customization

  1. Logo:

    you can change logo text here... OR you can put image rather than text.

      
    <!-- Logo -->
    <Link to='/' className='logo'>
      <GiFlowerPot className='logo-icon' /> 
      <h2> Flowery </h2> 
      <!-- <img src="" alt="logo" /> -->
    </a>
    
                
  2. Image & Video Customization:

    This template have these assets folders.

    • Home Images => (assets/Home/) => (1500 x 1000)px
    • About Video => (assets/About/) => -
    • Counter Images => (assets/Counter/) => (1500 x 1000)px
    • Products Images => (assets/Products/) => (350 x 500)px
    • Team Images => (assets/Team/) => (400 x 400)px
    • Testimonials Images => (assets/Testimonials/) => (200 x 200)px
    • Blog Image => (assets/Blog/Blogs/) => (600 x 400)px
    • PageTitle Images => (assets/PageTitle/) => (1500 x 500)px
    • Gallery Images => (assets/Gallery/) => (600 x 400)px
    • Recent-Posts Images => (assets/Blog/Recent-Posts/) => (600 x 400)px
    • Blog-Gallery Images => (assets/Blog/Blog-Gallery/) => (600 x 400)px
    • Comments Images => (assets/Blog/Comments) => (300 x 300)px
    • Popular Image => (assets/Popular/) => (350 x 500)px
    • Product-Gallery Images => (assets/Product-Gallery/) => (350 x 400)px
    • Profile Images => (assets/Profile/) => (400 x 400)px
    • Logo Image is greater in width than height => e.g. (86 x 16)px

Source & Credits

Images:

Icons:

Google Font:

packages: