File Structure

Shock has a clean, organized file structure. Keep it as-is — if you move or rename folders, you’ll need to update the matching file paths throughout the source code. If you haven’t unzipped and opened the template yet, see Installation first.

Your homepage must be index.html

Web servers look for index.html as the default page of a folder. Whichever demo home you choose, save it as index.html so it loads when visitors reach your domain.

The assets folder

Everything the pages depend on lives under assets, grouped by type:

• index.html your homepage
• home-1.html … home-3.html the demo home layouts
• Documentation.html the offline docs
• GPL.txt / README.txt license & readme
• Directoryassets

  • Directorycss

    • main.css entry point
    • core.css structure & layout
    • theme.css colors & typography — edit this
    • vendor bootstrap, aos, bricklayer & more
  • Directoryjs

    • main.js template behavior
    • vendor bootstrap, anime, aos & more
  • Directoryimages

    • jpg
    • png
    • gif
    • logo.svg / logo-white.svg
    • favicon.ico
  • videos background & showcase clips
  • Directoryfonts

    • font-awesome
    • lightbox
  • Directorysvg

    • brands
    • …the Ionic icon set (SVG)

theme.css is your friend

For most customization — colors, fonts, spacing — you only need to touch assets/css/theme.css. Leave core.css and the vendor files alone unless you know exactly what you’re changing.

About the demo media

The original images and videos from the live preview aren’t included in the download, due to the licensing guidelines imposed by the marketplace. Replace the placeholders with your own media, or source professional assets from:

• Pexels and Unsplash — free photos and video
• Freepik and Shutterstock — free & premium assets

Check the license

Always confirm you have the right to use an image or video — especially commercially — before you publish it on your live site.

Continue to LayoutSee how Shock uses Bootstrap 5 and CSS variables under the hood.