Theme Management

Overview

The Theme Management feature enables you to install the Ecomdrop Theme 2.5 directly from a Git repository to your Shopify store. The theme is optimized for dropshipping, features Ecomdrop AI integration, and can be updated through version control.

Theme Features

The Ecomdrop Theme 2.5 includes:

Design
Performance
Integration
Customization

Modern, responsive design that works on all devices
Customizable color schemes and typography
Multiple layout options for product pages
Professional, conversion-optimized checkout flow

Installing the Theme

Access Theme Management

Navigate to the Theme 2.5 page in your Ecomdrop IA Connector dashboard.

Review Theme Information

Review the theme features and characteristics listed on the page.

Click Install

Click the Instalar Tema (Install Theme) button.

Installing a theme does not automatically activate it. You’ll need to activate it manually from your Shopify admin.

Confirm Installation

Confirm that you want to install “Ecomdrop Theme 2.5” in the confirmation dialog.

Wait for Installation

The app will:

Download the theme from the Git repository
Extract theme files
Upload to your Shopify store
Create a new unpublished theme

This process typically takes 30-60 seconds.

Verify Installation

Upon success, you’ll see a confirmation message. The theme is now installed but not active.

Git Repository Configuration

The theme is sourced from a Git repository configured via environment variables:

GitHub Configuration

Public Repository

For public GitHub repositories:

THEME_2_5_GIT_REPO=Mercaline2024/Thema-ecomdro2.5
THEME_2_5_GIT_BRANCH=main
THEME_2_5_GIT_PROVIDER=github

The app constructs a download URL:

https://github.com/Mercaline2024/Thema-ecomdro2.5/archive/refs/heads/main.zip

Private Repository

For private GitHub repositories, include a personal access token:

THEME_2_5_GIT_REPO=Mercaline2024/Thema-ecomdro2.5
THEME_2_5_GIT_BRANCH=main
THEME_2_5_GIT_PROVIDER=github
THEME_2_5_GIT_TOKEN=github_pat_XXXXXXXXXXXXX

The app uses the GitHub API with authentication to download the repository.

GitLab Configuration

For GitLab repositories:

THEME_2_5_GIT_REPO=owner/repository
THEME_2_5_GIT_BRANCH=main
THEME_2_5_GIT_PROVIDER=gitlab
THEME_2_5_GIT_TOKEN=glpat-XXXXXXXXXXXXX  # For private repos

Direct URL

Alternatively, provide a direct download URL:

THEME_2_5_URL=https://example.com/theme-2.5.zip

Direct URLs bypass Git configuration and download directly from the specified location.

Installation Process

Behind the scenes, the app performs these steps:

Download Theme

The app fetches the theme ZIP file from:

Git repository (GitHub/GitLab API)
Direct URL
Public repository archive URL

Extract Files

Theme files are extracted from the ZIP archive to a temporary directory.

Prepare Theme Assets

The app organizes theme files into Shopify’s expected structure:

assets/ - CSS, JavaScript, images
config/ - Theme settings JSON
layout/ - Layout Liquid files
locales/ - Translation files
sections/ - Section Liquid files
snippets/ - Reusable Liquid snippets
templates/ - Page templates

Upload to Shopify

Using the Shopify GraphQL Admin API, the app:

Creates a new unpublished theme
Uploads all theme files via the ThemeFilesUpsert mutation
Sets the theme name to “Ecomdrop Theme 2.5”

Verify Upload

The app confirms all files were uploaded successfully and returns the new theme ID.

Activating the Theme

After installation:

Access Shopify Admin

Go to your Shopify admin panel → Online Store → Themes.

Find the Theme

Locate “Ecomdrop Theme 2.5” in the Theme library section (unpublished themes).

Preview the Theme

Click Customize to preview and customize the theme before publishing.

Use Shopify’s theme editor to adjust colors, fonts, sections, and settings.

Publish the Theme

When ready, click Publish to make it your active theme.

Publishing will replace your current active theme. Consider backing up your current theme first.

Theme Preview

The app includes a built-in theme preview feature:

Viewing Preview

In the Vista Previa (Preview) section:

The app displays an iframe showing your active theme

The preview URL includes the theme ID parameter:

https://your-store.myshopify.com/?preview_theme_id=123456789

Click Abrir en nueva pestaña (Open in new tab) to view in a full browser window

Preview Limitations

Some Shopify stores may have iframe restrictions. If the preview doesn’t load, use the “Open in new tab” button.

Version Management

Updating the Theme

To update to a new version:

Update Git Repository

Ensure the latest theme version is committed to your Git repository branch.

Reinstall Theme

Click Instalar Tema again in the app. This creates a new unpublished theme with the latest version.

Test New Version

Preview and test the new theme version using Shopify’s theme customizer.

Publish Updated Theme

When satisfied, publish the new version. The old version remains in your theme library as a backup.

Multiple Versions

You can have multiple theme versions installed:

Production (active)
Staging (unpublished)
Development (unpublished)
Backup versions

Shopify allows up to 20 themes per store.

Theme Configuration Files

The Ecomdrop Theme includes configuration in config/settings_schema.json:

General Settings
Homepage
Product Pages
AI Integration

Logo and favicon
Color schemes
Typography
Layout options

Customizing the Theme

After installation, customize through Shopify’s theme editor:

Theme Settings: Global settings like colors and fonts
Sections: Add, remove, or reorder page sections
Navigation: Configure menus and navigation structure
Checkout: Customize checkout appearance (Shopify Plus only)

API Integration

The theme installation uses Shopify’s GraphQL Admin API:

Creating Theme

mutation CreateTheme($name: String!) {
  themeCreate(name: $name) {
    theme {
      id
      name
    }
    userErrors {
      field
      message
    }
  }
}

Uploading Files

mutation UploadThemeFiles($themeId: ID!, $files: [ThemeFileInput!]!) {
  themeFilesUpsert(themeId: $themeId, files: $files) {
    upsertedThemeFiles {
      filename
    }
    userErrors {
      field
      message
    }
  }
}

Troubleshooting

Installation fails

Check that environment variables are configured correctly
Verify Git token has read access to the repository
Ensure repository and branch names are correct
Check server logs for detailed error messages
Verify network connectivity to GitHub/GitLab

Theme appears broken after installation

Ensure all theme files were uploaded (check file count)
Verify theme structure matches Shopify requirements
Check for missing assets (images, CSS, JavaScript)
Review theme errors in Shopify admin

Preview not loading

Try opening preview in a new tab instead of iframe
Check browser console for errors
Verify the theme ID is correct
Ensure store allows theme previews

Cannot download from private repository

Verify Git token is valid and not expired
Ensure token has appropriate repository read permissions
Check that repository name includes owner (e.g., owner/repo)
For GitHub, use Personal Access Token (classic) with repo scope

Theme not appearing in Shopify admin

Wait a few minutes for Shopify to process the upload
Refresh the Themes page in Shopify admin
Check for API errors in server logs
Verify API permissions include theme write access

Best Practices

Backup First

Always duplicate your current theme before publishing a new one to avoid data loss.

Test Thoroughly

Preview and test all pages before publishing the theme to production.

Version Control

Use Git branches for theme development, staging, and production versions.

Staged Rollout

Install new versions as unpublished themes and test before making them live.

Monitor Performance

Check theme performance metrics after installation using Shopify’s analytics.

Configuration - Configure app settings before installing theme
AI Configuration - Set up AI assistant to work with the theme

Overview

Getting Started

Core Features

Integrations

Configuration

Deployment

Overview

Theme Features

Installing the Theme

Git Repository Configuration

GitHub Configuration

GitLab Configuration

Direct URL

Installation Process

Activating the Theme

Theme Preview

Viewing Preview

Preview Limitations

Version Management

Updating the Theme

Multiple Versions

Theme Configuration Files

Customizing the Theme

API Integration

Creating Theme

Uploading Files

Troubleshooting

Best Practices

Backup First

Test Thoroughly

Version Control

Staged Rollout

Monitor Performance

Overview

Getting Started

Core Features

Integrations

Configuration

Deployment

Documentation Index

​Overview

​Theme Features

​Installing the Theme

​Git Repository Configuration

​GitHub Configuration

​GitLab Configuration

​Direct URL

​Installation Process

​Activating the Theme

​Theme Preview

​Viewing Preview

​Preview Limitations

​Version Management

​Updating the Theme

​Multiple Versions

​Theme Configuration Files

​Customizing the Theme

​API Integration

​Creating Theme

​Uploading Files

​Troubleshooting

​Best Practices

Backup First

Test Thoroughly

Version Control

Staged Rollout

Monitor Performance

​Related Features

Overview

Theme Features

Installing the Theme

Git Repository Configuration

GitHub Configuration

GitLab Configuration

Direct URL

Installation Process

Activating the Theme

Theme Preview

Viewing Preview

Preview Limitations

Version Management

Updating the Theme

Multiple Versions

Theme Configuration Files

Customizing the Theme

API Integration

Creating Theme

Uploading Files

Troubleshooting

Best Practices

Related Features