How template customization works

What a template is

Each part of the buying flow — cart, checkout, receipt, and email receipts — is rendered from a Twig template. These templates are made up of a page template (the overall page structure) and partial includes (smaller reusable pieces, like the cart display or an address block) that get combined together when the page renders.

The same templates render on the server and in the browser, using Twig and its JavaScript counterpart, Twig.js. This is what allows the cart and checkout to update in place — swapping in new shipping rates, taxes, or totals — without a full page reload.

Ways to customize

There are a few different levels of customization, ranging from no-code configuration to editing the raw template markup:

• Admin configuration. Many common changes — like your logo, brand colors, which product details are shown, and checkout field behavior — can be set directly in the Foxy admin with no code required.

• Custom CSS and JS. If you want to go beyond configuration options, you can add your own CSS and JavaScript directly to the templates without touching the underlying markup.

• Your own design with AutoMagiCache. If you want the cart, checkout, and receipt to match your own site’s design exactly, you can host your own template files and have Foxy automatically cache and merge them with the required functionality.

• Raw template editing. For full control, the raw Twig templates are available to view, copy, and customize directly.

Notes

• Foxy’s default templates are responsive and fully functional out of the box — none of this customization is required to launch a store.

• The right level of customization depends on how much of the default look and behavior you need to change. Start with admin configuration, and move to the next level only if you need more control than it offers.