Configurator template Since version 2.x we have renamed themes to Templates to avoid confusion with the WordPress themes. If you are still on 1.x, please read this article. You can start customizing the configurator by linking a configurator template. You can create a template in Staggs -> Templates -> New template Also make sure to select the configurator template on the product page to link the theme to the product. Staggs Templates With our new template created, we can now choose a pre-built Staggs configurator template. This template option will define the main layout of the configurator. You can also choose to build the configurator template yourselves using shortcodes, or develop your own configurator layout using hooks and filters.
You can choose from various pre-defined templates in the theme settings You can also set the main configurator view type here: Image or 3D model (pro) Template options We also have some settings for the configurator that don’t necessarily have to do with the appearance of the configurator, but more with what parts of the configurator to include and what parts to remove.
Show header and footer: shows the default theme header and footer on the configurator page. Only applicable to full page configurators. Layout: choose to show the main image on the left or right Text align: align attribute form text to left or center Borders: choose between rounded, square or circular borders. Applies to all elements inside the configurator. Show logo: shows company logo (configured in Settings -> General) Disable price: hides default WooCommerce price Disable meta: hides WooCommerce product meta, like category and SKU information. Disable tabs: hides the WooCommerce product tabs Gallery (Image)
Template height: choose to make height of configurator 100% of screen size, or use the product image to define the height of the configurator Preview type: use Stackable images to use multiple image layers. Set to single image preview if you wish to use single image per configuration Product featured image: include product featured image as base layer. Make gallery sticky: make gallery stick to side as you scroll down the options list. Generate configuration image: generates an image for the active configuration and will be saved as a single image and attached to the cart. Store configuration image: stores the generated image in the WP media library for future access. Gallery background
Background image size: only applicable when background image has been set. Add background image: optionally set background images for the product images. Gallery controls
Gallery thumbnails: optionally display gallery thumbnail images or text labels. Thumbnail align: choose to align the thumbnails to the left, center or right side of the main image. Arrow controls: optionally display slider arrows Gallery (3D) The 3D product gallery settings are part of the 3D configurator of the PRO version. You can read more about it here:Customizing the 3D configurator viewer options Color themes
Default themes You can choose from 2 default themes: light and dark. Optionally you can fill out your own colors in the custom theme option. The accent color is used for attribute item borders and button background colors. The button color is the text color of the button. Custom theme The configurator custom theme is based on a 2-color palette, with a primary color and a secondary color. You can also fill out the attribute title colors and the text color. Finally you can control the options colors separately. Set option background, text and border colors for default, hover and active states. You can also manage the icon theme to match with your color palette. Light icons are managed under ‘dark theme’, and ‘dark icons’ are managed under the default icon options. You can upload custom icons that will replace the default configurator icons. The icons are located under Staggs -> Settings -> Icons tab. Custom spacing
You can also control the spacings of the form and the attributes. First you can control the width of the form options on tablet and desktop devices The gallery width will be adjusted accordingly. CSS units should be used for all fields (e.g. 12px, 40%, 60rem, 30vw). You can also control the attribute spacing on top and bottom for desktop and mobile devices. This is the space between the attributes in your configuration form. Step density: default density has more space between the attributes. Compact density has less space between attributes. You can override this with the individual spacing options. Custom font
Next, you can choose to add a custom font. Either you override the base font of the configurator with your theme font, or you choose to load a font from Google Fonts or Adobe Typekit. Make sure you link the full script url, like this: ‘<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap” rel=”stylesheet”>’ Font family should be set as follow: “‘Roboto’, sans-serif;” Separator / steps
Separator template: choose how the separator title should be displayed. Applies to steps navigation and separator titles. Separator function: when selected it will create steps based on the separated attribute groups (instead of making them collapsible). (PRO) Step navigation: shows all the available steps on the top (PRO) Separator title: hide the separator titles (useful when step navigation is enabled). Included option label: optionally show a label when attribute items are included (have no additional cost). Leave empty to display nothing. Configurator button
Button type: add to cart (default) or request invoice Button text: text that is displayed on the cart / invoice button. Cart button display (only visible when steps are enabled): choose to show add to cart on every step or only in the final step. Sticky cart button: when enabled the button will always be visible at bottom of the screen Configurator price
Total price calculation: default calculation or formula or table price lookup Display totals: show or hide total price Total price: in button or above button with total label Total price breakdown: show options and product price separately Configurator button
Quantity input: when enabled, you can directly enter the amount of configurations you want to order PDF download: displays action to download active configuration as PDF Save configuration: displays action to generate link for active configuration to share it with other people USPs location: Only applicable when USPs are set. Display USPs underneath add to cart button or in the image preview. Custom CSS
Finally you can apply your own CSS rules to add some finishing touches if the provided customization options are not sufficient for you. Bottom line There are plenty of options to customize the configurator to your likings, starting with the template, all the way to custom colors, icons, fonts and even CSS options. If you are still not satisfied, or looking for a different template, you can always let us know. Please contact us at contact@staggs.app and we will be happy to help you out!