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
  • Search suggestions
  • Sticky header that can work in two modes: pullToShow and alwaysOnTop
  • Off canvas and Drop down shopping cart
  • Drop down account menu

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 run dev

To build for production, run the command:

npm run build

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

You can find more information about the available commands in the official Nuxt.js 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/
    src/
        api
        assets
        components
        data
        fake-server
        interfaces
        layouts
        locales
        middleware
        pages
        plugins
        services
        static
        store
        svg
        types
        loading.html
    .editorconfig
    .eslintrc.js
    .gitignore
    nuxt.config.ts
    package.json
    tsconfig.json
    yarn.lock

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

  • Sources/src/api/ - Contains functions that fetch data from the server. You need to replace calls to the fake server with real AJAX requests.
  • Sources/src/assets/scss/ - Contains project styles. More details are described in the SCSS Files section.
  • 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/fake-server/ - Contains fake server code. Used for demonstration purposes only. After you replace calls to the fake server with real AJAX requests, you can delete this directory.
  • Sources/src/interfaces/ - Contains the typescript interfaces used in the template.
  • Sources/src/layouts/ - Nuxt.js layouts (More details).
  • Sources/src/locales/ - Files related to localization.
  • Sources/src/middleware/ - Contains middlewares (More details).
  • Sources/src/pages/ - Template pages (More details).
  • Sources/src/plugins/ - Contains plugins (More details).
  • Sources/src/services/ - Contains some useful functions and classes that are used in the template.
  • Sources/src/static/ - Static files used in the template, such as images, etc.
  • Sources/src/store/ - Contains Vuex modules.
  • Sources/src/svg/ - Contains separate SVG files.
  • Sources/src/types/ - Contains types augmentations for TypeScript.

Components directory

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

components/
    account/
    blocks/
    blog/
    filters/
    footer/
    header/
    mobile/
    shared/
    shop/
    widgets/
    layout.vue

Directory Description

  • src/components/account
    Contains layout of customer pages.

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

  • src/components/blog
    Blog related components, page layouts, 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/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 page layouts and components.

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

Customization

How to change the logo?

  • Desktop logo for classic header:

    1. Open the Sources/src/components/header/header.vue file.

    2. Find <AppLink to="/"><LogoSvg /></AppLink> and replace <LogoSvg /> with your logo image.

  • Desktop logo for compact header:

    1. Open the Sources/src/components/header/nav-panel.vue file.

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

  • Mobile logo:

    1. Open the Sources/src/components/mobile/mobile-header.vue file.

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

How to change font?

  1. Open the Sources/nuxt.config.ts file.

  2. Find and replace with the desired font:

// fonts
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' },

  1. Open the Sources/src/assets/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.vue 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.ts for departments menu.
    • Sources/src/data/headerNavigation.ts for main menu.
    • Sources/src/data/mobileMenu.ts for mobile menu.

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

How to remove/change copyright notice?

  1. Open the Sources/src/components/footer/footer.vue.

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

<div class="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:

Sources/src/assets/scss/
   blocks/
   blog/
   common/
   components/
   filters/
   footer/
   header/
   mixins/
   pages/
   shop/
   themes/
   widgets/
   _custom.scss
   _custom-variables.scss
   _functions.scss
   _svg.scss
   _variables.scss
   style.ltr.scss
   style.rtl.scss
   style.scss
   swiper.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 Sources/src/assets/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/nuxt.config.ts and specify value of the dir property (ltr or rtl):

...
htmlAttrs: {
    // Value of HTML dir attribute: <html dir="...">
    dir: 'rtl' // or '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. Now you can use your svg icon as a regular Vue.js component. Just import it:

<template>
    <div>
        <YourSvgComponentName />
    </div>
</template>

<script>

import YourSvgComponentName from '~/svg/YOUR_SVG_FILE_NAME.svg';

export default {
    components: { YourSvgComponentName }
}

</script>

Fonts

We used two fonts in this template:

Changelog

Version 1.1.0 – May 5, 2021

  • New: API service rewritten as Nuxt.js plugin. This made it possible to use other plugins (eg @nuxtjs/axios) from the API service;
  • Updated: Nuxt.js from 2.13.3 to 2.15.4;
  • Fixed: Incorrectly detecting the height of the departments menu when scrolling the page from bottom to top on the home page in Firefox.

Version 1.0.0 – August 2, 2020

  • Initial Release.

Credits