diff --git a/packages/core/src/lib/object_factory.js b/packages/core/src/lib/object_factory.js
index 318b4cd25..492361ab8 100644
--- a/packages/core/src/lib/object_factory.js
+++ b/packages/core/src/lib/object_factory.js
@@ -41,19 +41,29 @@ const Pattern = function (
    */
   const pathObj = path.parse(this.relPath);
 
+  // We need to check for templates with a fileextension that contains multiple dots like e.g. .html.twig
+  if (
+    patternlab?.config?.patternExtension?.includes('.') &&
+    this.relPath.endsWith('.' + patternlab.config.patternExtension)
+  ) {
+    this.fileExtension = '.' + patternlab.config.patternExtension; // e.g. '.html.twig'
+    this.fileName = path.basename(this.relPath, this.fileExtension); // e.g. 'colors'
+  } else {
+    this.fileExtension = pathObj.ext; // e.g. '.hbs'
+    this.fileName = pathObj.name; // e.g. 'colors'
+  }
+  this.subdir = pathObj.dir; // 'atoms/global'
+
   const info = this.getPatternInfo(
     pathObj,
     patternlab,
     isPromoteToFlatPatternRun ||
       (patternlab &&
         patternlab.config &&
-        patternlab.config.allPatternsAreDeeplyNested)
+        patternlab.config.allPatternsAreDeeplyNested),
+    this.fileName
   );
 
-  this.fileName = pathObj.name; // 'colors'
-  this.subdir = pathObj.dir; // 'atoms/global'
-  this.fileExtension = pathObj.ext; // '.mustache'
-
   // TODO: Remove if block when dropping ordering by prefix and keep else code
   // (When we drop the info about the old ordering is deprecated)
   if (
@@ -341,15 +351,20 @@ Pattern.prototype = {
    *
    * @param pathObj path.parse() object containing useful path information
    */
-  getPatternInfo: (pathObj, patternlab, isPromoteToFlatPatternRun) => {
+  getPatternInfo: (
+    pathObj,
+    patternlab,
+    isPromoteToFlatPatternRun,
+    filename
+  ) => {
     const info = {
       // colors(.mustache) is deeply nested in atoms-/global/colors
       patternlab: patternlab,
       patternHasOwnDir: isPromoteToFlatPatternRun
         ? path.basename(pathObj.dir).replace(prefixMatcher, '') ===
-            pathObj.name.replace(prefixMatcher, '') ||
+            filename.replace(prefixMatcher, '') ||
           path.basename(pathObj.dir).replace(prefixMatcher, '') ===
-            pathObj.name.split('~')[0].replace(prefixMatcher, '')
+            filename.split('~')[0].replace(prefixMatcher, '')
         : false,
     };
 
diff --git a/packages/docs/src/docs/advanced-config-options.md b/packages/docs/src/docs/advanced-config-options.md
index 460b79395..689689e5a 100644
--- a/packages/docs/src/docs/advanced-config-options.md
+++ b/packages/docs/src/docs/advanced-config-options.md
@@ -57,7 +57,7 @@ Possibility to define whether the initial viewport width on opening pattern lab
 
 Sets default active pattern info code panel by file extension - if unset, uses the value out of _patternExtension_ config value, or instead use value `html` to display the html code initially, or the value defined for the _patternExtension_.
 
-**default**: _patternExtension_ value (`"hbs"` | `"mustache"` | `"twig"` | `"html"`)
+**default**: _patternExtension_ value (`"hbs"` | `"mustache"` | `"twig"` | `"html.twig"` | `"html"`)
 
 ## ishControlsHide
 
diff --git a/packages/engine-handlebars/lib/engine_handlebars.js b/packages/engine-handlebars/lib/engine_handlebars.js
index d182971c1..c73d25b4c 100644
--- a/packages/engine-handlebars/lib/engine_handlebars.js
+++ b/packages/engine-handlebars/lib/engine_handlebars.js
@@ -124,8 +124,8 @@ const engine_handlebars = {
    * assume it's already present
    */
   spawnMeta: function (config) {
-    this.spawnFile(config, '_head.hbs');
-    this.spawnFile(config, '_foot.hbs');
+    this.spawnFile(config, '_head.' + config.patternExtension);
+    this.spawnFile(config, '_foot.' + config.patternExtension);
   },
 
   /**
diff --git a/packages/engine-mustache/lib/engine_mustache.js b/packages/engine-mustache/lib/engine_mustache.js
index e39359490..fa9674eb0 100644
--- a/packages/engine-mustache/lib/engine_mustache.js
+++ b/packages/engine-mustache/lib/engine_mustache.js
@@ -104,8 +104,8 @@ const engine_mustache = {
    * assume it's already present
    */
   spawnMeta: function (config) {
-    this.spawnFile(config, '_head.mustache');
-    this.spawnFile(config, '_foot.mustache');
+    this.spawnFile(config, '_head.' + config.patternExtension);
+    this.spawnFile(config, '_foot.' + config.patternExtension);
   },
 
   // find and return any {{> template-name }} within pattern
diff --git a/packages/engine-twig-php/lib/engine_twig_php.js b/packages/engine-twig-php/lib/engine_twig_php.js
index 0f728dc6b..8fb2a2b99 100644
--- a/packages/engine-twig-php/lib/engine_twig_php.js
+++ b/packages/engine-twig-php/lib/engine_twig_php.js
@@ -25,7 +25,7 @@ let patternLabConfig = {};
 const engine_twig_php = {
   engine: TwigRenderer,
   engineName: 'twig-php',
-  engineFileExtension: '.twig',
+  engineFileExtension: ['.twig', '.html.twig'],
   expandPartials: false,
   findPartialsRE:
     /{[%{]\s*.*?(?:extends|include|embed|from|import|use)\(?\s*['"](.+?)['"][\s\S]*?\)?\s*[%}]}/g,
@@ -123,7 +123,10 @@ const engine_twig_php = {
    */
   spawnMeta(config) {
     const { paths } = config;
-    ['_head.twig', '_foot.twig'].forEach((fileName) => {
+    [
+      '_head.' + config.patternExtension,
+      '_foot.' + config.patternExtension,
+    ].forEach((fileName) => {
       const metaFilePath = path.resolve(paths.source.meta, fileName);
       try {
         fs.statSync(metaFilePath);
diff --git a/packages/engine-twig/lib/engine_twig.js b/packages/engine-twig/lib/engine_twig.js
index efaa5416a..90506a9dc 100644
--- a/packages/engine-twig/lib/engine_twig.js
+++ b/packages/engine-twig/lib/engine_twig.js
@@ -122,7 +122,7 @@ let patternLabConfig = {};
 const engine_twig = {
   engine: twing,
   engineName: 'twig',
-  engineFileExtension: '.twig',
+  engineFileExtension: ['.twig', '.html.twig'],
 
   // regexes, stored here so they're only compiled once
   findPartialsRE:
@@ -277,8 +277,8 @@ const engine_twig = {
    * assume it's already present
    */
   spawnMeta: function (config) {
-    this.spawnFile(config, '_head.twig');
-    this.spawnFile(config, '_foot.twig');
+    this.spawnFile(config, '_head.' + config.patternExtension);
+    this.spawnFile(config, '_foot.' + config.patternExtension);
   },
 
   /**