You have various options to optimize your cart builder order form for use on mobile devices like smartphones and tablets.
Show and hide components
An easy method to keep content streamlined on mobile devices is to show and hide components. To do this, add each component twice and optimize them separately for desktop and mobile views. Depending on the screen type, only the corresponding content will be displayed while the others are hidden.
-
Add a component to your cart builder order form.
-
Click on the duplicate icon of the component to insert a copy of the component below it.
-
Configure the two components so that one is only displayed on desktop devices and the other is only displayed on mobile devices. See show and hide page elements for more information.
-
Optimize the components for the respective view. Use the options below for the mobile view.
-
Repeat this for all components in your order form.
Hide product images
In the product list component, you will find the checkbox hide product images on mobile devices. Check this box so that product images are not displayed on mobile devices. This way, the space on small screens is better used to display text.
Adjust font size
In components where you can set the font size, you can additionally set the font size for mobile devices.
-
Click on the mobile icon in the cart builder header to enable the mobile view. This way, you can see changes directly.
-
Click on the gear icon of an inserted component. The settings sidebar will be displayed.
-
If supported by the component, there are fields for font size headings - mobile and/or font size - mobile.
-
To activate the setting, click the blue button below edit mobile font size. A slider or a dropdown list for fixed values will be displayed.
-
To deactivate the setting, click the red button to the left of the slider or dropdown list. The blue button will be displayed again. When the setting is deactivated, the font size values of the desktop view will be applied to mobile devices.
-