Skip to main content

About - Vision/mission

Merchant Developer

Displays a heading with a grid of icon-topped cards for sharing your company's vision, mission, and values.

This section presents your company's vision and mission as a responsive grid of cards, each with a chosen icon, a title, and rich-text body copy. A section heading sits above the grid, and the entire section can be hidden with a single toggle.

storefront previewResult
About - Vision/mission
About - Vision/mission
storefront previewSettings
Vision & Mission section settings - heading and show section (cards are built from Item blocks below)
Vision & Mission section settings - heading and show section (cards are built from Item blocks below)

How to use it​

For merchants

In the Shopify theme editor, add or open this section, then:

  1. In the theme editor, open the page and add or select the Vision & Mission section.
  2. Enter a Heading such as "Our Vision & Mission" (leave blank to hide the heading).
  3. Add a Vision / mission item block for each card you want to show.
  4. For each block, pick an Icon, write a Title, and add your Text.
  5. Choose a Color scheme for the section, then keep Show section checked to make it visible.
  6. Save your changes.
tip

Card icons use the theme's accent color, so they match your global branding automatically.

tip

Leaving Show section unchecked hides the whole section without deleting your content.

tip

Add two or three items (e.g. Vision, Mission, Values) for a balanced grid layout.

Settings reference​

SettingTypeDefaultWhat it does
Color schemecolor_schemescheme-1Sets the background and text colors for the section.
Show sectioncheckboxtrueToggles whether the entire section renders on the page.
HeadingtextOur Vision & MissionTitle shown above the card grid; hidden when left blank.

Repeatable Vision / mission item blocks, each with an Icon (16 choices: Eye, Target, Star, Heart, Gem, Shield, Leaf, Award, Sparkle, Globe, Lightbulb, Handshake, Community, Shipping, Clock, Check), a Title, and rich-text Text. App blocks are also supported.

Item blocks​

Each card is a repeatable Vision / mission item block. Select a block to pick its Icon and write its Title and Text.

storefront previewSettings
Item block - icon, title and rich-text body
Item block - icon, title and rich-text body
SettingTypeDefaultWhat it does
IconselecteyeOne of 16 preset line icons shown at the top of the card.
TitletextOur VisionCard heading; hidden when blank.
TextrichtextDescribe what you aspire to achieve as a company.Card body copy; hidden when blank.

Developer notes​

Developer note

Loads about-main.css and renders section-color-scheme at the top; the section wrapper id is AboutVM-{{ section.id }}.

  • Icons are drawn via the about-icon snippet, passing block.settings.icon; the icon color is set inline from settings.color_accent.
  • Card borders use rgba(var(--color-text), 0.1), so they adapt to the active color scheme.
  • The @app block type is supported and rendered directly with {% render block %}.
<span class="about-vm-card__icon">{% render 'about-icon', icon: block.settings.icon %}</span>
<h3 class="about-vm-card__title">{{ block.settings.title }}</h3>
<div class="about-vm-card__text">{{ block.settings.text }}</div>