Store App Templates
Each page within the store app has its own template to display that page's content.
Where to save template files
Template files will go in a folder that has the same name as the app instance key. For example, if the store app instance key is "store" then you would put all of your template files within the store folder inside the templates folder.
If your theme was called "Custom" then this would be an example folder structure:
- themes
- custom
- theme.json
- templates
- home.twig
- one-column.twig
- two-column.twig
- store
- cart.twig
- category.twig
- categories.twig
- checkout-error.twig
- checkout-payment.twig
- checkout-receipt.twig
- checkout-review.twig
- checkout-shipping.twig
- home.twig
- manufacturer.twig
- manufacturers.twig
- product.twig
- products.twig
- search.twig
- search-results.twig
- tag.twig
- tags.twig
- custom
App pages and their templates
Below is the list of app pages and the name of the template file that you should create.
Cart
This cart page is used to show the contents of the customer's shopping cart.
Template name: cart.twig
Categories list
This page shows the list of categories.
Template name: categories.twig
Category detail
This page shows information for an individual category. The products assigned to the category are often shown.
Template name: category.twig
Manufacturer detail
This page shows information for an individual manufacturer. The products assigned to the manufacturer are often shown.
Template name: manufacturer.twig
Manufacturer List
This page shows the list of manufacturers
Template name: manufacturers.twig
Product detail
The product detail page shows the information for an individual product. This page will often have an order form to order the product.
Template name: product.twig
Products list
The products list page is usually a continuation of the paginated list of products from the store app home page.
Template name: products.twig
Store home
The store home page is often used to show categories or a paginated list of products.
Template name: home.twig
Search
The search page can be used to show the search form to search for products. Alternatively you can use the Search Form API to embed the search form on other pages.
Template name: search.twig
Search results
The search results page can show the results of a product search. It can show a paginated list of matching products.
Template name: search-results.twig
Tags list
This page shows the list of tags.
Template name: tags.twig
Tag detail
This page shows information for an individual tag. The products assigned to the tag are often shown.
Template name: tag.twig
Checkout pages and their templates
Checkout - Error
The error checkout page is used to show a message if their payment method fails.
This shows after the Checkout - Review step.
Template name: checkout-error.twig
Checkout - Payment
The payment checkout page shows the available shipping options for the customer to choose from as well as captures their billing and payment information.
This is the second step in the checkout process.
Template name: checkout-payment.twig
Checkout - Receipt
The receipt checkout page shows the customer their receipt and payment confirmation for their order.
This is the last step in the checkout process.
Template name: checkout-receipt.twig
Checkout - Review
The review checkout page shows the shipping, billing, and cart information for the customer to review before placing their order.
This is the third step in the checkout process.
Template name: checkout-review.twig
Checkout - Shipping
The shipping checkout page is for capturing the customer's shipping name, address and contact information.
This is the first step in the checkout process.
Template name: checkout-shipping.twig