How To Create Page.twig In The Common Folder

Mar 31, 2026 by Jule 45 views

How to Create page.twig in the Common Folder in OpenCart

Why Create page.twig in the Common Folder?

OpenCart is a popular e-commerce platform that uses Twig as its templating engine. The common folder is where you can create global templates that can be used throughout your store. Creating page.twig in this folder allows you to create a reusable layout for your entire store.

Steps to Create page.twig in the Common Folder

Step 1: Create the page.twig File

First, navigate to the catalog/view/theme/{your_theme_folder}/template/common folder. If the common folder doesn't exist, create it. Then, create a new file called page.twig.

{# page.twig #}

Step 2: Add the Basic Structure

Now, add the basic structure of your page.twig file. This will include the doctype, html, head, and body tags. Remember to use OpenCart's twig syntax.

<!DOCTYPE html>
<html>
<head>
	<!-- Head goes here -->
</head>
<body>
	<!-- Body goes here -->
</body>
</html>

Step 3: Add the Header and Footer

Next, add the header and footer sections. You can create these in separate files and then include them in your page.twig file.

{% include 'common/header.twig' %}
{% include 'common/footer.twig' %}

Step 4: Add the Content Area

Create a content area where you can include the content from other pages.

<div class="container">
	<div class="row">
 <div class="col-sm-12">
 {% block content %}{% endblock %}
 </div>
	</div>
</div>

Step 5: Update Your Theme's Controller

Finally, update your theme's controller to extend the page.twig file.

class ControllerCommonHome extends Controller {

	public function index() {
 $this->document->setTitle($this->config->get('config_meta_title'));

 $data['column_left'] = $this->getLayoutColumnLeft();
 $data['column_right'] = $this->getLayoutColumnRight();

 $data['content'] = $this->load->controller('common/home');

 $this->response->setOutput($this->load->view('common/page', $data));
	}
}

Troubleshooting

Q: I'm getting a 404 error. A: Make sure you've updated your theme's controller to extend the page.twig file.
Q: I'm seeing the old layout. A: Clear your cache and refresh your site.

Conclusion

Creating page.twig in the common folder allows you to create a reusable layout for your entire OpenCart store. This can save you time and make it easier to maintain your store's design.

Happy coding, guys!