> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# About
> Split-screen about section with image and content in two visual styles
## 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
Add the About section to your **About** page or any page template where you want to share your story
Select between Style 1 (minimal) or Style 2 (with background) to match your aesthetic
Write your heading and story content using the rich text editor for formatting flexibility
Add an image (recommended 1440x1200px) that represents your brand, team, or story
## Settings
**Type:** Select dropdown\
**Options:** Style 1, Style 2\
**Default:** Style 1
Choose 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 paragraph
Main 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:** Text field\
**Default:** "Show now"
Text for the optional call-to-action button/link at the bottom of the content. Leave empty to hide the link entirely.
**Common Link Labels:**
* "Shop the Collection" (link to collections)
* "Learn More" (link to detailed about page)
* "Meet the Team" (link to team page)
* "See Our Work" (link to portfolio/lookbook)
* "Read Our Story" (link to blog post)
* "Get in Touch" (link to contact page)
**When to Omit:** If this About section appears on your main about page, you may not need a link (customer is already at destination). Use links when About section appears on homepage or other pages where there's a logical next step.
**Type:** URL field\
**Default:** Empty
Destination for the call-to-action link. Only relevant if Link Label is populated.
**Common Destinations:**
* `/collections/all` - Shop all products
* `/pages/about` - Full about page (if this section is teaser)
* `/pages/team` - Team page
* `/pages/contact` - Contact page
* `/blogs/news` - Brand blog
* `/collections/featured` - Featured collection
**External Links:** Can link to external sites like Instagram, press coverage, or portfolio sites. Use full URL including `https://`.
**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:** Default
Controls 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:** Compact
Controls 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
Real photos of your team, workspace, or process create stronger connections than stock imagery. Customers value authenticity in about sections.
Break content into 2-3 short paragraphs. Use bold text for key phrases. Long text blocks discourage reading, especially on mobile.
Compress images to under 200KB without visible quality loss. Large images slow page loading, especially impactful on mobile connections.
If using multiple About sections, alternate the flip setting (image left, then image right) to create visual rhythm and prevent monotony.
Style 1 suits modern/minimal brands, Style 2 suits traditional/classic. Choose the style that reinforces your brand aesthetic.
Unless content is very short (under 100 words), use left-aligned text for better readability. Center alignment works for brief, impactful statements only.
"Started in my Brooklyn apartment in 2018" is more memorable than "Started small with a big dream." Specificity creates authenticity.
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.
## Related Sections
* **[Page](/themes/mojave/page)** - Combine with rich text for comprehensive about pages
* **[Rich Text](/themes/mojave/richtext)** - Add detailed text sections above/below About section
* **[Team](/themes/mojave/team)** - If available, dedicated team member profiles (more detailed than single about section)
* **[Images with Text](/themes/mojave/images-with-text)** - Alternative split-screen layout with more content flexibility
* **[Hero](/themes/mojave/hero)** - Use as alternative to hero banner for about-focused homepages
* **[Testimonials](/themes/mojave/testimonials)** - Add below about section to build credibility with social proof
* **[Contact Form](/themes/mojave/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 `
` breaks
**Avoid in rich text:**
* Headings (use the dedicated Heading field)
* Images (section already has dedicated image)
* Tables (poor mobile rendering in this layout)
### Link vs Button Styling
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 (`` 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.