Articles on: Tutorials (how to)

Basic back-end to front-end explained

Overview


This page shows the current backend-to-frontend workflow in Stylish Cost Calculator. Use the header controls to rename strings (Wordings), open support/chat, follow the guided tours, and access Email Quote, Payment, and global settings.


Back-end flow


  1. Create or open a calculator from the dashboard.
  2. Use the header icons:
    • Wordings: rename labels without coding.
    • Tours: play the guided tour for a quick walkthrough.
    • Email Quote & Payment: configure quote emails and payment options.
    • Save/Preview: save, then click Preview to open the live front-end view.
  3. Add elements, set prices/logic, and save.


Front-end preview & embed


  • Preview: opens the live calculator with the current settings.
  • Embed: copy the shortcode or use the Gutenberg block/Elementor widget to place the calculator on a page.
  • Smart URL: use the generated link for a direct share or A/B variations.


Tips


  • Use the template loader to start from a prebuilt industry template.
  • If changes are not showing, clear cache/optimization plugins or use Compatibility Mode.

Updated on: 25/11/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!