Creating a product page with a template file After being a long time observer I finally have a question that I can't find an answer to. I have tried searching, both on here and on Google, but to no avail.

I am using Drupal 8.3.2 with the Drupal Commerce 2 module.

I am trying to theme a product page. I have switched twig debugging and created my own 'commerce-product.html.twig' file to overwrite the default one.

The problem I am having is that I want to be able to insert the different fields in the html using the twig template engine like I have done for custom content types on some of the pages on my site.

&lt;div class="header"&gt;
  &lt;h5&gt;{{ fields.field_header.content}}&lt;/h5&gt;
&lt;/div&gt;
&lt;div class="body"&gt;
  {{ fields.body.content}}
&lt;/div&gt;


For the example above, I created a view and a block, and within the block used the markup above to call the field values within the view.

Now that I have come to the product page I am unsure which is the correct way to proceed.

Should I create a view for a product page, or can I call the product values in a similar fashion to above. For example.

{{ product.field_product_image.content}}


Or do I need to create a view and select the fields I want to display etc. in a similar way to what I have done for my custom content types.

I have tried to search for the answer, but I haven't been able to find much help.

That's landed me here, making my first post.
You should start off with copying the template from the Commerce module /modules/contrib/commerce/modules/product/templates/commerce-product.html.twig:

{#
/**
 * @file
 *
 * Default product template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The rendered product fields.
 *   Use 'product' to print them all, or print a subset such as
 *   'product.title'. Use the following code to exclude the
 *   printing of a given field:
 *   @code
 *   {{ product|without('title') }}
 *   @endcode
 * - product_entity: The product entity.
 * - product_url: The product URL.
 *
 * @ingroup themeable
 */
#}
&lt;article{{ attributes }}&gt;
  {{- product|without('variation_attributes') -}}
&lt;/article&gt;


You can then adjust the display according to your custom fields, so something like:

&lt;article{{ attributes.addClass('product') }}&gt;
  {{ product.field_header }}

  &lt;div class="body"&gt;
      {{ product.body }}
  &lt;div&gt;
  {{- product|without('field_header','body') -}}
&lt;/article&gt;