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-billing.twig
          • checkout-error.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

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 - Billing

The billing 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-billing.twig

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 - 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

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