Styling Examples

Below you can find examples how modify UI and layout of 3D configurator.

Disclaimer

Please note that the variables provided above are the ones officially supported by our 3D Configurator Embed Application. While it may be possible to alter other properties, we strongly recommend that you only modify those listed in this documentation.

Unofficial modifications, while seemingly effective in the short-term, might not be compatible with future updates of our application. This could lead to instability or unintended behaviours in your implementation. Therefore, if you're considering changing properties not listed in this documentation, we advise you to contact our support team for guidance. This ensures your customizations stay functional and stable with all future software updates.

Configurator dimensions

We have exposed CSS variables which provide developers the opportunity to modify the size and proportions of the 3D/2D configurator.

The following CSS variables should be set on the root of the document:

<style>
  :root {
    --mmq-configurator-container-max-height: 900px;
    --mmq-configurator-container-min-height: 375px;
    /* ...etc. */
  }
</style>

Desktop

The table below lists and describes the available CSS variables:

Name	Description
`--mmq-configurator-container-max-height`	The maximum height of the configurator and options panel. Defaults to 900px.
`--mmq-configurator-container-min-height`	The minimum height of the configurator and options panel. Defaults to 375px.
`--mmq-configurator-container-height`	The static height of the configurator. It sets the height of the side panel and canvas, which is stretched to the height of the side panel on desktop. The default formula is calc(100vh - 30px - var(--mmq-variant-ui-extra-space, 0px)). A value of 30px is used to provide some spacing from the top and bottom. If you set it to 100%, the whole configurator will have the height of the side panel (to fit all option sets), limited by the max-height.
`--mmq-variant-ui-extra-space`	This number is used in the default calculation of the configurator 3D height. It can be used to compensate for a fixed site header, for example.
`--mmq-sidepanel-width`	This variable controls the width of the side panel. By default, it is set to 379px. It works on devices wider than 1200px.
`--mmq-tablet-sidepanel-width`	This variable works similarly to the one above, but is applicable to devices with a width between 840px and 1200px. By default, it is set to 35%.
`--mmq-configurator-page-container-vertical-padding`	This variable is used for the top and bottom padding for the configurator content. It is set to 10px by default, providing some space at the top and bottom.

Mobile

To ensure CSS variables only apply to mobile styles and do not interfere with desktop settings, place all variable declarations within media queries:

<style>
  :root {
    @media (max-width: 839px) {
      --mmq-configurator-container-max-height: 900px;
      --mmq-configurator-container-min-height: 375px;
      /* ...etc. */
    }
  }
</style>

The following variables are available for mobile configurations:

Name	Description
`--mmq-configurator-wrapper-mobile-base-height`	The height of the entire embed. By default, it is set to 100vh - 80px (window height minus space for adress bar).
`--mmq-canvas-height`	The height of the 3D canvas. It must be set in px due to Babylon engine limitations. By default, it is set to half of the device height.
`--mmq-mobile-tabs-min-height`	The minimum height of the mobile tabs. By default, it is set to 115px. If the value falls below this, a scrollbar will appear in the options panel if there are more option sets.
`--mmq-configurator-wrapper-mobile-vertical-padding`	This value is used for setting some space at the top and bottom of the embed, preventing it from sticking to the device edges when the embed fills the whole screen.

For example, if you want to set the embed on mobile to be 400px high, with a 150px tall 3D canvas and 250px tall mobile tabs (options panel):

<style>
  :root {
    @media (max-width: 839px) {
      --mmq-canvas-height: 150px;
      --mmq-configurator-wrapper-mobile-base-height: 400px; /* the height of the option panel will be  calculated as 400px - 150px = 250px */
      --mmq-configurator-wrapper-mobile-vertical-padding: 0px; /* we reset the extra top and bottom padding */
      --mmq-mobile-tabs-min-height: unset; /* we need to unset minimal height of the tabs */
    }
  }
</style>

NOTE: use this link to see full size example

In case there is active Adjust to container option in the theme template, and product has tabs or related products under the configurator there is need to adjust the dimensions of the whole embed.

In our example we will create custom container that will take 100vh (with 3D configurator tabs and related).

<style>
  .container {
    height: 100vh; /* custom container */
  }

  mmq-embed {
    height: 100%;
  }

  #mmq-configurator-wrapper {
    height: calc(
      100vh - 645px
    ); /* height of the container minus the height of tabs and related with paddings. It may be different per scenario, tabs height, or when only tabs or related are present */
  }
</style>

NOTE: use this link to see full size example

Setting configurator dimensions in modals

You can change the size of the 3D configurator when the embed is loaded in a modal.

To control the height of the configurator modify following styles, so they suit the best your needs.

<style>
  :root {
    --mmq-sidepanel-width: 500px;
  }

  #mmq-configurator-wrapper {
    height: 65%;
  }
</style>

NOTE: use this link to see full size example

Spacing of tabs and related (sections beneath the 3D configurator) can be controlled by following CSS variables:

Name	Description
`--mmq-tabs-top-spacing`	Top spacing of tabs, by default it is set to 60px
`--mmq-related-with-tabs-padding-top`	Top spacing of related section, when tabs are visible, by default it is set to 57px
`--mmq-related-no-tabs-padding-top`	Top spacing of related section, when tabs are not visible, by default it is set to 57px
`--mmq-related-margin-bottom`	Bottom spacing of related section, by default it is set to 60px
`--mmq-tabs-no-related-bottom-margin`	Bottom spacing of tabs section, when there is no related section, by default it is set to 0px

<style>
  /* Secnario we have both tabs and related section */

  :root {
    --mmq-tabs-top-spacing: 15px // We are setting 15px gap from the 3D configurator
    --mmq-related-with-tabs-padding-top: 30px // distance between tabs and related section
    --mmq-related-margin-bottom: 15px; // bottom spacing after related section
  }

  /* Secnario there are no tabs active */

  :root {
    --mmq-related-with-no-padding-top: 15px /* 15px gap between 3D configurator and related section */
    --mmq-related-margin-bottom: 15px; /* bottom spacing after related section */
  }

  /* Scenario when there is no related section */

  :root {
    --mmq-tabs-top-spacing: 15px /* We are setting 15px gap from the 3D configurator */
    --mmq-tabs-no-related-bottom-margin: 15px; /* we are setting 15px bottom spacing on tabs section */
  }
</style>

Mobile tabs styles

You can override our default styles for the mobile tabs. There is exposed web component mmq-mobile-tabs where you can modify existing styles, or add new ones.

In this example we are making 3D canvas 100% of the device height and making the mobile tabs float.

<style>
  :root {
    @media (max-width: 840px) {
      --mmq-canvas-height: 100vh;
    }
  }

  mmq-mobile-tabs {
    min-height: unset;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
  }
</style>

NOTE: use this link to see full size example

Adjusting embed size with aspect ratio

Adjusting embed size when using custom aspect ratio rule is limited by the aspect ratio setting. However you can adjust the height of the embed with the following code:

<style>
  :root {
    --mmq-variant-ui-extra-space: 100px;
  }
</style>

The width of the embed will be adjusted automatically to mantain the aspect ratio, but the height will be limited to 100vh - 100px. It works for desktop and mobile devices.

NOTE: use this link to see full size example

Theme modifications

Configurator 3D theme can be customized by using CSS variables listed here;

<style>
  body {
    --mmq-accent-main: red;
    --mmq-button-color: red;
    /* ...etc */
  }
</style>

Quick icons

You can control the style of the icons (controls) visible on the canvas using the following variables:

Name	Description
`--quick-icon-button-bg`	Controls the background color of the quick icon (on-canvas icon buttons with controls). By default, it is controlled by the `--mmq-quick-icon-background` CSS variable, which uses the rgba format. If you prefer not to use the rgba format, use this variable.
`--mmq-quick-icon-background`	Controls the background color of the quick icon, it takes color value in rgba format, by default it is `46, 51, 65, 0.05`
`--mmq-quick-icon-button-icon-color`	Controls the color of the icon inside the button, by default it is `--mmq-grey-600` variable
`--mmq-quick-icon-button-font-size`	Controls the size of the svg icon inside the button, by default, it is 16px
`--mmq-quick-icon-button-width`	The width of the quick icon button, by default, it is 40px
`--mmq-quick-icon-button-height`	The height of the quick icon button, by default, it is 40px
`--mmq-quick-icon-button-border-radius`	The border radius of the quick icon button, by it is default 4px
`--quick-icon-button-bg-hover`	The hover background of the quick icon, by default it is `--mmq-grey-200` variable
`--quick-icon-button-color-hover`	The hover color of the quick icon, by default it is `--mmq-grey-800` css variable
`--mmq-quick-icon-button-disabled-opacity`	The opacity of the disabled button

<style>
  :root {
    --quick-icon-button-bg: green;
    --mmq-quick-icon-button-icon-color: white;
    --mmq-quick-icon-button-font-size: 25px;
    --mmq-quick-icon-button-width: 60px;
    --mmq-quick-icon-button-height: 60px;
    --quick-icon-button-bg-hover: blue;
    --quick-icon-button-color-hover: black;
    --mmq-quick-icon-button-disabled-opacity: 0.1;
  }
</style>

NOTE: use this link to see full size example

Basket

The basket component in Mimeeq allows you to manage items in a cart with extensive customization options. This section explains how to use CSS variables to tailor its appearance and functionality.

Basket Parts

The mmq-basket component exposes several shadow DOM parts that can be targeted for customization. These parts provide granular control over individual elements within the basket. Below is a list of the available parts:

button: Targets the basket button element.
icon: Targets the icon inside the basket button.
counter: Targets the counter element showing the number of items in the cart.
backdrop: Targets the backdrop element displayed behind the basket panel.
panel: Targets the main basket panel containing cart items and other information.

For more information about parts and how to use them, refer to the Mimeeq Documentation on Shadow DOM Parts.

Basket CSS variables

You can control key aspects of the Mimeeq Cart's style by using CSS variables. These variables include both general theme options and specific variables for customizing the basket's elements.

Generic

These variables apply to general styling aspects of the basket.

Name	Description
`--mmq-basket-z-index`	Sets the z-index for the basket backdrop.
`--mmq-basket-panel-z-index`	Sets the z-index for the cart items panel.
`--mmq-font-family`	Defines the font family for text.

Basket Button

The following variables allow precise control over the appearance and positioning of the basket button.

Name	Description
`--mmq-basket-btn-z-index`	Z-index for the basket button, ensuring proper layering relative to other elements.
`--mmq-basket-button-background`	Background color for the basket button.
`--mmq-basket-button-color`	Text and icon color of the basket button.
`--mmq-basket-button-position-bottom`	Distance from the bottom of the closest relative parent (defaults to the body).
`--mmq-basket-button-position-left`	Distance from the left edge of the closest relative parent (defaults to the body).
`--mmq-basket-button-position-right`	Distance from the right edge of the closest relative parent (defaults to the body).
`--mmq-basket-button-position-top`	Distance from the top edge of the closest relative parent (defaults to the body).
`--mmq-basket-button-radius`	Specifies the border radius for the basket button. Adjust this value when moving the button to a different side of the page.
`--mmq-basket-button-icon-size`	Size of the basket icon (default is 24px).

Basket Panel

These variables control the appearance and placement of the basket panel.

Name	Description
`--mmq-basket-panel-position-right`	Sets the right alignment for the basket panel (default is 0).
`--mmq-basket-panel-position-left`	Sets the left alignment for the basket panel (default is unset).
`--mmq-basket-panel-position-top`	Sets the top alignment for the basket panel (default is 0).
`--mmq-basket-panel-position-bottom`	Sets the bottom alignment for the basket panel (default is 0).
`--mmq-basket-header-content-flow`	Defines the content flow using `flex` for the basket panel header. Useful for altering the layout when switching the basket’s side.

Basket Additions and Discounts

You can manage the colors of additions and discounts displayed in the basket panel footer using the following variables.

Name	Description
`--mmq-contact-form-footer-discount-value-color`	Defines the color for discount rule items.
`--mmq-contact-form-footer-addition-value-color`	Defines the color for addition rule items.

<style>
  :root {
    --mmq-contact-form-footer-addition-value-color: green;
    --mmq-contact-form-footer-discount-value-color: red;
  }
</style>

Note: Use this link to view a full example demonstrating these variables in action.

Basket Positioning

Positioning the basket on your website can be customized by modifying specific CSS variables. For example, to display the basket on the left side of the page, use the following code:

<style>
  :root {
    /* Adjust position for the basket button */
    --mmq-basket-button-radius: 0px 4px 4px 0;
    --mmq-basket-button-position-right: initial;
    --mmq-basket-button-position-left: 0;

    /* Adjust position for the basket side panel */
    --mmq-basket-panel-position-right: unset;
    --mmq-basket-panel-position-left: 0;

    /* Reverse header layout for title and close icon */
    --mmq-basket-header-content-flow: row-reverse;
    
    --mmq-basket-btn-z-index:1000; /* Ensures the button is above other elements */
  }
</style>

Note: View a full example using this link.

Floating Basket Button

Use the following CSS variables and shadow DOM parts to position the basket button using absolute instead of fixed. This allows the button to move relative to its nearest positioned ancestor rather than remaining fixed to the viewport.

<style>
  .mmq-basket::part(button) {
    position: absolute; /* Position relative to nearest positioned ancestor */
  }
</style>

Explanation

Shadow DOM Parts: The ::part(button) selector targets the basket button element inside the shadow DOM for direct styling.

This setup ensures the basket button respects its container's boundaries while allowing precise positioning and customizations through shadow DOM part selectors.

Note: View a full example using this link.

Adjusting Basket Button Size

To resize the basket button and its icon, modify the following variables:

<style>
  :root{
    --mmq-basket-button-icon-size:32px; /* Enlarges the basket icon */
    --mmq-basket-button-background:#8078d7; /* Custom background color for the button */
    --mmq-basket-button-color:#f55; /* Custom text and icon color for the button */
  }

  .mmq-basket::part(button){
    width:40px; /* Custom width for the button */
    height:48px; /* Custom height for the button */
  }
</style>

These variables let you adjust the button’s dimensions and ensure its design aligns with your website’s theme.

Note: View a full example using this link.

For more detailed customization options, refer to the CSS Customization Guide.

Price Field Manipulation

You can add suffix to the price field in the 3D configurator by adding following styles:

<style>
  mmq-variant-ui::part(summary-box-price)::before /* dekstop price style  */
  mmq-variant-ui::part(price-value-field)::before /* mobile price style */ {
    content: '*';
  }
</style>

In the same way you can add suffix to the price.

::part(summary-box-price) is responsible for displaying desktop price ::part(price-value-field) is responsible for displaying mobile price

<style>
  /* Prefix the price */

  mmq-variant-ui::part(summary-box-price)::before,
  mmq-variant-ui::part(price-value-field)::before {
    content: '*';
  }

  /* Suffix the price */

  mmq-variant-ui::part(summary-box-price)::after,
  mmq-variant-ui::part(price-value-field)::after {
    content: '*';
  }
</style>

You can also do any other modifications to this elements that are possible by CSS styles modifications. There is also exposed ::part(price-container) which is responsible for displaying and positioning price on mobile.

<style>
  /* Change color of the price on desktop */

  mmq-variant-ui::part(summary-box-price) {
    color: red;
  }

  /* Change color of the price on mobile */

  mmq-variant-ui::part(price-value-field) {
    color: red;
  }

  /* Change price position on mobile */
  mmq-variant-ui::part(price-container) {
    bottom: unset;
    top: 40px;
  }
</style>

NOTE: use this link to see full size example

Tooltips

You can customize tooltips in the following way:

<style>
  div[data-tippy-root] {
    /* Set background for the tooltip */
    --mmq-primary-main: #000;

    /* Modify styles of the tooltip */
    .tippy-box[data-theme='configurator'] {
      padding: 20px;
      line-height: 20px;
      border-radius: 20px;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.15em;
    }

    .tippy-content {
      padding: 0;
    }
  }
</style>

NOTE: Tooltips are not visible on mobile view, which can load with codepen. Use this link to see full size example

You can also disable tooltips by simply adding this styles

<style>
  div[data-tippy-root] {
    display: none;
  }
</style>

Disclaimer​

Configurator dimensions​

Desktop​

Mobile​

Setting configurator dimensions with adjust to container option and tabs or related products visible​

Setting configurator dimensions in modals​

Desktop tabs and related sections spacing​

Mobile tabs styles​

Adjusting embed size with aspect ratio​

Theme modifications​

Quick icons​

Basket​

Basket Parts​

Basket CSS variables​

Generic​

Basket Button​

Basket Panel​

Basket Additions and Discounts​

Basket Positioning​

Floating Basket Button​

Explanation​

Adjusting Basket Button Size​

Price Field Manipulation​

Tooltips​

Disclaimer

Configurator dimensions

Desktop

Mobile

Setting configurator dimensions with adjust to container option and tabs or related products visible

Setting configurator dimensions in modals

Desktop tabs and related sections spacing

Mobile tabs styles

Adjusting embed size with aspect ratio

Theme modifications

Quick icons

Basket

Basket Parts

Basket CSS variables

Generic

Basket Button

Basket Panel

Basket Additions and Discounts

Basket Positioning

Floating Basket Button

Explanation

Adjusting Basket Button Size

Price Field Manipulation

Tooltips