Skip to main content

​
What It Does

The About section creates a visually balanced split-screen layout featuring an image on one side and your brand story on the other. Choose between two style variations and customize the layout to create compelling about pages, team introductions, or brand story sections.

​
Getting Started

1

Add the Section

Add the About section to your About page or any page template where you want to share your story
2

Choose Your Style

Select between Style 1 (minimal) or Style 2 (with background) to match your aesthetic
3

Add Content

Write your heading and story content using the rich text editor for formatting flexibility
4

Upload Image

Add an image (recommended 1440x1200px) that represents your brand, team, or story

​
Settings

Type: Select dropdown
Options: Style 1, Style 2
Default: Style 1Choose between two visual style variations for the split-screen layout.

​
Style 1 (Minimal)

Clean split-screen layout with image and content on simple background. Content appears directly on page background color. Ideal for modern, minimalist aesthetics.Best for:
  • Modern, clean brands
  • Photography-first layouts
  • Minimalist design systems
  • When image is the primary focus

​
Style 2 (With Background)

Content side has a subtle background color or treatment distinguishing it from the image side. Creates more visual separation between content and image.Best for:
  • Need for content emphasis
  • Complex backgrounds
  • Hierarchical visual distinction
  • Traditional or classic aesthetics
Switching Styles: Styles maintain the same content but render differently. You can switch between them without losing content to preview both options.
Type: Checkbox
Default: Unchecked (image left, content right)Swap the position of the image and content columns.
  • Unchecked (Default): Image on left, content on right
  • Checked: Content on left, image on right

​
When to Flip

Keep Default (Image Left):
  • Standard reading flow (Western audiences read left-to-right, encounter image first)
  • Image is your primary attention-grabber
  • Multiple sections on page (alternate flip for visual variety)
Use Flip (Content Left):
  • Text is more important than imagery
  • When you have multiple about sections (alternate placement)
  • Design balance with surrounding sections (vary layout)
  • When image features directional elements pointing right
Best Practice: If using multiple About sections on one page, alternate the flip setting to create visual rhythm and prevent monotony.
Type: Checkbox
Default: Unchecked (left-aligned)Center-align the heading and content text within the content column.
  • Unchecked (Default): Left-aligned text (standard readability)
  • Checked: Center-aligned text (formal or symmetric layouts)

​
Alignment Guidelines

Left-Aligned (Default):
  • Better readability for longer content (easier for eyes to track)
  • Standard web convention
  • Professional, editorial style
  • When content exceeds 3-4 paragraphs
Center-Aligned:
  • Short, impactful statements
  • Luxury or boutique brand aesthetics
  • Formal or ceremonial tone
  • 1-2 paragraph maximum (longer text harder to read when centered)
  • Symmetrical page designs
Recommendation: Keep left-aligned unless you have short content (under 150 words) or a specific aesthetic reason to center.
Type: Text area
Default: “Meet the designer”Main heading for the about section. Can be single-line or multi-line for longer titles.Examples by Context:Brand Story:
  • “Our Story”
  • “How We Started”
  • “The Beginning”
Team Introduction:
  • “Meet Our Team”
  • “The People Behind [Brand]”
  • “Who We Are”
Founder Focus:
  • “Meet the Designer”
  • “About the Founder”
  • “From the Creator”
Values/Mission:
  • “What We Stand For”
  • “Our Mission”
  • “Why We Exist”
Tip: Keep headings concise (2-6 words). If you need more context, include it in the content rather than making the heading too long.
Type: Rich text editor
Default: Sample paragraphMain body content telling your story, mission, or introducing your team. Supports rich text formatting including bold, italic, links, and paragraphs.

​
Content Guidelines

Length Recommendations:
  • Minimum: 50-75 words (too short feels incomplete)
  • Optimal: 150-250 words (2-3 paragraphs, sufficient depth without overwhelming)
  • Maximum: 400 words (beyond this, consider breaking into multiple sections)

​
Effective About Content Structure

Paragraph 1: Hook Open with your unique perspective, founding moment, or what makes you different.Paragraph 2: Story/Details Expand on your journey, values, or approach. Make it personal and authentic.Paragraph 3: Present/Future Where you are today and what drives you forward. Optional call-to-action.

​
Content Tips

  • Be specific: “Started in my Brooklyn apartment” beats “Started small”
  • Show personality: Let your brand voice come through
  • Focus on ‘why’: Why you do what you do, not just what you do
  • Make it scannable: Use paragraph breaks, bold key phrases
  • Include a subtle CTA: “Explore our collection” or “See how we work”
Type: Image picker
Recommended Size: 1440x1200px (6:5 aspect ratio)Image displayed on one half of the split-screen layout (left or right depending on flip setting).

​
Image Selection Guidelines

Effective About Images:
  • Founder/team photo: Personal connection (best for small brands)
  • Workspace/studio: Behind-the-scenes authenticity
  • Product in context: Shows what you make while being lifestyle-focused
  • Brand imagery: Abstract representation of values/aesthetic
  • Process/craft: Hands working, creation in progress
Image Specifications:
  • Minimum size: 1440x1200px (72 DPI for web)
  • Aspect ratio: 6:5 (horizontal orientation) - maintains consistency
  • File format: JPG (photographs) or PNG (graphics with transparency)
  • File size target: Under 200KB for fast loading

​
Image Quality Tips

  • High resolution: Use retina-ready images (2x the display size)
  • Professional: Well-lit, in-focus, high-quality photography
  • On-brand: Match your overall aesthetic and color palette
  • Authentic: Real photos beat stock imagery for about sections
  • Optimized: Compress images using tools like TinyPNG before uploading
Avoid:
  • Generic stock photos (customers see through them)
  • Text-heavy images (hard to read at responsive sizes)
  • Busy/chaotic compositions (content side provides detail, image should be clean)
Type: Select dropdown
Options: Default, Medium, Compact, None
Default: DefaultControls vertical spacing (padding) above and below the section on desktop screens.
  • None: 0px spacing (section directly touches adjacent content)
  • Compact: Minimal spacing (~20-30px)
  • Default: Standard spacing (~40-60px) ← Recommended
  • Medium: Generous spacing (~80-100px)

​
Desktop Spacing Guidelines

Use Default:
  • Standard page layouts
  • When section is surrounded by other content sections
  • Most common use case
Use Medium:
  • Hero-like prominence for about section
  • When section is only/primary content on page
  • Extra breathing room for luxury/minimalist aesthetics
Use Compact:
  • Page has many stacked sections (reduce cumulative whitespace)
  • Tighter, more content-dense layouts
  • When sections are closely related conceptually
Use None:
  • Rarely recommended (sections feel cramped)
  • Only when intentionally creating continuous visual flow
  • Advanced design scenarios with custom spacing
Type: Select dropdown
Options: Default, Compact, None
Default: CompactControls vertical spacing above and below the section on mobile devices.
  • None: 0px spacing
  • Compact: Minimal spacing (~15-20px) ← Default
  • Default: Standard spacing (~30-40px)

​
Mobile Spacing Considerations

Mobile screens have limited vertical space, so the theme defaults to Compact spacing (tighter than desktop Default) to reduce scrolling.Compact (Recommended Default):
  • Reduces unnecessary scrolling on mobile
  • Still provides visual separation between sections
  • Matches mobile UX best practices
Default:
  • When about section is hero/primary feature
  • More breathing room for simpler page layouts
  • Luxury brands prioritizing whitespace over efficiency
None:
  • Very rarely appropriate
  • Only for intentional continuous layouts
  • Can make content feel cramped on small screens
Best Practice: Keep mobile spacing at Compact unless you have specific reason for more space. Mobile users scroll readily, but excessive whitespace adds friction.

​
Best practices

Use Authentic Photography

Real photos of your team, workspace, or process create stronger connections than stock imagery. Customers value authenticity in about sections.

Keep Content Scannable

Break content into 2-3 short paragraphs. Use bold text for key phrases. Long text blocks discourage reading, especially on mobile.

Optimize Image Size

Compress images to under 200KB without visible quality loss. Large images slow page loading, especially impactful on mobile connections.

Alternate Flip on Multi-Section Pages

If using multiple About sections, alternate the flip setting (image left, then image right) to create visual rhythm and prevent monotony.

Match Style to Brand Voice

Style 1 suits modern/minimal brands, Style 2 suits traditional/classic. Choose the style that reinforces your brand aesthetic.

Left-Align for Readability

Unless content is very short (under 100 words), use left-aligned text for better readability. Center alignment works for brief, impactful statements only.

Write Specific, Not Generic

“Started in my Brooklyn apartment in 2018” is more memorable than “Started small with a big dream.” Specificity creates authenticity.

Use Responsive Spacing

Default spacing on desktop with Compact on mobile balances aesthetics with mobile usability. Adjust only if you have specific design needs.

​
Common Use Cases

​
Homepage Brand Introduction

  • Heading: “Our Story”
  • Content: 150-200 word brand origin story
  • Image: Founder or workspace photo
  • Style 1, Default spacing
  • Link: “Shop the Collection” → /collections/all
  • Best for: Homepage teaser driving to full about page or shop

​
Full About Page (Primary Section)

  • Heading: “How We Started”
  • Content: 250-300 word detailed brand story
  • Image: Founding moment or team photo (1440x1200px high-quality)
  • Style 2, Medium desktop spacing, Default mobile spacing
  • No link (already on destination page)
  • Best for: Main about page as primary content section

​
Team Introduction

  • Heading: “Meet Our Team”
  • Content: 150 words about team values, expertise, approach
  • Image: Team photo or studio environment
  • Flip enabled (content left for text emphasis)
  • Link: “See Our Work” → portfolio or collections
  • Best for: Team/about pages, B2B sites, service-based businesses

​
Founder/Designer Profile

  • Heading: “Meet the Designer”
  • Content: 200 words about designer background, inspiration, process
  • Image: Portrait or action shot of designer working
  • Style 1, Default spacing
  • Link: “Read the Full Story” → blog post with detailed interview
  • Best for: Maker brands, artisan products, personality-driven brands

​
Values/Mission Statement

  • Heading: “What We Stand For”
  • Content: 100-150 words (shorter, punchier for values)
  • Image: Abstract brand imagery or impact photography
  • Center text enabled (shorter content allows centered alignment)
  • Style 2 for emphasis
  • Link: “Our Impact” → sustainability or impact page
  • Best for: Mission-driven brands, ethical fashion, cause-oriented businesses

​
Product Philosophy

  • Heading: “How We Create”
  • Content: 200 words about materials, process, quality standards
  • Image: Product crafting process or materials close-up
  • Style 1, Compact spacing (part of multi-section page)
  • Link: “Explore Materials” → collection or dedicated craftsmanship page
  • Best for: Artisan brands, handmade products, quality-focused messaging

​
Layout Behavior

​
Desktop Layout (Typically 1200px+ screens)

The section displays as a true split-screen:
  • 50/50 split: Image occupies one half, content occupies the other half
  • Vertical centering: Content is vertically centered within its column for balanced appearance
  • Full-height sections: Each side extends to full section height (typically 500-700px depending on content)
  • Flip toggle: Swaps which side has image vs content

​
Tablet Layout (768px - 1199px)

  • Maintains split-screen layout but with adjusted proportions
  • Content column may be slightly wider than image column for readability
  • Spacing reduces slightly to accommodate smaller viewport

​
Mobile Layout (Under 768px)

The layout stacks vertically:
  1. Image first (top) - Full width, maintains aspect ratio
  2. Content below - Full width, heading and text stack
  3. Link button (if present) - Full width below content
Mobile Optimizations:
  • Image height reduces to prevent excessive scrolling
  • Text size and line height adjust for mobile readability
  • Spacing compresses (Compact default for mobile setting)
  • Center-align toggle applies to mobile stacked layout

​
Style Differences in Layout

Style 1 Appearance:
  • Clean split with no additional visual treatments
  • Image and content directly on page background
  • Minimal aesthetic
Style 2 Appearance:
  • Content column has subtle background color or treatment
  • Creates visual card-like effect separating content from image
  • More distinct visual hierarchy
Both styles maintain identical layout structure; difference is purely visual styling.
  • Page - Combine with rich text for comprehensive about pages
  • Rich Text - Add detailed text sections above/below About section
  • Team - If available, dedicated team member profiles (more detailed than single about section)
  • Images with Text - Alternative split-screen layout with more content flexibility
  • Hero - Use as alternative to hero banner for about-focused homepages
  • Testimonials - Add below about section to build credibility with social proof
  • Contact Form - Natural next step after about content on about pages

​
Technical Notes

​
Content Length and Scrolling

The content side does not scroll independently. If content exceeds the available vertical space, the entire section height increases to accommodate it. This means:
  • Very long content (400+ words) creates very tall sections
  • On desktop, image stretches/scales to match content height
  • Consider breaking excessive content into multiple sections or separate pages

​
Image Aspect Ratio Handling

The theme is optimized for 6:5 aspect ratio (1440x1200px), but handles other ratios:
  • Taller images (portrait): Cropped top/bottom to fit split-screen height
  • Wider images (landscape): May letterbox or crop depending on content height
  • Square images: Work well but may have slight vertical cropping
Best practice: Stick to 1440x1200px (6:5) for predictable, optimized rendering.

​
Rich Text Formatting Support

The Content field supports these rich text features:
  • Paragraphs: Natural breaks between text blocks
  • Bold/Italic: Emphasis and variation
  • Links: Inline text links (separate from main CTA button)
  • Lists: Bullet or numbered lists (use sparingly)
  • Line breaks: Manual <br> breaks
Avoid in rich text:
  • Headings (use the dedicated Heading field)
  • Images (section already has dedicated image)
  • Tables (poor mobile rendering in this layout)
The Link Label creates a styled button/link (not plain text link). Styling depends on your theme’s button styles. Typical rendering:
  • Primary button styling (filled background, brand color)
  • Positioned below content text
  • Full width on mobile, auto-width on desktop
If you need a plain text link instead, add it inline within the Content field using rich text link formatting.

​
Performance Considerations

  • Image lazy loading: The image uses native lazy loading (doesn’t load until scrolled into view)
  • Content rendering: Text renders immediately; no JavaScript dependencies
  • Target load time: Section (with optimized image under 200KB) should render in under 1 second on average connections

​
Accessibility Features

The section includes semantic HTML and accessibility features:
  • Heading uses proper heading hierarchy (<h2> typically)
  • Image includes alt text (automatically populated from image alt field in media library)
  • Sufficient color contrast for text readability
  • Link button is keyboard-navigable
Recommendation: Always add descriptive alt text to images in Shopify’s media library for screen reader users and SEO.