# Common section settings
Motrix sections are built from the same set of parts, so the same groups turn up again and again. Rather than repeating them on every section page, they are documented here. Each section's own page covers what is specific to it — its content settings, its blocks, and anywhere its defaults or behavior differ from what follows.
Not every section has every group. A section with no carousel has no Carousel settings; one with a fixed layout has no Columns. Use this page to understand a group you have found, not as a checklist of what to expect.
## Layout
### Container
How wide the section's content is allowed to be.
| Option | What it does |
| ---------- | ------------------------------------------------------------------------------- |
| **Fixed** | Keeps the content inside your page width, lined up with the rest of the store. |
| **Full** | Lets the content span the screen, edge to edge. |
| **Custom** | An exact width you set, narrower than the page. Only on sections that offer it. |
**Best practice**: keep most sections on Fixed. A page where every section lines up on the same left edge reads as designed; one where sections alternate between full and fixed reads as unfinished. Save Full for a section that is meant to interrupt — a hero, a photograph, a band of color.
### Columns
How many items sit across a row. The setting is usually labelled Desktop columns or just Columns, and it applies to the largest screens. Below that, Motrix reduces the count so items never get too narrow to read — typically to four columns from 1200 px and three below that.
### Gaps
**Horizontal gap** is the space between columns and **Vertical gap** the space between rows, each 0–100 px, with separate values for mobile. Sections showing a carousel often hide the vertical gap, since there is only ever one row.
## Appearance
| Option | What it does |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Color scheme** | Applies one of your theme [color schemes](https://docs.foxecom.com/motrix-theme/theme-settings/colors) to the section — background, text, borders, and buttons together. |
| **Borders** | None or Solid. The three settings below appear once a border is on. |
| **Border width** | Thickness, 0–10 px. |
| **Border opacity** | How strong it appears, 0–100%. The color itself comes from your color scheme. |
| **Border radius** | Rounds the section's corners, 0–32 px. |
**Best practice:** change color schemes rather than individual colors. A scheme carries matching text, border, and button colors, so switching one keeps the section readable; picking colors section by section is how a store ends up with twelve shades of the same gray.
## Padding
Space inside the section, around its contents. Choose Desktop or Mobile first, then set the values for that device — the selector only changes which sliders you are editing, not how the section renders.
Left and right sliders only appear when Container is set to Full. On Fixed and Custom the page width already provides the side margins.
## Animation
How the section enters as shoppers scroll to it. Sections usually separate the heading from the items, so each can move at its own moment.
| Option | What it does |
| --------------------------- | -------------------------------------------------------------------------------------------------------- |
| **Heading animation** | The entrance for the section's heading: none, fade in, fade up, fade down, or slide in from either side. |
| **Delay** | How long to wait before it starts, 0–2000 ms. |
| **Animate in sequence** | The same choice for the cards or slides below the heading. |
| **Reveal items one by one** | Items appear one after another rather than together. |
The whole group is hidden while animations are switched off in Theme settings > [Animations](https://docs.foxecom.com/motrix-theme/theme-settings/animations). Your choices are kept and come back when you turn it on again.
## Custom columns
Sets how many columns are shown at each screen size, instead of letting the theme decide. It sits under Advanced on the sections that support it.
### What is a breakpoint?
A breakpoint is a screen width at which the layout changes to suit the device. Motrix has five, and they are the same everywhere in the theme.
| Breakpoint | Applies from | Typical device |
| ---------- | -------------- | :------------- |
| mb | Below 768 px | Phones |
| md | 768 px and up | Tablets |
| lg | 1024 px and up | Small laptops |
| xl | 1200 px and up | Desktops |
| xxl | 1440 px and up | Large monitors |
Each breakpoint applies from its width upward until the next one takes over. A screen 1100 px wide is using lg: past 1024 but not yet 1200. A size you leave out falls back to the one below it.
### How to set it up
1. In the section supports this setting, navigate to **Advanced > Custom columns**, write a breakpoint and a number for each size you want to set.
2. Use the format breakpoint\:number, separating pairs with commas.
*Example:* mb:1, md:2, lg:3, xl:4, xxl:5
Phones — 1 column
Tablets — 2 columns
Small laptops — 3 columns
Desktops — 4 columns
Large monitors — 5 columns
You only need the sizes you want to change. lg:4 on its own is valid — every other size keeps what it had.
Leave the field empty to go back to the theme's own column settings.
### Where you can use it
Custom columns appears under Advanced on these sections:
* [Collection list](https://docs.foxecom.com/motrix-theme/theme-sections/collection-list)
* [Collection tabs](https://docs.foxecom.com/motrix-theme/theme-sections/collection-tabs)
* [Featured collection](https://docs.foxecom.com/motrix-theme/theme-sections/featured-collection)
* [Icon boxes](https://docs.foxecom.com/motrix-theme/theme-sections/icon-boxes)
* [Media gallery](https://docs.foxecom.com/motrix-theme/theme-sections/media-gallery)
* [Product bundle: Choose](https://docs.foxecom.com/motrix-theme/theme-sections/product-bundle-choose)
* [Product bundle: Gradation](https://docs.foxecom.com/motrix-theme/theme-sections/product-bundle-gradation)
* [Product recently viewed](https://docs.foxecom.com/motrix-theme/product-page/recently-viewed-products)
* [Product recommendations](https://docs.foxecom.com/motrix-theme/product-page/product-recommendations)
* [Product tabs](https://docs.foxecom.com/motrix-theme/theme-sections/product-tabs)