How to overwrite commerce product details tpl.twig (commerce-product.html.twig) in theme template in drupal 8?

Question

I created a bunch of products, but I need to style them per the designer's design. I know that I have to overwrite the template from /modules/contrib/commerce/modules/product/templates/commerce-product.html.twig but where do I put it in my theme?

Does it go to the root of my templates folder? What is the correct way to style the single product page?

Answer 1

From the docs https://www.drupal.org/docs/8/theming/twig/working-with-twig-templates:

1. Locate the template you wish to override.
2. Copy the template file from its base location into your theme folder.
3. (optionally) Rename the template according to the naming conventions in order to target a more specific subset of areas where the template is used.
4. Modify the template to your liking.

You may have to clear the caches to have Drupal recognize the new file.

So usually you have a templates folder in your theme, there you can drop all custom twig files.