Stroyka

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

  • 100% Responsive Layout
  • LTR/RTL supported
  • HTML5 and CSS3
  • Bootstrap 4
  • SASS
  • CSS3 Animation
  • SVG Icons
  • Font Awesome Icons
  • BEM syntax
  • Roboto Google Font
  • Compatible with all major browsers
  • Grid / List products view
  • Quickview
  • 2 Variants of the home page
  • 3 Variants of the product page
  • 3 Variants of the blog page layout
  • 2 Variants of the post page layout
  • PhotoSwipe gallery on the product page
  • Off canvas filters

Getting Started

Preparation

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

Build Project

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

npm start

To build for production, run the command:

npm run build

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

You can find more information about the available commands in the official React documentation.

Project Structure

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

Sources/
    public/
        images/
        favicon.ico
        index.html
        manifest.json
    src/
        components/
        data/
        i18n/
        scss/
        services/
        store/
        svg/
        index.js
        photoswipe.js
        serviceWorker.js
    .editorconfig
    .gitignore
    package.json
    README.md
    yarn.lock

Here is a description of the most important files and directories of the project:

  • Sources/src/components/ - Contains components used in the template. More details below.
  • Sources/src/data/ - Contains stubs data for the template, products, categories, etc.
  • Sources/src/i18n/ - Files related to localization.
  • Sources/src/scss/ - Contains project styles. More details are described in the SCSS Files section.
  • Sources/src/services/ - Currently contains one service that is responsible for displaying the departments menu on the home page.
  • Sources/src/store/ - Files related to React Redux: actions, reducers, .etc. More details below.
  • Sources/src/svg/ - Contains separate SVG files.

Components directory

Sources/src/components is a main directory with the following structure:

components/
    account/
    blocks/
    blog/
    filters/
    footer/
    header/
    home/
    mobile/
    shared/
    shop/
    site/
    widgets/
    Layout.jsx
    Root.jsx

Directory Description

  • src/components/account
    Contains customer pages and components.

  • src/components/blocks
    Contains components used as a construction bricks for pages (mainly used on the home page).

  • src/components/blog
    Blog related components, pages, etc.

  • src/components/footer
    Contains the components used in the footer of the site.

  • src/components/header
    Contains the components used in the header of the site.

  • src/components/home
    Contains two homepage options.

  • src/components/mobile
    Contains the components used in the mobile header and mobile menu.

  • src/components/shared
    Contains components used across all template.

  • src/components/shop
    Contains shop pages (category, product, cart, checkout, etc.) and components.

  • src/components/site
    Contains rest site pages (About Us, Contact Us, etc.).

  • src/components/widgets
    Contains components used in the shop or/and blog sidebar.

Store directory

Sources/src/store contains files related to React Redux: actions, reducers, .etc.

All actions, reducers are logically separated by "feature", you can see the structure of this directory below:

store/
    cart/
        cartActionTypes.js
        cartActions.js
        cartReducer.js
        index.js
    compare/
        ...
    currency/
        ...
    locale/
        ...
    mobile-menu/
        ...
    quickview/
        ...
    wishlist/
        ...
    index.js
    store.js
    rootReducer.js

Customization

How to change the logo?

  • Desktop logo for classic header:

    1. Open the Sources/src/components/header/Header.jsx file.

    2. Find <Link to={'/'}><LogoSvg/></Link> and replace <LogoSvg/> with your logo image.

  • Desktop logo for compact header:

    1. Open the Sources/src/components/header/NavPanel.jsx file.

    2. Find <Link to=""><LogoSmallSvg/></Link> and replace <LogoSmallSvg/> with your logo image.

  • Mobile logo:

    1. Open the Sources/src/components/mobile/MobileHeader.jsx file.

    2. Find <Link to="/" className="mobile-header__logo"><LogoSmallSvg/></Link> and replace <LogoSmallSvg/> with your logo image.

If you want to use a logo image in SVG format, go to the SVG section to learn how to use SVG files as a regular React component.

How to change font?

  1. Open the Sources/public/index.html 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">
  1. Open the Sources/src/scss/_custom-variables.scss file.

  2. And define a special variable, as in the example below:

$body-font-family: 'YOUR_FONT_NAME';

How to change theme color scheme?

The process of changing the theme color scheme is described in the SCSS Files section

How to customize the menus?

  • Top bar menu

    Top bar menu located in the Sources/src/components/header/Topbar.jsx file. Use existing menu as an example to create the menu you want.

  • Departments, Main, Mobile menus

    These menus are generated automatically based on a structured JS array located in:

    • Sources/src/data/headerDepartments.js for departments menu.
    • Sources/src/data/headerNavigation.js for main menu.
    • Sources/src/data/mobileMenu.js for mobile menu.

    Use existing menu as an example to create the menu you want.

  1. Open the Sources/src/components/footer/Footer.jsx.

  2. Find and replace with desired copyright, as in the example below:

<div className="site-footer__copyright">YOUR_COPYRIGHT_NOTICE_HERE</div>

Third-Party Packages

This template uses several third-party packages:

The following libraries and frameworks are also used:

SCSS Files

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

scss/
   blocks/
   blog/
   common/
   components/
   filters/
   footer/
   header/
   mixins/
   pages/
   shop/
   themes/
   widgets/
   _custom.scss
   _custom-variables.scss
   _functions.scss
   _variables.scss
   style.ltr.scss
   style.rtl.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.
  • _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, then find and uncomment one of the following lines:

//@import 'themes/red';
//@import 'themes/blue';
//@import 'themes/black';
//@import 'themes/green';

After that, you need to rebuild the template.

LTR/RTL

How to change 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

Then open Sources/public/index.html and specify value of the dir attribute (ltr or rtl) for <html> tag:

...
<html lang="en" dir="ltr">
...

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;
    }

SVG

How to add SVG icon?

  1. Put your file with SVG icon to the Sources/src/svg directory.

  2. Open the Sources/src/svg/index.js file and append to the end:

export {ReactComponent as YOUR_SVG_COMPONENT_NAME} from './YOUR_SVG_FILE_NAME.svg';
  1. Now you can use your svg icon as a regular React component.

This approach is also described in the official documentation.

Fonts

We used two fonts in this template:

Changelog

Version 1.2.0 – October 11, 2019

  • Added: RTL support;
  • Added: Scrolling page up and restoring scroll position after navigation;
  • Updated:
    • fontawesome from 5.10.1 to 5.11.2;
    • eslint-plugin-react from 7.14.3 to 7.16.0;
    • react, react-dom from 16.9.0 to 16.10.2;
    • react-intl from 3.1.9 to 3.3.2;
    • react-redux from 7.1.0 to 7.1.1;
    • react-router-dom from 5.0.1 to 5.1.2;
    • react-scripts from 3.1.1 to 3.2.0;
    • react-toastify from 5.3.2 to 5.4.0;

Version 1.1.0 – August 20, 2019

  • Added: Off canvas filters on the shop page;
  • Added: PhotoSwipe gallery on the product page;
  • Fixed: Unexpected execution of mouse click handlers while dragging the react-slick (now mouse click will be prevented);
  • Updated:
    • fontawesome from 5.8.2 to 5.10.1;
    • react, react-dom from 16.8.6 to 16.9.0;
    • react-intl from 2.9.0 to 3.1.9;
    • react-redux from 7.0.3 to 7.1.0;
    • react-router-dom from 5.0.0 to 5.0.1;
    • react-scripts from 3.0.1 to 3.1.1;
    • react-slick from 0.24.0 to 0.25.2;
    • react-toastify from 5.2.1 to 5.3.2;
    • reactstrap from 8.0.0 to 8.0.1;
    • redux from 4.0.1 to 4.0.4;
    • eslint-config-airbnb from 17.1.0 to 18.0.1;
    • eslint-plugin-import from 2.17.3 to 2.18.2;
    • eslint-plugin-jsx-a11y from 6.2.1 to 6.2.3;
    • eslint-plugin-react from 7.13.0 to 7.14.3.

Version 1.0.0 – June 4, 2019

  • Initial Release.

Known Issues

  • Warning in browser console:

    Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
    
    * Move code with side effects to componentDidMount, and set initial state in the constructor.
    * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
    
    Please update the following components: SideEffect(NullComponent)

    This warning is due to react-helmet (https://github.com/nfl/react-helmet/issues/465).

Credits