Add to CartCheckout CartRemove from CartSettingsUpdate CartShopping BasketBasketPaper BagShopping BagRetail BagWoman BagUS DollarDollar SignDollar BadgeEuroEuro SignEuro BadgeJapanese YenYen SignYen BadgeBritish PoundBritish Pound SignBritish Pound BadgePercentageDiscountSpecial PriceBitcoinBitcoin SignBitcoin BadgeNewNew BadgeOn Sale StickerCredit CardSecure PaymentPay by CardBillCoinsMoney BagMoney Bag EuroMoney Bag YenMoney Bag PoundMoneyPayMoney BoxPurchase OrderInvoiceShipping BoxArchive BoxOpen BoxDelivery TruckDeliveryDelivery TimeLabel TagPrice TagTagLabelGiftboxStoreRibbonAddMinusCloseCheckmarkAngle UpAngle LeftAngle RightMenuMenu HamburgerSearchSearch GlassDelete CircleChecked CircleRotate LeftExpandPriority WarningQuestionShutdownSpeedSecurity ShieldReal EstatePropertyShield SecurityIphonePro LaptopiMac ScreenAvatarMenMale UserFemale UserDiplomaHeartLikeUnlikeQualityCameraTimeAppointmentPinMap LocationTravel MapMap MarkerCompass DirectionWorld MapFountain PenPenBinBackpackGlassesFlip FlopsCallsLandlineSmartphoneTelephone OperatorCustomer SupportSupportExitLoginLogoutExportImportExternal LinkEnvelopeOpen MailInboxSearch MagnifyCartShopping CartGrocery CartE-commerce CartDesignStackColor PaletteGoogle ChromePageReloadRefresh Windowwatchwinter-hattietrousersunderwear-1underwearvestsuitswimsuitsockssneakersskirt-1shirt-4shirt-5shoeshoe-1shortsshorts-1skirtshirt-3shirt-1shirtpullover-1pulloverscarfshawljacket-1lingeriepamelapocket-watchpoloportfoliojackethigh-heel-1high-heelglovehandbaghandbag-1handbag-2handkerchiefhat-1hatdress-2capbasketball-jerseyclutchcoatcoat-1dressdress-1briefcasebow-tie

Directory structure

Src folder

All the theme files are located in /src folder. Files here form a demo static site, mostly equivalent to the online demo (CDNs not used here).

Next.js uses folder and file name based routing. If you place file named about.js to /src/pages folder, page with /about URL will be created. You can also use subfolders (for example /src/pages/blog/post.js - final URL /blog/post).

You can open any of the files in your code editor to modiy their markup or content to suit your needs.

Src folder also includes these subfolders:

  • /scss - where you can find all scss files
  • /components - React components
  • /hooks - custom reusable React hooks
  • /pages - files for every page
  • /data - JSON data sample files for pages and components
SCSS folder

SCSS folder located at /src/scss, contains Bootstrap’s and theme’s SCSS sources structured in the following subfolders

  • bootstrap - full SCSS source for the Bootstrap framework.
  • modules - theme overrides and custom components for this theme
  • style.*.scss - main theme SCSS files that get compiled into theme main stylesheets style.*.css. The * represents the colour variant
  • core.scss - file that handles all the SASS imports - mixins, Bootstrap and theme variables, Bootstrap framework
  • user.scss - a place for you to add your own custom CSS declarations to keep them separate from the core theme files, which aids updating.
  • user-variables.scss - a place for you to add your own custom SCSS variables to override the Bootstrap and theme defaults. This prevents the need to edit the core Bootstrap/theme files and prevents the problems from updating the theme.
Public folder

Static files like images or SVG files are located in /public/content folder.

You can customize favicon in /public folder too.