Important

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);

Note

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