> ## 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.
# Apps
> App embed section for integrating Shopify app content blocks into theme templates
## What It Does
The **Apps** section provides a dedicated area in your theme for embedding **Shopify App Blocks**—content from third-party apps that integrate directly into your theme. Instead of apps injecting code throughout your theme, this section gives you control over where app content appears.
## Getting Started
Add the Apps section to templates where you want app content to appear (homepage, product page, etc.)
Click "Add block" and select from installed apps that support app blocks
Each app block has its own settings provided by the app—configure as needed
Drag blocks to reorder how multiple app blocks appear in the section
## Settings
### Section Settings
The Apps section has **no section-level settings**. All configuration happens at the block level (individual app blocks have their own settings provided by each app).
### App Blocks
**Block Type:** @app (Shopify App Blocks)\
**Limit:** Unlimited
App blocks are content modules provided by third-party Shopify apps. When you install an app that supports **theme app extensions** (app blocks), those blocks become available to add to this section.
### What Are App Blocks?
App blocks allow apps to integrate their functionality directly into your theme without modifying theme code. Examples include:
* **Review apps:** Product review displays (Judge.me, Loox, Stamped.io)
* **Bundle apps:** Product bundle builders
* **Quiz apps:** Product recommendation quizzes
* **Customization apps:** Product personalization widgets
* **Size chart apps:** Dynamic size guides
* **Inventory apps:** Back-in-stock notifications
* **Loyalty apps:** Rewards point displays
* **FAQ apps:** Collapsible question sections
### How to Add App Blocks
1. **Install an app** from the Shopify App Store that supports app blocks
2. **Open Theme Customizer** and navigate to template where you want app content
3. **Add Apps section** (if not already present)
4. **Click "Add block"** within Apps section
5. **Select app** from the list of installed apps (only apps with blocks appear)
6. **Configure app block** using settings provided by that specific app
### App Block Settings
Each app provides its own unique settings for its blocks:
* **Review apps:** Display style, review count, rating colors
* **Bundle apps:** Bundle type, discount type, product selections
* **Quiz apps:** Question flow, result pages, styling
* **Size chart apps:** Size chart content, display conditions
**Settings vary completely by app**—refer to each app's documentation for block configuration details.
### Multiple App Blocks
You can add **multiple app blocks** from different apps in one Apps section:
```
[Apps Section]
→ Product Review Block (Judge.me)
→ Size Chart Block (Kiwi Sizing)
→ Back in Stock Block (Back In Stock)
```
Blocks stack vertically in the order you arrange them. Drag blocks to reorder.
### App Block Availability
**Only apps with Theme App Extensions (App Blocks) appear:**
* Modern apps (2021+) increasingly support app blocks
* Legacy apps may only provide snippet code (not app blocks)
* Check app documentation or App Store listing: "Works with Online Store 2.0 themes"
**If an app doesn't appear:**
* App may not support app blocks (use Custom Liquid section instead)
* App may need to be reinstalled or updated
* App may only work in specific templates (e.g., product page only)
### Template Context
Some app blocks are **template-specific**:
* **Product reviews:** Only appear in product page templates (require product context)
* **Cart upsells:** Only appear in cart templates
* **Collection badges:** Only appear in collection templates
If you add an app block to an incompatible template, it may:
* Not appear (gracefully hidden)
* Show an error message
* Display placeholder content
**Best practice:** Add Apps section to templates where your apps are designed to work (check app documentation for template requirements).
## Best practices
Apps section gives you control over app placement rather than apps injecting code everywhere. Prefer app blocks over snippet-based apps when possible.
Adding 5+ app blocks in one section creates visual clutter. Use 2-3 apps maximum per Apps section for clean layouts.
Verify app blocks work in your target template. Product-specific apps won't function on homepages; cart apps won't work on product pages.
Preview pages after adding app blocks to ensure they display correctly and don't conflict with theme styling or other apps.
You can add multiple Apps sections to one template. Use separate sections for grouped functionality (reviews + Q\&A in one, upsells in another).
Apps update their blocks with new features. Check app settings occasionally for new block options or improved functionality.
If you uninstall an app, remove its blocks from Apps sections. Orphaned blocks may show errors or take up space unnecessarily.
If using multiple apps, note which blocks are in which templates. Makes troubleshooting and future updates easier.
## Common Use Cases
### Product Page Reviews and Q\&A
**Setup:** Apps section on product template
* **App Block 1:** Product reviews display (Judge.me or similar)
* **App Block 2:** Questions & Answers widget (Fera Q\&A or similar)
**Result:** Customers see reviews and questions below product details, increasing confidence and conversion
**Best for:** Any store selling products with reviews and common questions
### Homepage Social Proof
**Setup:** Apps section on homepage template
* **App Block:** Instagram feed or user-generated content (Instafeed, Foursixty)
* **Placement:** Below featured products or near footer
**Result:** Dynamic social content updates automatically, building trust and engagement
**Best for:** Fashion, lifestyle, food & beverage brands with active social media
### Cart Page Upsells
**Setup:** Apps section on cart template
* **App Block 1:** Free shipping progress bar (Shipping Bar)
* **App Block 2:** Product recommendations/frequently bought together (ReComlete, LimeSpot)
**Result:** Increase average order value with contextual cart-based recommendations
**Best for:** All stores wanting to maximize cart value before checkout
### Product Page Customization
**Setup:** Apps section on product template (above/below add-to-cart button)
* **App Block:** Product customizer (Zepto, Product Personalizer)
**Result:** Customers personalize products (engraving, monograms, custom text) directly on product page
**Best for:** Gift shops, jewelry, apparel with customization options
### Size Guide on Product Pages
**Setup:** Apps section on product template
* **App Block:** Dynamic size chart (Kiwi Sizing, Size Chart)
* **Placement:** Near size selector or below product description
**Result:** Reduces returns by helping customers select correct sizes
**Best for:** Apparel, footwear, accessories with sizing variations
### Loyalty Points Display
**Setup:** Apps section on multiple templates (product, cart, account pages)
* **App Block:** Loyalty program widget (Smile.io, Yotpo)
**Result:** Customers see points earned/redeemable across shopping journey
**Best for:** Stores with repeat customers and loyalty programs
## Layout Behavior
### Desktop Layout
The Apps section displays app blocks as **stacked content**:
```
[App Block 1]
↓
[App Block 2]
↓
[App Block 3]
```
Each app block controls its own layout, styling, and spacing. The Apps section is simply a container—visual appearance depends entirely on the apps.
**Section width:** Full page width (or constrained by template). Individual app blocks may have their own width settings.
### Mobile Layout
On mobile, app blocks stack vertically:
* Full-width display (blocks span mobile screen)
* Apps control their own mobile responsiveness
* Order matches desktop (blocks don't reorg for mobile)
**Mobile optimization:** Each app is responsible for mobile-friendly rendering. Well-designed app blocks automatically adapt to mobile screens.
### Empty Section Behavior
If the Apps section has **no app blocks added**, it displays **empty** (no placeholder or error)—essentially invisible on the page.
**Why this matters:** You can add Apps sections preemptively to templates before installing apps. Section remains hidden until blocks are added.
### Block Spacing
Vertical spacing between app blocks depends on:
* **Theme CSS:** Theme may add default spacing between blocks
* **App CSS:** Some apps add their own top/bottom margins
* **Result:** Typically 20-40px between consecutive app blocks
If spacing looks off, check individual app block settings (some apps have spacing controls).
## Related Sections
* **[Custom Liquid](/themes/mojave/custom-liquid)** - For apps that don't support app blocks, use Custom Liquid to render app snippets
* **[Product Recommendations](/themes/mojave/product-recommendations)** - Theme's built-in recommendations (alternative to app-based recommendations)
* **[Reviews](/themes/mojave/reviews)** (if theme has built-in reviews) - Alternative to review apps
## Technical Notes
### Theme App Extensions (App Blocks)
The Apps section uses Shopify's **Theme App Extensions API** (introduced with Online Store 2.0 in 2021). This allows apps to:
* Register blocks that appear in Theme Customizer
* Provide block settings (configured by merchants)
* Render content dynamically based on page context
* Update independently without theme code modifications
**Requirements:**
* Theme must be Online Store 2.0 compatible (Dawn-based or updated)
* Apps must be built using App Extensions (not all apps support this yet)
### App Block Rendering
When a page loads:
1. **Theme renders section HTML** (container)
2. **Shopify injects app block content** (from app extension)
3. **App styles/scripts load** (CSS/JavaScript from app)
4. **App block renders dynamically** (may fetch data via API)
**Performance consideration:** Multiple app blocks can slow page load if apps load heavy resources. Monitor page speed after adding app blocks.
### App Block Data Access
App blocks have access to:
* **Template context:** Product data (on product pages), collection data (on collection pages), cart data (on cart pages)
* **Customer data:** Login status, customer metafields (if app has permissions)
* **Storefront API:** Apps can fetch additional data via GraphQL
**Privacy:** Apps only access data they've requested permissions for during installation.
### Block Settings Persistence
App block settings are saved **per-section instance**:
* Same app can be added to multiple templates with different settings
* Moving/removing section doesn't affect app data elsewhere
* Uninstalling app orphans blocks (shows error or empty space until removed)
### Liquid vs App Blocks
**Traditional apps (Liquid snippets):**
```liquid theme={null}
{% render 'app-snippet' %}
```
* Requires Custom Liquid section or theme code editing
* Harder to move or remove
* May conflict with theme updates
**Modern apps (App Blocks):**
```
[Add block → Select app]
```
* No code editing required
* Drag-and-drop in Theme Customizer
* Update-safe (doesn't modify theme files)
**Recommendation:** Prefer apps with app block support for easier management and future-proofing.
### App Block Limits
The Apps section has **no limit** on number of app blocks, but practical considerations:
* **Performance:** 5+ app blocks may slow page loading
* **Visual clutter:** Too many apps create overwhelming pages
* **Conflicts:** Some apps may conflict if they manipulate same elements
**Best practice:** Use 3-4 app blocks maximum per Apps section.
### App Uninstallation
When you **uninstall an app**:
* App blocks remain in Theme Customizer (orphaned)
* Blocks show "App not installed" or render empty
* **You must manually remove blocks** from Apps sections
**Workflow:**
1. Uninstall app from Shopify Admin
2. Go to Theme Customizer
3. Find apps sections using that app's blocks
4. Delete orphaned blocks
5. Save changes
### Cross-Template App Blocks
You can add the **same app block** to multiple templates:
* Product reviews on product template
* Product reviews on cart template (for cart item reviews)
* Each instance can have different settings
**Settings are isolated per template**—changing block settings in one template doesn't affect other templates.
## Troubleshooting
**App doesn't appear in block selection:**
* Verify app is installed and active (check Shopify Admin > Apps)
* Confirm app supports Online Store 2.0 / App Blocks (check App Store listing: "Works with Online Store 2.0")
* Check that you're in correct template (some apps only work in specific templates like Product or Cart)
* Try refreshing Theme Customizer (Theme Customizer may need reload after app installation)
* Contact app support to confirm they offer app blocks
**App block shows "App not installed" error:**
* App was uninstalled but block remains in theme
* **Solution:** Delete the orphaned app block from the Apps section
**App block not displaying content:**
* Check template context (product blocks won't work on homepage, cart blocks won't work on product pages)
* Verify app block settings are configured correctly (app may require configuration)
* Check app is active/not paused (some apps have activation requirements)
* Test on live storefront (some apps don't preview in Theme Customizer)
* Check app documentation for setup requirements
**Multiple app blocks conflict (styling issues):**
* Some apps use conflicting CSS or JavaScript
* Try reordering blocks (different order may resolve issues)
* Contact both app developers about compatibility
* Consider using apps in separate Apps sections or templates
* As last resort, choose one app and uninstall the conflicting one
**App block slows page loading:**
* Check app loads heavy resources (large images, videos, many scripts)
* Contact app support about performance optimization
* Consider lazy-loading the Apps section (advanced, requires theme customization)
* Test page speed with and without app to confirm it's the culprit
* Evaluate if app's functionality justifies performance impact
**App block styling doesn't match theme:**
* Most apps use their own styles (may not perfectly match theme)
* Check if app has style/color settings in block configuration
* Some apps offer "inherit theme styles" options
* For advanced customization, use theme's custom CSS (requires coding)
* Contact app support about theme styling compatibility
**Can't remove app block:**
* Ensure you're clicking "Remove block" (not just unchecking settings)
* Try refreshing Theme Customizer if deletion isn't saving
* Check that theme isn't locked/published (may need to create draft)
* As workaround, hide block with CSS if deletion fails (contact Shopify support)
**App block shows different content on live site vs editor:**
* Some apps don't fully preview in Theme Customizer (need live view)
* Check if app has "preview mode" toggle in settings
* Test on live storefront or use theme preview with ?preview\_theme\_id=
* Contact app support if preview behavior is unexpected