PHPackages o3-shop/o3-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. o3-shop/o3-theme ActiveO3shop-theme[Utility & Helpers](/categories/utility) o3-shop/o3-theme ================ Responsive Theme for O3-Shop v1.1.0(1mo ago)0737↓50%21GPL-3.0-onlySmartyCI passing Since Apr 22Pushed 1mo ago2 watchersCompare [ Source](https://github.com/o3-shop/o3-Theme)[ Packagist](https://packagist.org/packages/o3-shop/o3-theme)[ Docs](https://www.o3-shop.com/)[ RSS](/packages/o3-shop-o3-theme/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (2)Versions (4)Used By (1) O3 Theme ======== [](#o3-theme) 1. General Information ---------------------- [](#1-general-information) **O3 Theme** is a responsive theme for all O3 Shop editions. ### Key Features [](#key-features) - Bootstrap 5.3.8 - Custom build process (Gulp) - PurgeCSS for optimized CSS output - SplideJS for sliders 2. Installation --------------- [](#2-installation) Choose the appropriate installation method based on your use case. --- ### Method A: Composer Installation (Production) [](#method-a-composer-installation-production) **Use this method if:** You want to use the theme as-is without modifications. #### Step 1: Install via Composer [](#step-1-install-via-composer) ``` composer require o3-shop/o3-theme ``` #### Step 2: Copy Assets to Out Directory [](#step-2-copy-assets-to-out-directory) ``` cp -r /source/Application/views/o3-theme/out/o3-theme \ /source/out/ ``` > **Important:** > > - Copy the entire `o3-theme` directory, not just its contents > - The target should be `source/out/o3-theme/`, not `source/out/` directly #### Step 3: Prepare the Database [](#step-3-prepare-the-database) In order to install the theme options, import the `setup.sql` (to be found in `source/Application/views/o3-theme`) into your database. **Option 1: Command Line** ``` mysql -u MYSQL_USER -p SHOP_DATABASE **Important:** > > - Copy the entire `o3-theme` directory, not just its contents > - The target should be `source/out/o3-theme/`, not `source/out/` directly #### Step 3: Install Build Tools [](#step-3-install-build-tools) **3.1 Install Node.js & npm** **Ubuntu/Debian:** ``` curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - sudo apt-get install -y nodejs ``` **Other Systems:** Download from [nodejs.org](https://nodejs.org/) **Verify Installation:** ``` node --version # Should show v22.13.0 or higher npm --version # Should show 10.x or higher ``` **3.2 Install Gulp CLI Globally** ``` npm install --global gulp-cli ``` **3.3 Install Theme Dependencies** ``` cd /source/Application/views/o3-theme/ npm install ``` #### Step 4: Prepare the Database [](#step-4-prepare-the-database) Import the database setup (same as Composer method): **Command Line:** ``` mysql -u MYSQL_USER -p SHOP_DATABASE **During development, make sure production-mode is disabled**. Only then will you be able to view the source maps and unminified assets. > > **💡 Tip:** Use the mode-tool, which shows you in the frontend which mode the shop is in. You can activate it in the theme settings. The watcher monitors: - `build/js/**/*.js` → Rebuilds JavaScript bundles - `build/scss/**/*.scss` → Rebuilds CSS - `**/*.tpl` → Clears OXID TMP directory - `Application/translations/**/*.php` → Clears OXID TMP directory **Production build:** ``` gulp ``` This will: - Minify JavaScript and CSS - Remove unused CSS with PurgeCSS - Optimize assets for production ### PurgeCSS Safelist [](#purgecss-safelist) PurgeCSS removes unused CSS classes. If you dynamically generate class names in JavaScript or templates, add them to the safelist. **Example dynamic classes:** ``` {* Template with dynamic class *} ``` **Add to safelist in `gulpfile.js`:** ``` safelist: [ 'grid-view', // Add your dynamic classes here 'line-view', /^custom-/, // Or use patterns ] ``` **Location:** Line ~81 in `gulpfile.js` in the PurgeCSS configuration. --- 5. Asset Integration -------------------- [](#5-asset-integration) ### JavaScript [](#javascript) - Main JS bundle: `/source/Application/views/o3-theme/build/js/main.bundle.js` - `import` new scripts here to include them in the **main JS**. - Files in `build/js/widgets/` are standalone and must be explicitly loaded in templates: `[{oxscript include="js/widgets/checkagb.js" priority=10}]` > JavaScript from modules can also be integrated into `main.bundle.js`. Descriptions and examples can be found in the bundle-file. ### SCSS [](#scss) - Main SCSS bundle: `/source/Application/views/o3-theme/build/scss/main.bundle.scss` - `@import` new styles here to include them globally. > CSS/SCSS from the modules can also be integrated into `main.bundle.scss`. Descriptions and examples can be found in the bundle-file. --- 6. jQuery --------- [](#6-jquery) - This theme uses Bootstrap 5.3.8, which means that vanilla JS is used instead of jQuery. - If jQuery is absolutely necessary, enable it in theme settings (same version as theme wave). - Deprecation warnings during build are harmless and will disappear when updating Bootstrap. 7. Compatibility with PayPal ---------------------------- [](#7-compatibility-with-paypal) The PayPal module checks the active theme ID in one of its templates: `[{if $oViewConf->getActiveTheme()=='flow'}]`Change `'flow'` to `'o3-theme'` for compatibility. 8. Issues --------- [](#8-issues) Please forward all issues to for the project **O3 Theme**. ### Health Score 45 — FairBetter than 92% of packages Maintenance97 Actively maintained with recent releases Popularity19 Limited adoption so far Community19 Small or concentrated contributor base Maturity39 Early-stage or recently created project Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~167 days Total 3 Last Release 47d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/53b105106ade5f151851db1839b344f7be04f17d881c49ca0f4da0867d5b2d82?d=identicon)[o3-shop](/maintainers/o3-shop) --- Top Contributors [![maexware-daniel](https://avatars.githubusercontent.com/u/59417594?v=4)](https://github.com/maexware-daniel "maexware-daniel (25 commits)")[![nlo-tronet](https://avatars.githubusercontent.com/u/206915827?v=4)](https://github.com/nlo-tronet "nlo-tronet (15 commits)")[![ralftrapp](https://avatars.githubusercontent.com/u/74130839?v=4)](https://github.com/ralftrapp "ralftrapp (9 commits)")[![mzanier](https://avatars.githubusercontent.com/u/5287214?v=4)](https://github.com/mzanier "mzanier (4 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)") --- Tags themeseshopO3-Shop ### Embed Badge ![Health badge](/badges/o3-shop-o3-theme/health.svg) ``` [![Health](https://phpackages.com/badges/o3-shop-o3-theme/health.svg)](https://phpackages.com/packages/o3-shop-o3-theme) ``` ### Alternatives [ddoe/wysiwyg-editor-module Summernote WYSIWYG Editor for OXID eShop. 19981.7k2](/packages/ddoe-wysiwyg-editor-module)[oxid-esales/gdpr-optin-module This is the GDPR opt-in module for the OXID eShop. 20459.1k2](/packages/oxid-esales-gdpr-optin-module)[pingpong/themes Laravel Themes 3023.7k2](/packages/pingpong-themes)[tatter/themes Lightweight theme manager for CodeIgniter 4 1710.2k2](/packages/tatter-themes) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)