Layout Settings

The Layout Settings in the Materia theme allow you to control the overall structure, shape, and responsiveness of your storefront. These options give you full control over how your store looks across different screen sizes and languages.

Rounded Corners

Enable Rounded Corners

Toggle this setting on to apply rounded corners to various UI elements like buttons, cards, inputs, and containers. This creates a softer, more modern visual style for your storefront.

Note: Rounded corners may not apply to certain custom sections or components that have specific styling rules.

Rounded Corner Radius

Set the radius (in pixels) to determine how rounded the corners should appear.

Example:

  • 0 = sharp, square corners

  • 5–10 = slightly rounded

  • 20+ = fully rounded/pill-shaped

Default: 1

Use this setting to align the store’s overall shape and feel with your brand identity.

Container Widths

General Fluid Container Width

Controls the maximum width for elements using fluid layout — sections that stretch to fill the entire screen width while maintaining proper margins.

Default: 1490px Tip: Decrease for tighter designs, increase for wide-layout designs.

General Page Width

Defines the maximum width for your store’s content on non-fluid layouts. This applies to elements like text blocks, image grids, or forms.

Default: 1490px Purpose: Ensures content remains readable and well-balanced on all screen sizes — from small laptops to wide monitors.

RTL (Right-to-Left) Support

Enable RTL Mode

Enable this toggle to switch your entire theme layout to right-to-left text direction, used by languages such as Arabic, Hebrew, Urdu, and others.

When enabled:

  • All text, buttons, and layouts will automatically flip

  • Horizontal elements like carousels and icons adjust direction

  • Improves readability and usability for RTL speakers

RTL Language Codes

Enter language codes (comma-separated) to define which languages trigger RTL mode.

Examples:

  • ar for Arabic

  • he or iw for Hebrew

  • ur for Urdu

  • ug for Uyghur

Default input: iw,he,ur,ug,ar

📌 The theme will detect the store’s active language and apply RTL if the code matches one listed here.

PreviousFaviconNextTypography

Last updated