CMS

Shopify

Overview

Shopify is one of the world's largest cloud-based e-commerce platforms. It provides comprehensive e-commerce functionality and an app ecosystem, serving businesses from small startups to large enterprises.

Details

Shopify is a cloud-based e-commerce platform founded in Canada in 2006. Built on Ruby on Rails and delivered as a SaaS (Software as a Service) model, it powers over 5 million active stores across more than 175 countries. The platform uses Liquid as its templating engine, achieving a balance between customizability and ease of use. Through its App Store offering over 10,000 apps, merchants can extend functionality for payments, shipping, marketing, inventory management, and more. Shopify provides diverse solutions including Shopify Plus, Shopify POS, and Shop Pay to meet various business needs and support omnichannel selling. Supporting both GraphQL and REST APIs, it easily enables headless commerce and integration with external systems.

Pros and Cons

Pros

• Easy Setup: Build an e-commerce site quickly without technical knowledge
• Rich App Ecosystem: Freely extend functionality with over 10,000 apps
• Stable Operation: No server management required with 99.99% uptime guarantee
• Comprehensive Features: Centralized management of payments, shipping, inventory, and marketing
• Strong Support: 24/7 customer support
• Multi-channel Selling: Sell on Facebook, Instagram, Amazon, and more
• Mobile Ready: Both admin panel and storefront are fully mobile-responsive

Cons

• Monthly Fees: Ongoing costs starting from $39/month
• Customization Limits: Core system cannot be modified due to SaaS nature
• Transaction Fees: Additional fees when using external payment gateways
• Limited Data Ownership: Platform-dependent with restrictions on data export
• Limited Japanese Support: Primarily English-focused with limited Japanese resources

Key Links

• Shopify Official Site
• Shopify Developer Documentation
• Shopify Admin API Reference
• Liquid Template Language
• Shopify App Store
• Shopify Community

Usage Examples

Initial Shopify Store Setup

# Install Shopify CLI
npm install -g @shopify/cli@latest

# Create a new app project
shopify app init my-shopify-app

# Create a development store
shopify store create --name="My Dev Store"

# Start local development environment
shopify app dev

Basic Liquid Templates

<!-- product.liquid - Product page template -->
{% assign current_variant = product.selected_or_first_available_variant %}

<div class="product-page">
  <h1>{{ product.title }}</h1>
  
  <!-- Product images -->
  <div class="product-images">
    {% for image in product.images %}
      <img src="{{ image | img_url: '500x500' }}" 
           alt="{{ product.title }}">
    {% endfor %}
  </div>
  
  <!-- Product price -->
  <div class="product-price">
    {% if product.compare_at_price > product.price %}
      <span class="sale-price">{{ product.price | money }}</span>
      <span class="original-price">{{ product.compare_at_price | money }}</span>
    {% else %}
      <span>{{ product.price | money }}</span>
    {% endif %}
  </div>
  
  <!-- Add to cart form -->
  <form action="/cart/add" method="post">
    <input type="hidden" name="id" value="{{ current_variant.id }}">
    
    <!-- Variant selection -->
    {% if product.has_only_default_variant == false %}
      {% for option in product.options_with_values %}
        <label>{{ option.name }}</label>
        <select name="options[{{ option.name }}]">
          {% for value in option.values %}
            <option value="{{ value }}">{{ value }}</option>
          {% endfor %}
        </select>
      {% endfor %}
    {% endif %}
    
    <button type="submit">Add to Cart</button>
  </form>
</div>

Using Shopify Admin API (GraphQL)

// Initialize Shopify Admin API client
import { shopifyApi, ApiVersion } from '@shopify/shopify-api';

const shopify = shopifyApi({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  scopes: ['read_products', 'write_products'],
  hostName: process.env.HOST,
  apiVersion: ApiVersion.October23,
});

// Fetch product information (GraphQL)
async function getProduct(session, productId) {
  const client = new shopify.clients.Graphql({ session });
  
  const query = `
    query getProduct($id: ID!) {
      product(id: $id) {
        id
        title
        description
        priceRangeV2 {
          minVariantPrice {
            amount
            currencyCode
          }
        }
        images(first: 5) {
          edges {
            node {
              url
              altText
            }
          }
        }
        variants(first: 10) {
          edges {
            node {
              id
              title
              price
              inventoryQuantity
            }
          }
        }
      }
    }
  `;
  
  const response = await client.query({
    data: {
      query,
      variables: { id: `gid://shopify/Product/${productId}` }
    }
  });
  
  return response.body.data.product;
}

Shopify App Development (Webhooks)

// Configure webhook handlers
import { DeliveryMethod } from '@shopify/shopify-api';

// Register webhook handlers
shopify.webhooks.addHandlers({
  // Order creation webhook
  ORDERS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: '/api/webhooks/orders/create',
    callback: async (topic, shop, body, webhookId) => {
      const order = JSON.parse(body);
      console.log(`New order #${order.order_number} created`);
      
      // Order processing logic
      await processNewOrder(order);
    },
  },
  
  // Product update webhook
  PRODUCTS_UPDATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: '/api/webhooks/products/update',
    callback: async (topic, shop, body, webhookId) => {
      const product = JSON.parse(body);
      console.log(`Product "${product.title}" updated`);
      
      // Inventory sync or price updates
      await syncProductData(product);
    },
  },
});

// Webhook verification middleware
app.post('/api/webhooks/*', express.raw({ type: 'application/json' }), async (req, res) => {
  try {
    await shopify.webhooks.process({
      rawBody: req.body,
      rawRequest: req,
      rawResponse: res,
    });
  } catch (error) {
    console.error('Webhook processing error:', error);
    res.status(500).send(error.message);
  }
});

Using Shopify Storefront API

// Create Storefront API client
import { createStorefrontApiClient } from '@shopify/storefront-api-client';

const client = createStorefrontApiClient({
  storeDomain: 'your-store.myshopify.com',
  apiVersion: '2023-10',
  publicAccessToken: process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
});

// Create cart and add products
async function createCart(variantId, quantity) {
  const mutation = `
    mutation createCart($input: CartInput!) {
      cartCreate(input: $input) {
        cart {
          id
          checkoutUrl
          totalQuantity
          lines(first: 10) {
            edges {
              node {
                id
                quantity
                merchandise {
                  ... on ProductVariant {
                    id
                    title
                    price {
                      amount
                      currencyCode
                    }
                  }
                }
              }
            }
          }
          cost {
            totalAmount {
              amount
              currencyCode
            }
          }
        }
        userErrors {
          field
          message
        }
      }
    }
  `;
  
  const variables = {
    input: {
      lines: [{
        merchandiseId: variantId,
        quantity: quantity
      }]
    }
  };
  
  const { data, errors } = await client.request(mutation, { variables });
  
  if (errors) {
    throw new Error(errors[0].message);
  }
  
  return data.cartCreate.cart;
}

Implementing Custom Discount Features

// Implement Shopify Functions (Discount API)
// functions/discounts/volume-discount.js

export default {
  async run(input) {
    const configuration = JSON.parse(
      input?.discountNode?.metafield?.value ?? "{}"
    );
    
    // Calculate volume discounts
    const targets = input.cart.lines
      .filter(line => line.quantity >= configuration.minimumQuantity)
      .map(line => {
        const percentageDiscount = configuration.percentage;
        
        return {
          productVariant: {
            id: line.merchandise.id,
          },
          value: {
            percentage: {
              value: percentageDiscount.toString(),
            },
          },
        };
      });
    
    // No discount case
    if (!targets.length) {
      return { discounts: [] };
    }
    
    // Apply discounts
    return {
      discounts: [{
        targets,
        message: `${configuration.percentage}% OFF - Volume discount applied`,
      }],
    };
  },
};

// GraphQL schema definition
// extensions/volume-discount/schema.graphql
"""
Volume-based discount configuration
"""
input Configuration {
  minimumQuantity: Int!
  percentage: Float!
}

These examples demonstrate the major development patterns of the Shopify platform. From theme customization with Liquid, extending admin functionality with Admin API, building custom storefronts with Storefront API, event-driven processing with webhooks, to advanced customization with Shopify Functions, they cover a wide range of development scenarios.