Creating custom product page on BigCommerce

Question

I'm trying to create a modified product page in my BigCommerce Cornerstone theme and I'm following the video on the following link:

https://stencil.bigcommerce.com/docs/custom-layout-templates

The video claims that I need to use a live URL when I create a new HTML under /template/pages/custom/product and map it in the .stencil file.

The way I created a new live URL is that I created a completely empty web page. The first difference I notice though, compared to the video is that when I navigate to the page it's not completely empty as shown in the video but shows the header and footer of the website.

When the video asks to copy the contents of the original product.html into my newly created HTML under /template/pages/custom/product, the HTML markup doesn't get picked up i.e. the page will not show components of a product page.

I got stuck at this point and cannot continue with modifying the template.

Answer 1

If you are creating a custom product template, you would need to map it to the live URL for a product in your store. Mapping a custom product template to a web content page won't work.

It's important to note the difference between page types. If you are creating a custom category template, you would map it to an existing category page in your store, etc.

After you map the product page URL in your .stencil file, be sure to restart Stencil CLI. You'll need to restart to see the changes reflected on localhost in your browser (i.e. a blank page at the product page url if you mapped an empty html file to it).