RedParts

Thank you for purchasing my 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 here. Thanks so much!

Features

  • Two header layouts
  • RTL/LTR Supported
  • Five different color schemes
  • Based on Bootstrap 4.5.x
  • Powerful mobile menu
  • With auto parts store features
  • 100% Responsive Layout
  • HTML5, CSS3, SASS
  • CSS3 Animation
  • SVG & Font Awesome Icons
  • BEM syntax
  • Roboto Google Font
  • Compatible with all major browsers
  • Four shop layouts
  • Quickview
  • Offcanvas filters
  • Account pages
  • Megamenu
  • Vertical Megamenu
  • Photoswipe gallery

Getting Started

There are two ways to start using the RedParts template:

  • The first way is to use pre-compiled HTML files. The description of this method is below;
  • The second way is to build a template from sources, it is suitable for experienced developers (See the section Sources).

Pre-compiled HTML

After downloading and unpacking the RedParts template, pre-compiled HTML files will be located in the HTML directory.

So, the HTML directory will look like after unpacking:

HTML/
   blue/
   green/
   orange/
   red/
   violet/

This directory contains different versions of the template:

  • blue - with blue theme color;
  • green - with green theme color;
  • orange - with orange theme color;
  • red - with red theme color;
  • violet - with violet theme color.

Choose the one you want to use (for example red):

HTML/
   red/
      css/
      images/
      js/
      vendor/
      404.html
      about-us.html
      account-addresses.html
      account-dashboard.html
      ...

Description of HTML Structure, CSS Files and Javascript files are in the relevant sections.

If you want to add images or make changes to CSS or Javascript files, you need to open the corresponding files.

Please note that any errors or broken layouts that result from you editing the CSS or JavaScript files are not covered by support. Edit these files at your own risk.

HTML Structure

This template based on a responsive layout. All of the information within the main content area is nested within a body tag. The general template structure is the same throughout the template. Here is the general structure.

<body>
    <!-- site -->
    <div class="site">
        <!-- site__mobile-header -->
        <header class="site__mobile-header">
            ...
        </header>
        <!-- site__mobile-header / end -->

        <!-- site__header -->
        <header class="site__header">
            ...
        </header>
        <!-- site__header / end -->

        <!-- site__body -->
        <div class="site__body">
            ...
        </div>
        <!-- site__body / end -->

        <!-- site__footer -->
        <footer class="site__footer">
            ...
        </footer>
        <!-- site__footer / end -->
    </div>
    <!-- site / end -->

    <!-- mobile-menu -->
    <div class="mobile-menu">
        ...
    </div>
    <!-- mobile-menu / end -->
        ...
    <!-- quickview-modal -->
    <div id="quickview-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
    <!-- quickview-modal / end -->

    <!-- add vehicle-modal -->
    <div id="add-vehicle-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        ...
    </div>
    <!-- add-vehicle-modal / end -->

    <!-- photoswipe -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        ...
    </div>
    <!-- photoswipe / end -->
</body>

CSS Files

This template uses nine css files:

  • css/style.css
    Contains main stylesheets.

    css/style.ltr.css - same as css/style.css but only contains styles for LTR direction.
    css/style.rtl.css - same as css/style.css but only contains styles for RTL direction.

  • css/style.header-*.css
    Contains styles related to the desktop header. This file available in several variants, choose the one you want.

    *.ltr.css and *.rtl.css versions are also available.

  • css/style.mobile-header-*.css
    Contains styles related to the mobile header. This file available in several variants, choose the one you want.

    *.ltr.css and *.rtl.css versions are also available.

  • vendor/bootstrap/css/bootstrap.min.css
    Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

  • vendor/owl-carousel/assets/owl.carousel.min.css
    Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Used for home page slider, products carousel, posts carousel, etc.

  • vendor/photoswipe/photoswipe.css
    JavaScript image gallery for mobile and desktop, modular, framework independent. Used on the product page in the product gallery.

  • vendor/photoswipe/default-skin/default-skin.css
    JavaScript image gallery for mobile and desktop, modular, framework independent. Used on the product page in the product gallery.

  • vendor/select2/css/select2.min.css
    Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. User for some select boxes.

  • vendor/fontawesome/css/all.min.css
    This CSS file is required for Icon Font.

style.css

At the very beginning of the css/style.css file you will find a table of contents that you can use to quickly navigate through the file.

Here is an example of the structure of the style.css:

/* ----------------------------------------

Table of Contents:
- Common
  - animations
  - base
  - .document
  ...
- Components
  ...
- Filters
  ...
- Footer
  ...
- Pages
  ...
- Blocks
  ...
- Widgets
  ...
- Shop
  ...
- Blog
  ...
- Account
  ...

---------------------------------------- */
/* ----------------------------------------
// Common
// ---------------------------------------- */
/*
// animations
*/

    ...

/*
// base
*/

    ...

/*
// .document
*/

    ...

/* ----------------------------------------
// Components
// ---------------------------------------- */

    ...

style.header-*.css and style.mobile-header-*.css

Have a similar structure as style.css. At the very beginning you will find a table of contents that you can use to quickly navigate through the file.

Javascript

This template uses nine javascript files:

  • js/main.js
    This file contains all javascript code related to theme.

  • js/number.js
    Defines behaviour of the ".input-number" component.

  • vendor/jquery/jquery.min.js
    jQuery is a Javascript library that greatly reduces the amount of code that you must write.

  • vendor/bootstrap/js/bootstrap.bundle.min.js
    Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

  • vendor/owl-carousel/owl.carousel.min.js
    Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

  • vendor/nouislider/nouislider.min.js
    Lightweight JavaScript range slider with full touch support.

  • vendor/photoswipe/photoswipe.min.js
    JavaScript image gallery for mobile and desktop, modular, framework independent. Used on the product page in the product gallery.

  • vendor/photoswipe/photoswipe-ui-default.min.js
    JavaScript image gallery for mobile and desktop, modular, framework independent. Used on the product page in the product gallery.

  • vendor/select2/js/select2.min.js
    Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. User for some select boxes.

Fonts

We used two fonts in this template:

Customization

How to change logo?

If you are working with HTML files:

  • Desktop header - In HTML files, find comments <!-- logo --> and <!-- logo / end --> and replace code between them with your logo image.
  • Mobile header - In HTML files, find comments <!-- mobile-logo --> and <!-- mobile-logo / end --> and replace code between them with your logo image.

If you are working with source code:

  • Desktop header
    1. Open the src/twig/header/logo.twig file.
    2. Find comments <!-- logo --> and <!-- logo / end --> and replace code between them with your logo image.
  • Mobile header
    1. Open the src/twig/mobile/mobile-header.twig file.
    2. Find comments <!-- mobile-logo --> and <!-- mobile-logo / end --> and replace code between them with your logo image.

How to change font?

If you are working with HTML files:

  1. In HTML files find and replace with the desired font:
    <!-- fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i">
  2. Open the css/style.css file.
  3. Insert at the end:
    body {
        font-family: "YOUR_FONT_NAME";
    }

If you are working with source code:

  1. Open the src/twig/layouts/default.twig file.
  2. Find and replace with the desired font:
    <!-- fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i">
  3. Open the src/scss/_custom-variables.scss file.
  4. And define a special variable, as in the example below:
    $body-font-family: 'YOUR_FONT_NAME';

How to change theme color scheme?

If you are working with source code:

  1. Open the src/scss/_custom-variables.scss file.
  2. Find the code below:
    // Change main theme color
    //$theme-scheme: (
    //    main:  #584d8c, // main theme color
    //    muted: #cdc8e5, // muted text color
    //);
  3. Uncomment these lines and replace the colors with the ones you need.

How to remove/change copyright notice?

If you are working with HTML files:

In HTML files, find comments <!-- copyright --> and <!-- copyright / end -->, then replace code between them with your copyright.


If you are working with source code:

  1. Open the src/twig/footer/footer.twig file.
  2. Find comments <!-- copyright --> and <!-- copyright / end -->, then replace code between them with your copyright.

How to change layout and header variant?

If you are working with HTML files:

  • Desktop header
    1. Select and open an HTML file with the desired header header-*.html. For example header-classic-variant-two.html.
    2. Copy all content between <!-- site__header --> and <!-- site__header / end --> comments.
    3. Then paste the copied content between the comments <!-- site__header --> and <!-- site__header / end --> to other HTML files.
    4. Then, in the HTML files, replace the URL address of the header stylesheet file with a CSS file with the appropriate name.
      <!-- Replace: -->
      <link rel="stylesheet" href="css/style.header-*.css" media="(min-width: 1200px)">
      <!-- With: -->
      <link rel="stylesheet" href="css/style.header-classic-variant-two.css" media="(min-width: 1200px)">
  • Mobile header Open the HTML file and replace the URL of the header stylesheet file with the desired CSS file.
    <!-- Replace: -->
    <link rel="stylesheet" href="css/style.mobile-header-*.css" media="(max-width: 1199px)">
    <!-- With: -->
    <link rel="stylesheet" href="css/style.mobile-header-variant-two.css" media="(max-width: 1199px)">

If you are working with source code:

  • Desktop header

    1. Open the src/twig/layouts/default.twig file.

    2. Then change the values of the following variables:

      {# Value must be one of [spaceship, classic] #}
      {% set global_header_layout = global_header_layout|default('spaceship') %}
      
      {# If global_header_layout == spaceship, value must be one of 'style.header-spaceship-variant-[one, two, three].css' #}
      {# If global_header_layout == classic,   value must be one of 'style.header-classic-variant-[one, two, three, four, five].css' #}
      {% set global_header_style = global_header_style|default('style.header-spaceship-variant-one.css') %}
  • Mobile header

    1. Open the src/twig/layouts/default.twig file.
    2. Then change the value of the following variable:
      {# Value must be one of 'style.mobile-header-variant-[one, two].css' #}
      {% set global_mobile_header_style = global_mobile_header_style|default('style.mobile-header-variant-one.css') %}

Sources

Attention! This section is for advanced users.

Template source codes are in the Sources directory. After downloading and unpacking the template, the Sources directory will look like this:

Sources/
   gulp/
      tasks.js
   src/
      ...
   gulpfile.js
   package.json
   package-lock.json

Preparation

  1. Make sure your system has installed Node.js.
  2. Open a terminal window and go to the Source directory.
  3. Run the npm install command. This command will load all necessary dependencies specified in the package.json file.

To build the project run the command:

./node_modules/.bin/gulp build

Or (if gulp is installed globally):

gulp build

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

For a complete list of available commands, see the Gulp Tasks section below.

Gulp Tasks

Gulp tasks are in the gulp/tasks.js and gulpfile.js files. Unfortunately, such a bit unusual structure is necessary for us to automatically build the package for themeforest.

Gulp tasks description:

  • twig - Compiles twig templates into html pages.
  • sass - Compiles scss to css/style.css, style.header-*.css, style.mobile-*.scss files.
  • bootstrap - Compiles bootstrap to vendor/bootstrap/css/bootstrap.css file.
  • vendor - Copies the contents of the src/vendor directory to the dist/vendor directory.
  • images - Copies the contents of the src/images directory to the dist/images directory.
  • resize - Compiles twig templates and resize images.
  • svg - Creates SVG sprite (sprite.svg) from svg files and save it to the dist/images directory.
  • js - Copies the contents of the src/js directory to the dist/js directory.
  • clean - Removes the dist directory.
  • build - Builds a template (default task).
  • watch - Runs the template build process with change tracking.
  • serve - Starts a local HTTP server and runs the template build process with change tracking.

Twig templates

We used twig.js as a template engine (this is a port of the popular PHP library for javascript). Documentation on its syntax can be found on the official site.

Data for templates

Data for templates stored in the src/data directory. To get access to data use function data. For example, we have the file src/data/theme.json with the following contents:

{
    "name": "RedParts"
}

Now, to display the name of the theme in the template, we can use the following construction:

<div>
    {{ data('theme.json').name }}
</div>

Will be compiled to:

<div>
    RedParts
</div>

Functions

  • classnames - A simple utility for conditionally joining classNames together. https://github.com/JedWatson/classnames

  • data(path) - Loads and returns data from JSON files. path must be relative to the src/data directory.

  • image(path, options?) - Returns the image url. path must be relative to the src directory.

    • options.size - image size.
    {# images/image.jpg #}
    {{ image('images/image.jpg') }}
    
    {# images/image-200x200.jpg #}
    {{ image('images/image.jpg', {size: 200}) }}
    
    {# images/image-200x400.jpg #}
    {{ image('images/image.jpg', {size: [200, 400]}) }}
    
    {# images/image-autox400.jpg #}
    {{ image('images/image.jpg', {size: ['auto', 400]}) }}
  • svg(path) - Loads the SVG from the path and returns it as a string. path must be relative to the src/svg directory.

Filters

  • currency - Format a number to price.

    {# 249.00$ #}
    {{ 249|currency }}

Template directories

The directory with the templates (Sources/src/twig) is divided into the following subdirectories:

  • blocks - Independent parts that can be used on different pages.
  • components - Contains components and other parts not included in any other directory.
  • footer - Template files associated with the site footer.
  • header - Template files associated with the site header.
  • layouts - In this directory is the base layout used by all pages.
  • macros - Contains macros used in templates.
  • mobile - Template file associated only with mobile version of the site.
  • pages - These are the main template files that are directly compiles into html page files.
  • widgets - Component parts of blocks (usually they are used in the sidebar).

SCSS Files

The directory with SCSS files contains the following files and subdirectories:

scss/
   account/
   blocks/
   blog/
   common/
   components/
   filters/
   footer/
   header/
   mixins/
   mobile/
   pages/
   shop/
   themes/
   widgets/
   _bootstrap-variables.scss
   _constants.scss
   _custom.scss
   _custom-variables.scss
   _functions.scss
   _style.header.scss
   _style.mobile.scss
   _svg.scss
   _variables.scss
   bootstrap.scss
   style.header-*.scss
   style.mobile-*.scss
   style.scss

You can make changes to any of these files.

To make it easier for you in the future to upgrade the template to the new version, we recommend (if possible) making changes only to _custom-variables.scss and _custom.scss files.

  • _custom-variables.scss - It is used to override the values of variables. Also contains examples of how to change theme colors.
  • _custom.scss - Use to write your own scss code.

Predefined color schemes

To compile a template with one of the predefined color schemes, open the _custom-variables.scss file and scroll down, then find and uncomment one of the following lines:

//@import 'themes/theme-red/theme-variables';
//@import 'themes/theme-blue/theme-variables';
//@import 'themes/theme-green/theme-variables';
//@import 'themes/theme-orange/theme-variables';
//@import 'themes/theme-violet/theme-variables';

After that, you need to rebuild the template using the gulp build command.

How does LTR/RTL support work?

The direction is controlled using two scss variables:

  • $direction - indicates direction. Possible values: ltr or rtl.
  • $both-directions - if true compiles styles for two directions, the $direction variable will be ignored. Possible values: true or false.

Some "magic" variables are also used, which change their value depending on the given direction value. The names of these variables are the same as the names of the Logical Properties (for example, variable $margin-inline-start). These variables should only be used in the direction mixin.

This example demonstrates how it works:

.alert {
    @include direction {
        #{$margin-inline-start}: 20px;
    }
}

Will be compiled to:

  • If $direction == ltr and $both-directions == false:

     .alert {
         margin-left: 20px;
     }
  • If $direction == rtl and $both-directions == false:

    .alert {
        margin-right: 20px;
    }
  • If $both-directions == true:

    [dir=ltr] .alert {
        margin-left: 20px;
    }
    [dir=rtl] .alert {
        margin-right: 20px;
    }

What if you want to use only one direction?

Open src/scss/_custom-variables.scss, and define next variables:

$direction:       ltr;   // specify the direction you need (ltr or rtl)
$both-directions: false; // set to false to disable style compilation
                         // for two directions

Icons

By default, the icons used in the template are included as "Inline SVG". For example:

<body>
    <svg width="16" height="16">
        <path d="..."></path>
    </svg>
</body>

If this approach does not suit you. The template also implements another approach called "SVG Sprite". For example:

<body>
    <svg width="18px" height="14px">
        <use xlink:href="images/sprite.svg#menu-18x14"></use>
    </svg>
</body>

To build a template using "SVG Sprite" to display icons, run the following command from the Sources directory:

./node_modules/.bin/gulp build --icons svg-sprite

Please note that before running this command you need to follow all the steps specified in the "Sources / Preparation" section of this documentation.

If you are having difficulty building the template yourself, contact me through the contact form and in response I will send you a ZIP archive containing the template with the necessary configuration.

Changelog

Version 1.3.1 – June 14, 2020

  • Fixed: Wrong image size in the PhotoSwipe gallery.

Version 1.3.0 – June 13, 2020

  • Added: Order success page;
  • Added: Order details page;
  • Added: Edit address page;
  • Added: The ability to change the aspect ratio of the product images;
  • Updated:
    • bootstrap form 4.4.1 to 4.5.0;
    • jquery form 3.4.0 to 3.5.1;
    • select2 form 4.0.12 to 4.0.13;
    • nouislider form 14.1.1 to 14.5.0;
    • fontawesome form 5.12.0 to 5.13.0;
  • Fixed: Reverse image order in PhotoSwipe gallery for RTL direction.

Version 1.2.0 – February 10, 2020

  • Added the "Select Vehicle" button in mobile search.

Version 1.1.0 – January 24, 2020

  • Added the ability to build a template using "SVG Sprite" to display icons;
  • Removed redundant xmlns attribute from inline svg;
  • Updated:
    • bootstrap form 4.3.1 to 4.4.1;
    • jquery form 3.4.0 to 3.4.1;
    • select2 form 4.0.10 to 4.0.12;
    • nouislider form 13.1.4 to 14.1.1;
    • fontawesome form 5.8.1 to 5.12.0;
  • Now instead of black images of stubs, more friendly gray images with an image resolution printed on them are used.

Version 1.0.0 – September 30, 2019

  • Initial Release.

Credits