StoryLM Documentation

Getting Started

Quick Start Guide

Get started with StoryLM quickly! Learn all the basics in just a few minutes.

What is StoryLM?

StoryLM is a modern WordPress plugin for creating Instagram-style stories with product integration, responsive design, and advanced customization options.

Quick Setup

Need Help?

Check out our comprehensive documentation sections or visit the troubleshooting guide for common issues.

Getting Started

Installation

Learn how to install and activate the StoryLM plugin on your WordPress website.

Installation Methods

Method 1: WordPress Admin Upload

  1. Download the StoryLM plugin zip file
  2. Go to Plugins → Add New in your WordPress admin
  3. Click Upload Plugin
  4. Choose the downloaded zip file and click Install Now
  5. Click Activate Plugin

Method 2: FTP Upload

  1. Extract the plugin zip file
  2. Upload the storylm folder to /wp-content/plugins/
  3. Go to Plugins in your WordPress admin
  4. Find StoryLM and click Activate

⚠️ Important Note

After activation, you'll see a new Stories menu in your WordPress admin. This is where you'll manage all your stories and global settings.

Getting Started

Requirements

System requirements and compatibility information for StoryLM.

Minimum Requirements

Server Requirements

  • • WordPress: 5.0 or higher
  • • PHP: 7.4 or higher
  • • MySQL: 5.6 or higher
  • • Memory: 128MB minimum

Browser Support

  • • Chrome: 60+
  • • Firefox: 55+
  • • Safari: 12+
  • • Edge: 79+
  • • Mobile: iOS Safari, Chrome Mobile

Optional Dependencies

WooCommerce Integration

For product features, install WooCommerce 3.0 or higher. This enables:

  • Product attachment to stories
  • Product carousel display
  • Add to cart functionality

Features

Story Management

Comprehensive story management features for creating engaging Instagram-style content.

Core Features

📱 Media Support

  • • Image and video content
  • • Custom thumbnails
  • • Automatic fallbacks
  • • Responsive media handling

🎨 Visual Customization

  • • WordPress color picker
  • • Gradient borders
  • • Responsive dimensions
  • • Border thickness control

🏷️ Badge System

  • • Optional story badges
  • • Automatic gradient inheritance
  • • Custom badge text
  • • Responsive positioning

💬 Social Features

  • • Like system
  • • Comment integration
  • • User interaction tracking
  • • Real-time updates

Features

Responsive Design

Advanced responsive features that adapt to different screen sizes and devices.

Device-Specific Controls

📱 Mobile (≤767px)

  • • Optimized container dimensions
  • • Touch-friendly interactions
  • • Swipe navigation
  • • Compact layout

📟 Tablet (768px-1023px)

  • • Balanced sizing
  • • Enhanced touch targets
  • • Optimized spacing
  • • Improved readability

🖥️ Desktop (≥1024px)

  • • Larger story containers
  • • Mouse hover effects
  • • Keyboard navigation
  • • Enhanced visual details

✨ CSS Custom Properties

StoryLM uses modern CSS custom properties for dynamic responsive styling, ensuring optimal performance and smooth transitions across all devices.

Features

Badge System

Add eye-catching badges to your stories with automatic styling that matches your story design.

How Badges Work

🎨 Automatic Gradient Inheritance

Badges automatically inherit the same gradient colors as their parent story container, ensuring perfect visual harmony.

  • Uses story's start, middle, and end gradient colors
  • No manual color coordination needed
  • Consistent branding across all stories

⚙️ Simple Configuration

Enable badges with just two simple options:

  • Enable Badge: Checkbox to show/hide badge
  • Badge Text: Custom text content for the badge

📍 Smart Positioning

Badges are automatically positioned for optimal visibility:

  • Absolute positioning at bottom of story container
  • Centered horizontally
  • Responsive sizing and spacing
  • Z-index management for proper layering

Features

WooCommerce Integration

Seamlessly integrate your WooCommerce products with stories for enhanced e-commerce experiences.

E-commerce Features

🛍️ Product Attachment

  • • Search and select products
  • • Multiple products per story
  • • Product carousel display
  • • Automatic product sync

🛒 Shopping Features

  • • Direct add to cart
  • • Product detail modals
  • • Price display
  • • Stock status

📱 Mobile Commerce

  • • Touch-optimized product carousel
  • • Swipe navigation
  • • Mobile-friendly checkout
  • • Responsive product display

⚡ Performance

  • • AJAX product loading
  • • Optimized queries
  • • Cached product data
  • • Lazy loading support

💡 Pro Tip

Enable products in your story settings to show a product carousel within the story modal. This creates an immersive shopping experience directly within your stories.

Configuration

Global Settings

Configure responsive settings and global options for all your stories in one centralized location.

Accessing Global Settings

Navigate to Stories → Settings in your WordPress admin to access the global configuration panel.

Settings Sections

📱 Mobile Settings (≤767px)

  • • Container Width: 32-200px (default: 52px)
  • • Container Height: 32-200px (default: 52px)
  • • Border Thickness: 1-10px (default: 4px)

📟 Tablet Settings (768px-1023px)

  • • Container Width: 32-200px (default: 60px)
  • • Container Height: 32-200px (default: 60px)
  • • Border Thickness: 1-10px (default: 4px)

🖥️ Desktop Settings (≥1024px)

  • • Container Width: 32-200px (default: 68px)
  • • Container Height: 32-200px (default: 68px)
  • • Border Thickness: 1-10px (default: 4px)

✅ Real-Time Updates

Changes to global settings apply immediately to all stories on your website. The responsive CSS custom properties ensure smooth transitions across all devices.

Configuration

Creating Stories

Step-by-step guide to creating engaging stories with all available features and customization options.

Story Creation Process

1️⃣ Basic Information

Start by adding basic story information:

  • Title: Story name (displayed below the story circle)
  • Content: Story description (shown in the modal)
  • Featured Image: Fallback image if no custom media is set

2️⃣ Story Details

Configure story-specific options:

  • Enable Badge: Show/hide story badge
  • Badge Text: Custom text for the badge
  • Enable Comments: Allow user comments
  • Enable Products: Show WooCommerce products

3️⃣ Visual Styling

Customize the story appearance:

  • Start Color: Beginning of gradient border
  • Middle Color: Center of gradient border
  • End Color: End of gradient border
  • Note: Badge automatically inherits these colors

4️⃣ Media Upload

Add visual content to your story:

  • Media Type: Choose between image or video
  • Story Image/Video: Upload your main content
  • Custom Thumbnail: Optional thumbnail override

5️⃣ Product Integration

Attach WooCommerce products (if enabled):

  • Search Products: Find products by name or SKU
  • Select Multiple: Attach multiple products
  • Product Order: Drag to reorder products

Configuration

Customization

Advanced customization options for developers and power users.

CSS Customization

🎨 CSS Custom Properties

StoryLM uses CSS custom properties for dynamic styling:

--storylm-container-width: 52px;
--storylm-container-height: 52px;
--storylm-border-thickness: 4px;

📱 Responsive Breakpoints

Customize responsive behavior:

  • Mobile: Default styles (≤767px)
  • Tablet: @media (min-width: 768px)
  • Desktop: @media (min-width: 1024px)

🔧 Custom CSS Classes

Key CSS classes for customization:

  • .story-item - Individual story container
  • .story-container - Story circle with border
  • .story-username - Story title text
  • .story-badge - Story badge element

WordPress Hooks

Available Hooks

Use these hooks for advanced customization:

  • storylm_before_story_display
  • storylm_after_story_display
  • storylm_story_data (filter)

Technical

Shortcodes

Display your stories anywhere on your website using the StoryLM shortcode.

Basic Usage

Primary Shortcode

[story_shop]

This shortcode displays all published stories in a responsive carousel format.

Implementation Examples

📄 In Posts and Pages

Add the shortcode directly in the WordPress editor:

[story_shop]

🎨 In Theme Templates

Use PHP to display stories in theme files:

<?php echo do_shortcode('[story_shop]'); ?>

🧩 In Widgets

Add stories to widget areas:

  1. Go to Appearance → Widgets
  2. Add a Text or Custom HTML widget
  3. Insert the [story_shop] shortcode

📱 Responsive Behavior

The shortcode automatically adapts to different screen sizes using your global responsive settings. No additional configuration needed!

Technical

Hooks & Filters

Extend StoryLM functionality using WordPress hooks and filters for advanced customization.

Action Hooks

storylm_before_story_display

Fires before story content is displayed.

add_action('storylm_before_story_display', 'my_custom_function');
function my_custom_function() {
    // Your custom code here
}

storylm_after_story_display

Fires after story content is displayed.

add_action('storylm_after_story_display', 'my_custom_function');
function my_custom_function() {
    // Your custom code here
}

Filter Hooks

storylm_story_data

Modify story data before display.

add_filter('storylm_story_data', 'modify_story_data');
function modify_story_data($story_data) {
    // Modify $story_data array
    return $story_data;
}

storylm_story_thumbnail

Customize story thumbnail URLs.

add_filter('storylm_story_thumbnail', 'custom_thumbnail', 10, 2);
function custom_thumbnail($thumbnail_url, $story_id) {
    // Return custom thumbnail URL
    return $thumbnail_url;
}

Technical

Troubleshooting

Common issues and solutions for StoryLM plugin problems.

Common Issues

❌ Stories Not Displaying

Possible Causes:

  • No published stories
  • Theme conflicts
  • JavaScript errors

Solutions:

  • Ensure you have published stories
  • Check browser console for errors
  • Try switching to a default theme temporarily
  • Deactivate other plugins to test for conflicts

❌ Responsive Settings Not Working

Possible Causes:

  • CSS caching
  • Theme CSS conflicts
  • Settings not saved

Solutions:

  • Clear all caching plugins
  • Save settings again in Stories → Settings
  • Check if theme overrides plugin CSS

❌ Color Picker Not Working

Possible Causes:

  • WordPress version compatibility
  • JavaScript conflicts
  • Admin theme issues

Solutions:

  • Update WordPress to latest version
  • Deactivate admin plugins temporarily
  • Check browser console for JavaScript errors

❌ WooCommerce Products Not Showing

Possible Causes:

  • WooCommerce not installed/activated
  • Products not attached to story
  • Product display disabled

Solutions:

  • Install and activate WooCommerce
  • Enable products in story settings
  • Attach products to your story
  • Ensure products are published

Debug Information

🔍 Gathering Debug Info

When reporting issues, please include:

  • WordPress version
  • StoryLM plugin version
  • Active theme name
  • List of active plugins
  • Browser console errors (if any)
  • Steps to reproduce the issue

💡 Still Need Help?

If you're still experiencing issues after trying these solutions, please check the plugin's GitHub repository for additional support resources and to report bugs.