You are browsing upcoming documentation for version 6.1 of OroCommerce, scheduled for release in 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

How to Change Offsets in Storefront 

The offsets are based on predefined multipliers with a base offset of 16px. To get the offset you need, use the spacing($size); function. The default offsets for each multiplier are the following:

Operation | Result

spacing(‘base’) | 16px

spacing(‘xs’) | 4px

spacing(‘sm’) | 8px

spacing(‘xmd’) | 10px

spacing(‘lg’) | 24px

spacing(‘xl’) | 32px

spacing(‘xxl’) | 40px

spacing(‘xxxl’) | 48px

spacing(‘huge’) | 56px

spacing(‘massive’) | 64px

spacing(‘gigantic’) | 80px

spacing(‘enormous’) | 88px

spacing(‘colossal’) | 96px

spacing(‘immense’) | 120px

To change all offsets, simply assign any value you want to the $base-spacing variable.

$base-spacing: 12px !default

To update or add a specific multiplier, merge $spacing-multipliers with your $custom-spacing-multipliers.

@use 'sass:map';

$custom-spacing-multipliers: (
    xs: .1,  // update an existing rule
    vast: 3, // add a new value

$spacing-multipliers: map.merge($spacing-multipliers, $custom-spacing-multipliers);


You have to insert this code into your own styles.scss file as described in the CSS Files Structure article.