Accordion-layout til temaindstillinger i Shoporama

What is accordion layout?

When a Shoporama theme has many theme options, the classic card layout with sidebar can quickly become cluttered. The Accordion layout solves this by organizing all sections into foldable panels that can be opened and closed individually. This gives the store owner a clean and focused overview - even with 15+ sections.

The Montana theme - Shoporama's latest Tailwind CSS-based theme - uses the accordion layout with a full 16 sections and is the perfect example of how it works in practice.

Accordion vs. classic layout

There are two layout options for theme settings in Shoporama:

• Classic layout - Two-column layout (9+3 columns) with Bootstrap cards and a sidebar with scroll-spy navigation. Suitable for themes with few sections.
• Accordion layout - Centered single-column layout with foldable sections, search function and localStorage. Ideal for themes with many sections and fields.

How to enable accordion layout

All you need to do is add "accordion": true to your theme's theme_settings.json file. The file is located in the root of your theme.

{ " info": "My Theme", " accordion": true, " settings": [ ... ] }

Without this line - or with "accordion": false - the classic map layout is automatically used.

Features of the accordion layout

The Accordion layout comes with a number of features that make it easy to navigate theme settings:

• Foldable sections - Each section can be opened and closed with a click. Chevron icons clearly show whether the section is open or closed.
• Search function - A search box at the top filters sections and fields in real-time. Matching text is highlighted and only relevant sections are shown.
• Remembers state - Which sections are open/closed is saved in localStorage, so the store owner doesn't have to start over on the next visit.
• Centered layout - Content is displayed in a single column (col-lg-10), giving more space for each field and removing the need for sidebar navigation.

The structure of theme_settings.json

The theme_settings.json file defines the entire theme settings structure. Here is a complete example inspired by the Montana theme:

{ " info": "Montana", " accordion": true, " features": [ " Tailwind CSS-based responsive design", " Fully customizable colors, logo and favicon", " USP bar with customizable icons in the header"], " settings": [ { " path": "general", " name": "General", " description": "Payment and shipping methods and delivery times.", "fields": [ { "path": "payment_methods", "name": "Payment methods", "description": "Comma separated list, eg: dankort,visa,mastercard", "type": "string"}, { "path": "shipping_time_in_stock", "name": "Shipping time (in stock)", " description": "Ex: 1-3 business days", " type": "string"} ] }, { " path": "theme", " name": "Theme & Colors", " description": "Colors, logo and favicon for your store.", "fields": [ { "path": "primary", "name": "Primary color", "description": "Used for text, headings and dark elements.", "type": "color", "default_value": "#111827"}, { "path": "action", "name": "Action color", "description": "Used for buttons, links and CTA elements.", "type": "color", "default_value": "#2563eb"}, { "path": "background", "name": "Background color", "description": "Page background color.", "type": "color", "default_value": "#ffffff"} ] }, { "path": "value_propositions", "name": "USP\u0027s", "description": "Up to 4 short messages in the header.", "fields": [ { "path": "text_1", "name": "USP #1 - Text", "type": "string"}, { "path": "icon_1", "name": "USP #1 - Icon", "type": "list", "values": [ { "value": "", "name": "(None)" }, { "value": "truck", "name": "Truck" }, { "value": "check", "name": "Checkmark" }, { "value": "star", "name": "Star" } ] } ] }, { " path": "shipping_alert", " name": "Shipping alert", " description": "Order before .  14 and we ship today.", "fields": [ { "path": "enable", "name": "Enable", "type": "bool"}, { "path": "time", "name": "Closing time", "description": "Time of last shipment, e.g. 14:00", "type": "string"}, { "path": "days", "name": "Shipping days", "description": "Weekday numbers: 1=Man, 7=Sun.  Ex: 1,2,3,4,5", " type": "string"} ] }, { " path": "product", " name": "Product page", " description": "Stock, variants, tabs etc.", "fields": [ { "path": "show_sku", "name": "Show item number (SKU)", "type": "bool"}, { "path": "show_stock_count", "name": "Show stock count", "description": "Show the exact number in stock.", "type": "bool"}, { "path": "enable_omnibus_price", "name": "Show pre-price according to the  Omnibus  Directive ", "description": "Show the exact number in stock.  Omnibus directive", "description": "Shows lowest price from the last 30 days as pre-price.", "type": "bool"} ] }, { "path": "newsletter", "name": "Newsletter", "description": "Sign up form in footer.", "fields": [ { "path": "enable", "name": "Show newsletter", "type": "bool"}, { "path": "title", "name": "Heading", "description": "Default:  Subscribe to our newsletter", "type": "string"}, { "path": "lead", "name": "Body", "type": "text"} ] }, { "path": "custom_code", "name": "Custom JavaScript", "description": "Add custom JavaScript code.", "fields": [ { "path": "js", "name": "Custom JavaScript", "description": "Insert at bottom of page.", "type": "text"} ] }

Available field types

Each field in a section is defined with a type property. Here are the available field types:

• string - Single text field. For short values like payment methods, URLs or delivery times.
• bool - Checkbox (on/off). Appears as a labeled checkbox. The value is stored as 0 or 1.
• color - Color picker with hex input. Supports default_value with a reset button.
• text - Large text field (textarea). For longer texts, disclaimers or JavaScript code.
• wysiwyg - Rich text editor. For formatted HTML content with WYSIWYG editing.
• image - Image upload. Displays the uploaded image with the option to delete.
• list - Dropdown menu. Requires a values array with objects that have value and name.

How to use theme settings in Smarty templates

The settings are retrieved in your Smarty templates via the $webshop->getThemeSetting() method. First parameter is the section path, second parameter is the field path:

<!-- Get a color value--><{$primary = $webshop->getThemeSetting('theme', 'primary')}><!-- Use the value in inline CSS --> <divstyle="color: <{$primary}>">Header</div><!-- Check a boolean--> <{if $webshop->getThemeSetting('product', 'show_sku')}><span>Product: <{$product->getSku()}></span><{/if}><!-- Get an image (returns an Image object)--><{$og_image = $webshop->getThemeSetting('open_graph', 'image')}>><{if $og_image && is_object($og_image)}><meta property="and:image" content="<{$og_image->getSrc(1200, 630, 'fit')}>"><{/if}>

Tips for a good structure

Here are some recommendations to get the most out of the accordion layout:

• Group logically - Group related fields in the same section. For example, all colors under "Theme & Colors" and all checkout options under "Checkout".
• Write good descriptions - Both sections and fields have a description property. Use it to explain what the setting does and give examples.
• Use default_value on colors - Color fields support default_value, which gives the store owner a reset button so they can always revert to the default color.
• Keep path names short and English - Use snake_case and English names for path fields(e.g. shipping_alert, product_card). User-friendly names belong in the name field.
• Use list type for limited choices - Instead of asking the store owner to type in icon names, give them a dropdown with predefined options.

Summing up

The Accordion layout is the recommended way to organize theme options in new Shoporama themes - especially when the theme has more than a handful of sections. It gives the store owner a better overview, faster navigation via search, and remembers user preferences between sessions. All it requires is a single line in your theme_settings.json.