Skip to main content

Config

The config.json file defines the global configuration of your Prodyflow template, including styles, SCSS, JS, dynamic blocks, the engine scripts, the money format and the look of the payment widgets.

Below is an example and explanation of each section.

📄 Example config.json​

{
  "settings": {
    "style": [
      { "type": "color", "name": "Primary color", "var":"primary" },
      { "type": "color", "name": "Hover color", "var":"hover" },
      { "type": "color", "name": "Seconder color #1", "var":"grey" },
      { "type": "color", "name": "Seconder color #2", "var":"light_grey" },
      { "type": "color", "name": "Seconder color #3", "var":"lighter_grey" },
      { "type": "color", "name": "Background", "var":"background" },
      { "type": "color", "name": "Color", "var":"font_color" },
      { "type": "font",  "name": "Font family", "var":"font_family" }
    ]
  },
  "global_dynamic_blocks": {
    "content_for_infobox": {
      "name": "Infobox"
    }
  },
  "scss": [
    {
      "input": "app.scss",
      "output": "app.css",
      "variables_file": "variables.scss",
      "include_paths": ["vendor", "vendor/swiper", "vanilla-cookieconsent/dist", "basic", "components","layout","pages","parts"]
    },
    {
      "input": "critical.scss",
      "output": "critical.css",
      "include_paths": ["vendor", "vendor/swiper", "vanilla-cookieconsent/dist", "basic", "components","layout","pages","parts","critical"]
    }
  ],
  "js": [
    {
      "input": ["app.js"],
      "output": "app.js"
    }
  ],
  "post_minify_css": true
}

⚙️ Settings​

The settings object allows you to define global style and font variables that will be available throughout the template.

  • type: The type of variable (color, number, or font)
  • name: User-friendly display name
  • var: Variable name used in SCSS (variables.scss)

Example:

 {"type": "color", "name": "Primary color", "var":"primary" }
$primary: #023c89 !default;

This defines a primary color variable for your template SCSS.

Global Dynamic Blocks​

The global_dynamic_blocks section defines reusable content blocks available across all pages. Those blocks can be edited by the block editor, so it is a good fit for sidebars, info-boxes and other blocks that visible in all pages but you want them to be editable by the block editor.

Example:

{
  "content_for_infobox": {
    "name": "Infobox"
  }
}
{{ content_for_infobox | raw }}

This creates a dynamic block called Infobox.

💻 SCSS Compilation​

The scss array defines input and output SCSS files, variable files, and include paths.

input: SCSS source file

output: compiled CSS file

variables_file: optional variables file to include

include_paths: folders to resolve @import paths

Example:

{
"input": "app.scss",
"output": "app.css",
"variables_file": "variables.scss",
"include_paths": ["vendor", "components", "layout"]
}

🟢 JS Compilation​

The js array defines JavaScript entry files and their output.

Example:

{
"input": ["app.js"],
"output": "app.js"
}

⚡ Post Processing​

post_minify_css: true → automatically minifies your CSS after compilation for faster loading.

🌍 Default locale​

default_locale is the language code of the texts written in the templates (the default('...') texts, see Theme texts). It is used when a text does not name its language itself. Without it the language is hu.

{ "default_locale": "en" }

📦 Engine scripts​

The engine has a few ready-made modules that are not part of its app.js (it runs on every page of every theme). A theme opts in to the ones it needs with engine_scripts; the engine adds the bundle to the page head. Unknown names are ignored.

{ "engine_scripts": ["storefront.js", "chat.js"] }
BundleWhat it gives
storefront.jsThe cart drawer and the add-to-cart buttons, switching the variant on the product page (data-pdp-* markup) and the variant values on list cards.
chat.jsThe webshop chat. All the logic is in the engine (session, who sees which conversation, sending, live answers); the theme gives the panel markup with data-chat-* hooks and the CSS. The chat exists only when the sale channel's show_chat is on (webshop.sale_channel.show_chat): render the panel only then.

A theme that carries its own copy of these modules must not list the bundle, or the module runs twice.

💶 Money format​

money sets how every price is formatted: in Twig pages, in the JSON API and in the browser (money filter, window.MONEY_FORMAT).

KeyDescription
group"nbsp": thousands are separated by a non-breaking space in every language, also the four-digit amounts (Hungarian leaves 4250 ungrouped otherwise).
trim_zero_decimalstrue: a whole amount has no decimals (239 RON, not 239,00 RON). HUF never has decimals.
{ "money": { "group": "nbsp", "trim_zero_decimals": true } }

Without money the locale's own format is used.

🛒 Checkout options​

checkout has two options for the delivery method list of the checkout (cart.twig):

KeyDescription
collapse_methods_on_choicetrue: the list of methods (and the address) folds to the chosen one after the customer's click. The automatic selection never folds anything.
keep_methods_opentrue: when several couriers fit the address and the sale channel groups its delivery methods, the list stays open for the customer to choose from.
{ "checkout": { "collapse_methods_on_choice": true, "keep_methods_open": true } }

💳 Payment look​

payment_look styles the widgets the payment apps draw (card fields, wallet buttons), so they match the theme. Every block is optional; without it the app's own default look is used.

BlockAppOptions
stripe_cardStripe card fieldsappearance (a Stripe Appearance object), hide_country (the country field is hidden, the billing address' country is sent), secured_by (a "Secured by Stripe" line under the fields)
stripe_expressStripe Apple Pay / Google Paybutton_height (number), border_radius, button_type and button_theme (objects with applePay and googlePay)
revolut_cardRevolut card fieldsstyles (the Revolut card field styles: default, invalid...), secured_by
revolut_buttonRevolut Pay, Apple / Google Pay (Revolut)radius ("round", ...), height, height_wide (for a button in the wide place of the order button)
{
  "payment_look": {
    "revolut_button": { "radius": "round", "height": "52px", "height_wide": "60px" },
    "stripe_card": { "secured_by": true, "hide_country": true, "appearance": { "theme": "stripe", "labels": "floating" } }
  }
}

The same options are used on the checkout and on the payment page of an unpaid order (/payment/{id}).

🔒 Scroll lock​

On touch devices an open layer with a field (a search layer, a dialog) locks the page while it is open, and keeps the layer still under the on-screen keyboard. The engine's own layers do this already. A theme adds its layers with scroll_lock:

KeyDescription
htmlClasses on <html> that mean "a layer with fields is open"
bodyClasses on <body> that mean the same
skipSelectors of fixed elements that must not be moved (a bottom dock, a browser-bar colour edge). [data-no-pin] always skips.
{ "scroll_lock": { "body": ["vv-search-open", "vv-ship-open"], "skip": [".vv-dock"] } }

This file is the central configuration for your template. Adjust it to change theme colors, include/exclude SCSS or JS files, or define new dynamic blocks.