MySite Theme Development Guide
Last updated

MySite Theme Development Guide

Overview

MySite themes customize affiliate-facing pages. After deployment, themes become available in the admin interface for further customization and publishing.

Prerequisites

  • Fluid development environment access
  • Liquid templating knowledge
  • Admin privileges for rake task execution

Development Workflow

1. Create Theme Structure

mkdir -p app/themes/templates/mysite/YOUR_THEME_NAME/
touch app/themes/templates/mysite/YOUR_THEME_NAME/index.liquid
touch app/themes/templates/mysite/YOUR_THEME_NAME/styles.css
touch app/themes/templates/mysite/YOUR_THEME_NAME/script.js  # optional

2. Template Requirements

Critical: Root container must include my-site class for styles to load.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="XXXXX-XXXXX" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="themes-wrapper_default my-site">
  <!-- Theme content -->
</div>

3. Required CSS Classes

ElementRequired ClassesPurpose
Root containerthemes-wrapper_default my-siteCRITICAL - Enables style loading
Navigationthemes-nav or themes-nav_defaultNavigation styling
Body contentthemes-body or themes-body_defaultMain content area
Footerthemes-footer or themes-footer_defaultFooter styling

4. Standard Components

  • Avatar: ui image circular tiny with id="image-swap"
  • Social Icons: Facebook, Twitter, Instagram, YouTube, Pinterest, LinkedIn, TikTok, WeChat, WhatsApp
  • Links: Iterate through fluid_affiliate.links
  • Bio: Include expand/collapse functionality

5. Deploy Theme

# Deploy to all companies
rake "mysite_themes:load_theme[YOUR_THEME_NAME]"

# Deploy to specific company
rake "mysite_themes:load_default[COMPANY_ID,YOUR_THEME_NAME]"

# Deploy all themes
rake mysite_themes:load_all

6. Post-Deployment Management

After deployment, themes are available in the admin interface:

Navigation: Sidebar > Website > MySite Theme

Available Actions:

  • Customize: Edit Liquid template and CSS directly in the admin interface
  • Preview: Test changes before publishing
  • Publish: Deploy customized theme to production
  • Revert: Restore to original theme version

Admin Interface Features:

  • Live preview of template changes
  • Syntax highlighting for Liquid and CSS
  • Version control and rollback capabilities
  • Company-specific theme customization

Liquid Variables Reference

VariablePropertiesDescription
fluid_affiliatename, bio, image, linksAffiliate profile data
fluid_affiliateSocial media URLsFacebook, Twitter, Instagram, etc.
companyVarious propertiesCompany information
requestContext dataRequest-specific data

Common Issues & Solutions

IssueSolution
Styles not loadingEnsure root container has my-site class
Theme not visibleRun deployment rake task
JavaScript errorsInclude script in script.js file
Missing contentVerify Liquid variable usage

Project Structure

app/themes/templates/mysite/
├── YOUR_THEME_NAME/
│   ├── index.liquid      # Main template
│   ├── styles.css        # Theme styles
│   └── script.js         # Optional JavaScript
├── canvas/               # Existing theme
└── default/              # Default theme

Best Practices

  • Test locally before deployment
  • Use semantic CSS classes for maintainability
  • Follow Liquid conventions for variable access
  • Optimize images for performance
  • Validate HTML structure
Previous page
Next page