Alireza Mojarad

Mojarad Screenshot Mockup Carousel is a lightweight WordPress plugin for presenting long website screenshots inside animated desktop and mobile device mockups.
It is designed for portfolio websites, agencies, freelancers, UI/UX designers, product teams, and WordPress developers who want to showcase websites and case studies in a more polished and visual way.
Instead of displaying static screenshots, the plugin places your desktop and mobile screenshots inside responsive device mockups. Long screenshots scroll smoothly inside the device screens, while desktop and mobile slides stay synchronized in one clean carousel.
This creates a modern showcase experience that is useful for:
<ul>
<li>Website portfolios</li>
<li>Client project presentations</li>
<li>UI/UX case studies</li>
<li>Landing page previews</li>
<li>Product showcases</li>
<li>Web app screenshots</li>
<li>WordPress project galleries</li>
</ul>
Version 1.1.0 adds performance improvements for pages that contain multiple showcase shortcodes. It introduces lazy image loading, viewport-based carousel activation, progressive slide loading, skeleton placeholders, and a shortcode slide limit attribute.
The plugin is built with a lightweight frontend architecture and does not depend on heavy slider libraries or external frontend frameworks.
<h4>Key Features</h4>
<ul>
<li>Animated desktop and mobile mockups</li>
<li>Smooth auto-scrolling screenshots</li>
<li>Synchronized desktop and mobile slide transitions</li>
<li>Responsive 4:3 showcase layout</li>
<li>Lightweight frontend rendering</li>
<li>Shortcode support</li>
<li>Shortcode slide limit attribute</li>
<li>Lazy image loading</li>
<li>Viewport-based carousel activation</li>
<li>Autoplay pause outside viewport</li>
<li>Progressive slide image preloading</li>
<li>Skeleton loading placeholders</li>
<li>Global animation settings</li>
<li>Hover pause support</li>
<li>Automatic image scaling</li>
<li>Drag and drop slide sorting</li>
<li>Theme-independent architecture</li>
<li>Built-in fallback screenshots</li>
<li>Persian language files</li>
</ul>
<h4>Performance Improvements</h4>
Mojarad Screenshot Mockup Carousel is designed to work better on pages that include multiple showcases.
The plugin does not immediately load all showcase images on page load. Instead, it waits until each showcase gets close to the viewport, then loads and activates that showcase.
This helps reduce the initial page load weight when using several showcase shortcodes on the same portfolio page.
Version 1.1.0 includes:
<ul>
<li>Lazy image loading</li>
<li>Carousel activation near viewport</li>
<li>Autoplay pause when outside viewport</li>
<li>Progressive slide image preloading</li>
<li>Skeleton placeholders before images load</li>
<li>Fixed image width and height attributes where possible</li>
</ul>
<h4>Shortcode Usage</h4>
Display all slides:
[mojasmc_showcase id=”1″]
Display only the first two slides:
[mojasmc_showcase id=”1″ limit=”2″]
The limit attribute is useful for portfolio overview pages, archive pages, landing pages, and pages that contain multiple showcases.
If the limit attribute is not provided, all slides will be displayed.
<h4>Recommended Screenshot Workflow</h4>
For the best visual result, use full-page screenshots.
For desktop screenshots, it is recommended to use the GoFullPage Chrome extension to capture full-length website screenshots.
Long screenshots create smoother scrolling animations inside the desktop mockup.
For mobile screenshots, full-page continuous screenshots are recommended as well. Many Samsung devices support long screenshot capture natively. Other devices may require browser tools or third-party applications depending on the operating system.
Recommended workflow:
<ol>
<li>Capture a full-page desktop screenshot.</li>
<li>Capture a full-page mobile screenshot.</li>
<li>Add both images to the same slide.</li>
<li>Keep each desktop and mobile image pair related to the same page or section.</li>
<li>Repeat for additional slides.</li>
</ol>
<h4>Built-in Fallback Images</h4>
If a slide is missing a desktop or mobile screenshot, the plugin automatically displays a built-in fallback image.
This keeps the showcase layout stable even if one image is not provided.
<h4>Global Settings</h4>
The plugin includes a global settings page where you can customize the showcase behavior and controls.
Available settings include:
<ul>
<li>Arrow color</li>
<li>Arrow background color</li>
<li>Arrow hover background color</li>
<li>Dot color</li>
<li>Active dot color</li>
<li>Scroll duration</li>
<li>Start hold</li>
<li>End hold</li>
<li>Autoplay</li>
<li>Pause on hover</li>
<li>Device shadow</li>
<li>Maximum showcase width</li>
<li>Controls position</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Freelancers</li>
<li>Agencies</li>
<li>Portfolio websites</li>
<li>Product showcases</li>
<li>Case studies</li>
<li>UI/UX presentations</li>
<li>Creative studios</li>
<li>WordPress developers</li>
</ul>

Mojarad Screenshot Mockup Carousel

Create animated website showcases using smooth scrolling desktop and mobile mockups.

dynamicmockups

Dynamic Mockups for WooCommerce – Create Professional Product Galleries and Enable Customer Personalization
Transform your WooCommerce store with two powerful features: automated mockup generation that creates entire product catalogs in seconds, and customer personalization that lets shoppers upload their own designs and see instant previews on professional mockups.
What Makes This Different: 
* Generate hundreds of professional mockups from a single design upload 
* Customers personalize products directly in your store with real-time previews 
* Automatic print-ready files (PDF, PNG, vector) created for every order 
* Native WooCommerce integration – works with any theme, no coding required
Immediate Results: 
* Setup completes in under 15 minutes with guided onboarding 
* Professional photography-quality mockups in under 10 seconds 
* Seamless customer experience from design upload to checkout 
* Built on AWS infrastructure for 99.9% reliability
Perfect For: Print-on-demand stores, custom product sellers, WooCommerce agencies, and any business wanting to offer product personalization without technical complexity.
Trusted by thousands of WooCommerce stores worldwide.
<h3>Overview</h3>
Two Integrated Features That Transform Your WooCommerce Store
Product Gallery Generator 
For Store Owners: Professional Catalogs in One Click
Connect your WooCommerce products directly to Dynamic Mockups’ library of 1000+ professional templates. Upload your artwork once and generate complete product galleries instantly – no more spending hours in design software.
Key Capabilities: 
* 1000+ Professional Templates: Apparel, mugs, phone cases, home decor, and more 
* One-Click Generation: Upload design once, get hundreds of mockup variations 
* Auto-Sync with WooCommerce: Generated mockups appear in product galleries immediately 
* Professional Quality: Results indistinguishable from expensive photo shoots 
* Multiple Formats: PNG, JPG, PDF, SVG support with automatic optimization
Product Personalization Engine 
For Customers: Real-Time Design Customization
Enable customers to upload their own designs and see instant previews on professional mockups. The embeddable editor works seamlessly within your WooCommerce product pages and checkout flow.
Customer Experience: 
* Upload Anywhere: Customers add designs directly on product pages 
* Instant Previews: Real-time visualization on professional photography 
* Smart Placement: Automatic design positioning with manual adjustment options 
* Live Customization: Change colors, text, and placement with immediate feedback 
* Seamless Purchase: Personalized products flow through standard WooCommerce checkout
Store Owner Control: 
* Per-Product Settings: Enable/disable personalization on individual products 
* Customizable Interface: Control available tools and options for customers 
* Automatic Print Files: Production-ready files generated with every personalized order 
* Order Management: View customer designs and specifications in WooCommerce admin
Business Impact: 
* Reduce customer service inquiries about customization 
* Command premium pricing for personalized products 
* Increase customer engagement and time on product pages 
* Eliminate returns due to unclear product expectations
<h3>How it Works</h3>
For Store Owners: Product Gallery Creation
Step 1: Connect Products to Templates 
Access your WooCommerce product admin and navigate to the “Create Mockups” tab. Connect products to relevant mockup templates from Dynamic Mockups’ professional library.
Step 2: Upload Your Designs 
Add your artwork in any supported format (PNG, JPG, PDF, SVG). The system automatically optimizes files for best rendering quality across all selected templates.
Step 3: Generate Professional Mockups 
Click “Generate Mockups” to create professional product galleries in under 10 seconds. Select which mockups to add to your WooCommerce product gallery.
Step 4: Automatic Integration 
Generated mockups sync directly to your WooCommerce store. The main product image updates automatically, with additional mockups populating the product gallery.
For Customers: Product Personalization
Step 1: Design Upload 
Customers click “Create with your design” button on product pages. The embeddable editor opens in full-screen mode for optimal design experience.
Step 2: Real-Time Preview 
Upload custom artwork and see instant visualization on professional mockups. Adjust placement, sizing, and positioning with live preview feedback.
Step 3: Customization Options 
Modify colors, add text, and fine-tune design placement. All changes reflect immediately on the professional mockup preview.
Step 4: Seamless Checkout 
Add personalized product to cart with all customization details preserved. Product thumbnail in cart shows the personalized design.
Step 5: Automatic Production Files 
Upon order completion, print-ready files are automatically generated in multiple formats (PDF for offset printing, PNG for digital, vector for screen printing) with proper specifications for production.
Technical Process Flow
Backend Automation: 
* AWS infrastructure processes all mockup generation 
* High-resolution outputs maintain professional quality standards 
* Print files include proper resolution, color profiles, and bleed areas 
* Integration maintains WooCommerce compatibility across all themes
Admin Dashboard Integration: 
* View customer personalizations in WooCommerce order details 
* Download print-ready files directly from order management 
* Access mockup generation history and usage statistics 
* Configure settings through familiar WordPress interface
<h3>Configure</h3>
Initial Setup (15-minute process)
Plugin Installation 
Download Dynamic Mockups plugin from WordPress admin dashboard. Install and activate like any standard WordPress plugin – no special server requirements or complex configurations needed.
Account Connection 
Link your Dynamic Mockups account using secure API credentials. One-time authentication enables access to the complete template library and processing infrastructure.
Product Gallery Configuration
Template Selection 
Browse and select from 1000+ professional mockup templates organized by product category. Preview templates with sample designs to ensure they match your brand aesthetic.
Product Mapping 
Choose which WooCommerce products use automated mockup generation. Enable for individual products, entire categories, or your complete catalog based on your business needs.
Design Asset Management 
Upload your artwork through the WordPress media library or directly within the mockup generation interface. Supports PNG, JPG, PDF, and SVG with automatic optimization.
Generation Settings 
Configure mockup output preferences including resolution, format selection, and batch processing options. Set default selections for streamlined workflow.
Customer Personalization Setup
Product-Level Controls 
Navigate to individual product admin pages to find the “Product Personalization” tab. Enable or disable personalization per product with simple toggle controls.
Mockup Assignment 
Select which mockup templates customers use for personalization. Choose from your connected templates or browse the public template library for additional options.
Interface Customization 
Customize the customer-facing personalization interface including: 
* Available design tools and options 
* File upload limits and accepted formats 
* Color customization capabilities 
* Text addition and font options 
* Design placement and sizing controls
Button Configuration 
Customize the “Customize/Design” button text and placement on product pages. Use shortcodes for custom positioning or rely on automatic placement.
<h3>Get Support</h3>
Join our <a href="https://dynamicmockups.slack.com/join/shared_invite/zt-2ot7wkpch-jzPzbj_74NNQ4_jZFNjuqg#/shared-invite/email" rel="nofollow ugc">Slack community</a> to stay updated with new features and connect with our developers. Whether you need help troubleshooting, or guidance on how to maximize the plugin’s potential, our team is ready to assist you with any issues related to the WordPress plugin.

Dynamic Mockups – Product Gallery & Customizer for WooCommerce

Create product gallery & show customizer to your WooCommerce store. Show customers real-time previews and boost sales with stunning visuals.

Mojarad Screenshot Mockup Carousel vs Dynamic Mockups – Product Gallery & Customizer for WooCommerce