Intoduction


Sophia

Sophia - Angular Material Ecommerce theme

Created : 23/07/2019
By : Lamarena
Email : lazeapostolski@gmail.com

Thank you for purchasing Sophia - Angular Material Ecommerce theme. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .
Thankyou so much!

Features


The html template uses Latest Bootstrap v3.3.4 with valid HTML5 tags. This theme is a responisve layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes.

  • 100% Responsive Layout
  • Made with Sass
  • HTML5 and CSS3
  • Angular Material
  • Google font
  • CSS3 Animation
  • Font Awesome Icons
  • Material Icons
  • Product Compare
  • Products Details
  • Add to Card
  • Grid / List products view
  • Quickview
  • Wishlist
  • Blog Pages
  • Ngx Pagination
  • Swiper Carousel

Getting started


Preparation

  1. Make sure your system has installed Node.js.
  2. Open a terminal window and go to the Sources directory.
  3. Run the npm install command. This command will load all necessary dependencies specified in the package.json file.
  4. Then run the npm install -g @angular/cli command to install Angular CLI (if not yet installed).

Build Project

To start a local HTTP server and runs the build process with change tracking run the command:

ng serve

To build for production, run the command:

ng build --prod

After executing the command, the compiled project will be located in the dist directory.

For a complete list of available Angular CLI commands, go to this link.

Folder Structure


When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

  1. Documentation - Documentation for Sophia
  2. THEME - Sophia Main Folder

Angular 7 Folder Structure

  • e2e
  • src
    • app
    • assets
    • environments
    • vendor
    • browserslist
    • favicon.ico
    • index.html
    • karma.conf.js
    • main.ts
    • polyfills.ts
    • styles.scss
    • test.ts
    • tsconfig.app.json
    • tsconfig.spec.json
    • tslint.json
  • angular.json
  • package.json
  • package-lock.json
  • tsconfig.json
  • tslint.json

Color Settings


Multikart include 12 color option, You need to change app.scss.

@import 'scss/color1';
@import 'scss/color2'; ... as on

If you want to use another color, change $theme-deafult variable in style scss

$theme-main: #ffc111;

Font


!--Google font--
link href="" https://fonts.googleapis.com/css?family=Roboto:300,400,700,900

Dependencies


  • Flex-layout : Doc: https://www.npmjs.com/package/@angular/flex-layout
  • Angular Material : Doc: https://material.angular.io/guide/getting-started
  • Font Awesome : Doc: https://www.npmjs.com/package/font-awesome
  • Ngx-pagination : Doc: https://www.npmjs.com/package/ngx-pagination
  • Ngx-spinner : Doc: https://www.npmjs.com/package/ngx-spinner#demo
  • Ngx-swiper-wrapper : Doc: https://www.npmjs.com/package/ngx-swiper-wrapper

Support


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

Email Us at : lazeapostolski@gmail.com