Help Needed: How to Create a Custom Theme in PrestaShop 1.7

[inconito001]

Hi everyone,

I'm currently working on developing a custom theme for PrestaShop 1.7 and could really use some guidance. I’ve gone through the official documentation, but there are still a few things I’m unclear about. Here’s a breakdown of where I’m at and where I need help:

What I’ve Done So Far:​

1. Environment Setup:
   • I’ve installed PrestaShop 1.7 on my local machine using XAMPP.
   • I’ve cloned the default “Classic” theme as a starting point by copying it into a new folder under /themes and renaming it to “mycustomtheme.”
2. Theme Configuration:
   • I’ve updated the config/theme.yml file with new information like theme name, version, and thumbnails.
   • Updated the theme’s preview.jpg for the back-office preview.
3. CSS and JS Customization:
   • I’ve created my own assets/css and assets/js files to customize the frontend.
   • I’m using webpack to compile my SCSS files. Currently using npm run build to compile them into a theme.css.
4. Twig Templates:
   • Edited a few .tpl files under /themes/mycustomtheme/templates for basic layout changes.
   • Changed some .twig blocks for the homepage and product pages.

Where I Need Help:​

1. Inheritance in Twig: I understand that PrestaShop uses a lot of template inheritance. Is there a way to override specific .tpl files (like header.tpl or footer.tpl) without modifying the core theme? I want to ensure future PrestaShop updates won’t break my theme.
2. Adding Custom Hooks: I want to add a custom hook to display a banner at the top of my homepage. I’ve read that I need to register new hooks, but I’m a bit confused about how to add custom hooks to my theme and how to use them within the .tpl files.
3. Override Classic Theme’s Styles Correctly: My theme’s CSS overrides some styles from the “Classic” theme, but I’m unsure about best practices. Should I completely remove the Classic theme’s CSS, or is there a better way to load my styles without causing conflicts?
4. Theme Responsiveness: I’m trying to make sure my theme is fully responsive. Are there any tools or practices specific to PrestaShop that you recommend for testing the responsiveness of a custom theme?
5. Best Way to Handle Multilingual Content: How do I ensure that the custom text I add (like banners or custom sections) is easily translatable using the PrestaShop translation system? Is there a way to integrate these strings into the back-office translation interface?
6. Best Practices for SEO: Are there any PrestaShop-specific SEO practices I should follow when building my theme? For example, handling meta tags, alt text for images, etc., within the template files.

Any Advice or Tips?​

If anyone has experience creating themes from scratch or customizing the default PrestaShop theme, I would love to hear your thoughts! Any tips, suggestions, or resources are more than welcome.

Thanks in advance for your help!

 

[d-shilko]

Hi everyone,

I'm currently working on developing a custom theme for PrestaShop 1.7 and could really use some guidance. I’ve gone through the official documentation, but there are still a few things I’m unclear about. Here’s a breakdown of where I’m at and where I need help:

What I’ve Done So Far:​

1. Environment Setup:
   • I’ve installed PrestaShop 1.7 on my local machine using XAMPP.
   • I’ve cloned the default “Classic” theme as a starting point by copying it into a new folder under /themes and renaming it to “mycustomtheme.”
2. Theme Configuration:
   • I’ve updated the config/theme.yml file with new information like theme name, version, and thumbnails.
   • Updated the theme’s preview.jpg for the back-office preview.
3. CSS and JS Customization:
   • I’ve created my own assets/css and assets/js files to customize the frontend.
   • I’m using webpack to compile my SCSS files. Currently using npm run build to compile them into a theme.css.
4. Twig Templates:
   • Edited a few .tpl files under /themes/mycustomtheme/templates for basic layout changes.
   • Changed some .twig blocks for the homepage and product pages.

Where I Need Help:​

1. Inheritance in Twig: I understand that PrestaShop uses a lot of template inheritance. Is there a way to override specific .tpl files (like header.tpl or footer.tpl) without modifying the core theme? I want to ensure future PrestaShop updates won’t break my theme.
2. Adding Custom Hooks: I want to add a custom hook to display a banner at the top of my homepage. I’ve read that I need to register new hooks, but I’m a bit confused about how to add custom hooks to my theme and how to use them within the .tpl files.
3. Override Classic Theme’s Styles Correctly: My theme’s CSS overrides some styles from the “Classic” theme, but I’m unsure about best practices. Should I completely remove the Classic theme’s CSS, or is there a better way to load my styles without causing conflicts?
4. Theme Responsiveness: I’m trying to make sure my theme is fully responsive. Are there any tools or practices specific to PrestaShop that you recommend for testing the responsiveness of a custom theme?
5. Best Way to Handle Multilingual Content: How do I ensure that the custom text I add (like banners or custom sections) is easily translatable using the PrestaShop translation system? Is there a way to integrate these strings into the back-office translation interface?
6. Best Practices for SEO: Are there any PrestaShop-specific SEO practices I should follow when building my theme? For example, handling meta tags, alt text for images, etc., within the template files.

Any Advice or Tips?​

If anyone has experience creating themes from scratch or customizing the default PrestaShop theme, I would love to hear your thoughts! Any tips, suggestions, or resources are more than welcome.

Thanks in advance for your help!

Hello. The first read the forum rules.

The second. To try to make a custom theme you have to start making a custom module.
Modules are a general path of the theme.

The theme is a complex product.

Do you want to be a developer? What is your level in PHP, HTML, CSS, and JS?

 

[venga1]

looks like that content is generated by chatgpt rather..