Configurator theme You can start customizing the configurator by linking a configurator theme. You can create a theme in Staggs -> Themes -> New theme Also make sure to select the configurator theme on the product page to link the theme to the product. Note: since version 2.0 we have renamed configurator themes to “templates“. Please check read this article if you are on version 2.x Templates With our new theme created, we can now choose the configurator template for our theme. The template of the theme will define the main layout of the configurator. You can also choose to output the configurator using shortcodes, or create your own configurator layout using hooks and filters.
You can choose from various pre-defined templates in the theme settings Change gallery position, step density, text align and borders and more: Layout: choose to show the main image on the left or right Step density: default density has more space between the attributes. Compact density has less space between attributes. 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. Product display (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 Background image size: only applicable when background image has been set. Add background image: optionally set background images for the product images. 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. 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 USPs location: Only applicable when USPs are set. Display USPs underneath add to cart button or in the image preview. Product display (3D) The 3D product display settings are part of the 3D configurator of the PRO version. You can read more about it here:Customizing the 3D configurator viewer options
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. More on that in ‘Custom Icons’. Custom Icons
You can upload custom icons that will replace the default configurator icons. The icons are located under ‘settings’ -> ‘icons’. 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;” Custom spacings
You can also control the spacings of the form and the attributes in this section. 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. 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. Settings 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. All these settings are listed in the tab ‘Settings’ on the product page of the configurable product. General
Show header and footer: shows the default theme header and footer on the configurator page. Only applicable to full page configurators. 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 Attributes
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. Totals
Total price: in button or above button with total label Cart behaviour (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 Quantity input: when enabled, you can directly enter the amount of configurations you want to order Button type: add to cart (default) or request invoice Form page: page your request invoice form is listed on Field label: label of field name where configuration text should be placed in. Button text: text that is displayed on the cart / invoice button. 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 Cart
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. 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!