Skip to main content

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:

NameDescription
--mmq-configurator-container-max-heightThe maximum height of the configurator and options panel. Defaults to 900px.
--mmq-configurator-container-min-heightThe minimum height of the configurator and options panel. Defaults to 375px.
--mmq-configurator-container-heightThe 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-spaceThis 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-widthThis 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-widthThis 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-paddingThis 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:

NameDescription
--mmq-configurator-wrapper-mobile-base-heightThe height of the entire embed. By default, it is set to 100dvh (device window height) to accommodate the dynamic iOS address bar.
--mmq-canvas-heightThe 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-heightThe 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-paddingThis 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:

NameDescription
--mmq-tabs-top-spacingTop spacing of tabs, by default it is set to 60px
--mmq-related-with-tabs-padding-topTop spacing of related section, when tabs are visible, by default it is set to 57px
--mmq-related-no-tabs-padding-topTop spacing of related section, when tabs are not visible, by default it is set to 57px
--mmq-related-margin-bottomBottom spacing of related section, by default it is set to 60px
--mmq-tabs-no-related-bottom-marginBottom 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: 100dvh;
}
}

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:

NameDescription
--quick-icon-button-bgControls 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-backgroundControls 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-colorControls the color of the icon inside the button, by default it is --mmq-grey-600 variable
--mmq-quick-icon-button-font-sizeControls the size of the svg icon inside the button, by default, it is 16px
--mmq-quick-icon-button-widthThe width of the quick icon button, by default, it is 40px
--mmq-quick-icon-button-heightThe height of the quick icon button, by default, it is 40px
--mmq-quick-icon-button-border-radiusThe border radius of the quick icon button, by it is default 4px
--quick-icon-button-bg-hoverThe hover background of the quick icon, by default it is --mmq-grey-200 variable
--quick-icon-button-color-hoverThe hover color of the quick icon, by default it is --mmq-grey-800 css variable
--mmq-quick-icon-button-disabled-opacityThe 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 CSS variables

You can control some styles of Mimeeq Cart by using CSS variables. Aside from default theme variables we also expose few basket specific ones

Generic

NameDescription
--mmq-basket-z-indexZ index of basket backdrop
--mmq-basket-panel-z-indexZ index of panel with cart items
--mmq-font-familyFont family to be used

Basket button

NameDescription
--mmq-basket-btn-z-indexZ index of button
--mmq-basket-button-button-backgroundBackground color
--mmq-basket-button-button-colorText color
--mmq-basket-button-position-bottomDistance from bottom of the closest relative parent (by default body)
--mmq-basket-button-position-leftDistance from left edge of the closest relative parent (by default body)
--mmq-basket-button-position-rightDistance from right edge of the closest relative parent (by default body)
--mmq-basket-button-position-topDistance from top of the closest relative parent (by default body)
--mmq-basket-button-radiusBorder radious of the basket button, by default 4px 0px 0px 4px. Needs to be changed when swiching the side where basket button is being displayed
--mmq-basket-button-icon-sizeSize of the basket icon (by default 24px)

Basket Panel

NameDescription
--mmq-basket-panel-position-rightPosition of the basket panel, (by default 0)
--mmq-basket-panel-position-leftPosition of the basket panel, (by default unset)
--mmq-basket-panel-position-topPosition of the basket panel, (by default 0)
--mmq-basket-panel-position-bottomPosition of the basket panel, (by default 0)
--mmq-basket-panel-position-bottomPosition of the basket panel, (by default 0)
--mmq-basket-header-content-flowContent flow usign flex of the basket panel header. Useful when switching side where is the basket placed. (By default row)

Basket positioning

You can control basket widget position by modifying the CSS styles.

To display basket on the right side of the website use the following code:

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

/* Position of the basket side panel */
--mmq-basket-panel-position-right: unset;
--mmq-basket-panel-position-left: 0;

/* Flow of the title and close icon in the basket panel header */
--mmq-basket-header-content-flow: row-reverse;
}
</style>

NOTE: use this link to see full size example

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>