App Promo

File: sections/app-promo.liquid

Templates: index.json

Description

App Promo Section

A split-layout promotional section designed to showcase a mobile application. The left column presents textual content (pre-headline, logo or title, description, tagline) along with app store download buttons, while the right column displays a promotional image or mockup.

Features:

• Two-column grid layout (content left, image right) that stacks on mobile
• Configurable background, text, and accent colors via inline styles
• Optional logo image or fallback text title (logo takes precedence)
• Google Play and App Store download links with custom or default badge images
• Default badge images sourced from Wikimedia Commons SVGs
• Placeholder graphic displayed when no promotional image is provided
• Responsive breakpoints at 1024px, 768px, and 480px
• Lazy-loaded images for performance

Settings:

• background_color (color) — Section background color, default #FFFFFF
• text_color (color) — Text color for pre-headline, title, and description, default #22434F
• accent_color (color) — Accent color applied to the tagline, default #00746D
• pre_headline (text) — Small uppercase text above the title/logo
• logo_image (image_picker) — App logo image; if provided, overrides the title text
• title (text) — Fallback title displayed when no logo image is set
• description (richtext) — Body copy describing the app
• tagline (textarea) — Italic tagline rendered below the description
• google_play_link (url) — URL to the Google Play Store listing
• google_play_badge (image_picker) — Custom Google Play badge image (optional)
• app_store_link (url) — URL to the Apple App Store listing
• app_store_badge (image_picker) — Custom App Store badge image (optional)
• promo_image (image_picker) — Promotional image or app mockup, recommended 1000px wide

Blocks: None

Settings

ID	Type	Label	Default	Info
“	header
background_color	color	Background Color	#FFFFFF
text_color	color	Text Color	#22434F
accent_color	color	Accent Color (Tagline)	#00746D
“	header
pre_headline	text	Pre-headline	WELCOME TO
logo_image	image_picker	Logo Image		Upload app logo. If not provided, Title text will be used.
title	text	Title (if no logo)	expand
description	text	Description	From The Monroe Institute, A Meditation App Unlike Any You’ve Ever Experienced —
tagline	textarea	Tagline (Italic)	Relax, De-Stress, Improve Your Sleep, And Rediscover Feelings Of Joy That Are Buried Deep Inside.
“	header
google_play_link	url	Google Play Link
google_play_badge	image_picker	Google Play Badge (Optional)		Custom badge image. Default badge used if not provided.
app_store_link	url	App Store Link
app_store_badge	image_picker	App Store Badge (Optional)		Custom badge image. Default badge used if not provided.
“	header
promo_image	image_picker	Promotional Image		App mockup or promotional artwork. Recommended: 1000px wide.

Presets

• App Promo

Usage

This section can be added via the Shopify theme editor.

{% section 'app-promo' %}