Skip to main content

Universal Section Settings

Most sections in Mind end with the same two groups of settings: Appearance and Padding. They control the color scheme, what sits behind the section's content, and how much space the section takes above and below. You find them at the bottom of the section's settings panel in the theme editor, after the settings that are specific to that section. A handful of sections add a third shared group, Separator, that draws a line along the section's edge.

settings-section-settings.webp

note

Mind sections have no width setting of their own. Content follows the Page width and Page side margin you set in Online Store > Customize > Theme settings > Layout, so every section lines up on the same grid.

Sections that float over the page or live in the header rather than in the page body have their own layout settings instead of this set. These are the Header, Announcement bar, Predictive search, Mega menu collections, the four popups, Cart mini, Quick view, and Product compare modal. The Apps section has a single margin setting. The slideshow-style heroes (Hero carousel, Banner slideshow, Hero banner showcase) and Image scroll horizontal manage their own height and background, and several hero banners skip the Padding group because they size themselves to the screen.

Appearance​

  • Color scheme: Pick one of the color schemes defined in Theme settings > Colors. The scheme sets the section's text, background, button, and accent colors.
  • Background type: Choose what sits behind the section's content. Most sections offer Color and Gradient. Banner-style sections such as Banner image, Page title, Search, and Main password also offer Image, and a few banners add Video. The settings below only appear when the matching type is selected.
  • Background color: Pick a color role from the active color scheme (Primary, Secondary, Tertiary, Background, Gradient background, Foreground, Foreground 2, Layer 1 to Layer 4, Status 1 to Status 5), or Custom. The default is Background.
  • Custom background color: Pick any color, with alpha, when Background color is set to Custom.
  • Background gradient: When Background type is Gradient, choose one of the 13 built-in gradients (Ember arch, Ember arch soft, Sunrise sweep, Ember spotlight, Ember rise, Ember bloom, Ember glow, Ember focus, Ember halo, Ember dawn, Ember beam, Ember corner, Ember orb) or Custom.
  • Custom gradient: Build your own linear or radial gradient when Background gradient is Custom.
  • Sticky gradient: Pins the gradient to the viewport at full height while the section scrolls, so the colors stay in place as the content moves over them.
  • Device: On sections with an image background, switch between the desktop and mobile image without leaving the panel.
  • Background image desktop: The image shown on desktop screens.
  • Background image mobile: An optional image for mobile screens. Leave it empty to reuse the desktop image.
  • Use parallax: Move the background image or video slower than the page as you scroll.
  • Video: On sections with a video background, pick a video from your store's files.
  • Background overlay: Lay a Color or Gradient over an image or video background so text stays readable, or choose None.
  • Overlay color: The overlay color, with alpha. The default is black at 15% opacity.
  • Overlay gradient: A gradient overlay, used when Background overlay is Gradient.

Some card-like sections, such as Banner image, add Corner radius (from None to Extra extra large) and a Border with its own width, color, and opacity to this group.

Padding​

  • Device: Switch between the desktop and mobile padding values.
  • Inherit desktop value: On mobile, reuse the desktop padding. Turn it off to set separate mobile values.
  • Top: Space between the top edge of the section and its content. On most sections the range is 0px to 200px in 2px steps. The default depends on the section.
  • Bottom: Space between the content and the bottom edge of the section, with the same range.
  • Left and Right: The generic Section, Image banner, and Mobile tab navigator also let you pad the sides.
tip

Padding is the quickest way to tighten or loosen the rhythm of a page. Set the same Top and Bottom values on neighbouring sections so the gaps between them stay even. For one gap across the whole store, use Spacing between sections in Theme settings > Layout instead.

Separator​

Collapsible content, Featured collection, Image slider, Image with text about, Logo list, and Shop the look include a Separator group that draws a thin line along the section's edge.

  • Line: Choose None, Top, Bottom, or Top and bottom.
  • Thickness: The line's thickness, from 0px to 10px in 0.5px steps. The default is 1px.
  • Color: Use Current color (the section's text color), a color role from the active scheme, or Custom.
  • Opacity: Fade a scheme color from 5% to 100%.
  • Custom color: Pick any color, with alpha, when Color is Custom.

Visibility​

Sections only appear in the theme editor where they make sense. Each section declares where it can be added or where it is hidden, and the editor applies those rules for you:

  • Header, Announcement bar, Predictive search, and the four mega menus only appear in the Header group. Footer only appears in the Footer group.
  • Floating sidebar and Mobile tab navigator only appear in the Features group, and the four popup sections only in the Popup group.
  • Some sections are tied to templates. Hero banner cover, Hero banner showcase, and Service grid can only be added to pages; Banner with card to pages and collections; Collection stack list to collections; Products scroll showcase to collections and pages; Related products and Service detail to products; Recently viewed to products and pages; and Main password to the password page.
  • Breadcrumb and Page title cannot be added to the homepage.
  • Regular content sections are hidden from the header, footer, features, overlay, and popup groups, so they can only be placed in the page body. Custom Liquid is the exception: it is only hidden from the popup group.

You do not need to change anything for this to work. If a section is missing from the Add section list, you are on a page or in a group where that section is not allowed. See the Overview for the list of section groups.