Mobile settings
Using the "Mobile settings" block, you can apply changes to the mobile mode regardless of the desktop settings.
Tip: To add a block, the "Image with text overlay" section is required. Press "Add block" and choose the one in Theme Blocks. Drag and drop the block to the desired placement in a section.
In this block, you can select an image for mobile individually. Otherwise, the same image as for the desktop will be shown on mobile view. Press on "Select image" to upload the one you need. The recommended image ratio is two-to-one (width-to-height respectively).
Check the "Show image overlay" option to display the color overlay of the image. This option works with the configured settings of the image overlay in the section. Find more details here.
Text
Here you can change the "Heading size" from "Same as on desktop" to one of the options: "Large", "Medium", or "Small".
If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Text alignment" drop-down.
Layout
The "Height" of an image can be changed by operating one of the options:
"Same as on desktop". Choose the option to apply the same settings as on the desktop set in the main section.
"Adapt to image". Displays the image in its original aspect ratio.
"Fullscreen". Set this option to show an image on the full screen.
"Fullscreen without header". Using this option, media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
"Proportion in %". Select the option to adjust the image height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%.
"Proportion in %" indicators:
*100% = Square image
*Less than 100% = Landscape
*More than 100% = Portrait
*For an ideal video aspect ratio (16:9), set the proportion to 56%.
"Fixed in px". This option helps to change image size in pixels by setting the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
The "Text position" can be placed "Below image", "Over the image, top", "Over the image, middle", or "Over the image, bottom". Select the desired option in the drop-down list.
In the following examples, you can view how each option might be displayed on mobile:
Last updated
