> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Easier, More Powerful Sponsored Products Creation

> A completely redesigned campaign creation flow that guides you through product selection, budgeting, and targeting in clear steps—so you can launch campaigns faster with fewer mistakes.

export const ChangelogActions = () => {
  return <>
      <style>{`
        .changelog-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e5e7eb;
        }
        
        [data-theme="dark"] .changelog-actions {
          border-top-color: #374151;
        }
        
        .changelog-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 9999px;
          border: 1px solid #d1d5db;
          background: transparent;
          color: #6b7280;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .changelog-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        [data-theme="dark"] .changelog-btn {
          border-color: #4b5563;
          color: #9ca3af;
        }
        
        [data-theme="dark"] .changelog-btn:hover {
          border-color: #6b7280;
          background: #1f2937;
        }
      `}</style>
      <div className="changelog-actions">
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    btn.innerHTML = "❤️ Like";
    btn.style.borderColor = "#ec4899";
  }}>
          🤍 Like
        </button>
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    navigator.clipboard.writeText(window.location.href);
    const originalContent = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    btn.style.borderColor = "#22c55e";
    btn.style.color = "#22c55e";
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.style.borderColor = "";
      btn.style.color = "";
    }, 2000);
  }}>
          ↗ Share
        </button>
      </div>
    </>;
};

<div className="cl-badge-group">
  <Badge color="gray" size="sm" icon="calendar">January 28, 2026</Badge>
  <Badge color="blue" size="sm" icon="rectangle-ad">Ad Platform</Badge>
  <Badge color="orange" size="sm" icon="arrow-up">Improvement</Badge>
</div>

<div className="cl-mockup-wrapper">
  <div className="cl-mockup-card">
    <div
      style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  gap: "8px",
  marginBottom: "12px",
  paddingBottom: "10px",
  borderBottom: "1px solid #E5E7EB"
}}
    >
      <div style={{
                width: "20px",
                height: "20px",
                borderRadius: "50%",
                background: "#22C55E",
                color: "white",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: "10px",
                fontWeight: "600"
              }}>✓</div>

      <div style={{ width: "24px", height: "2px", background: "#22C55E" }} />

      <div style={{
                width: "20px",
                height: "20px",
                borderRadius: "50%",
                background: "#3B82F6",
                color: "white",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: "10px",
                fontWeight: "600"
              }}>2</div>

      <div style={{ width: "24px", height: "2px", background: "#E8E8ED" }} />

      <div style={{
                width: "20px",
                height: "20px",
                borderRadius: "50%",
                background: "#E8E8ED",
                color: "#9CA3AF",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: "10px",
                fontWeight: "600"
              }}>3</div>
    </div>

    <div style={{ marginBottom: "12px" }}>
      <div style={{ height: "10px", width: "80px", marginBottom: "8px", background: "#D1D1D6", borderRadius: "2px" }} />

      <div style={{ display: "flex", gap: "6px" }}>
        {[true, true, false].map((selected, i) => (
                        <div key={i} style={{
                          width: "48px",
                          height: "48px",
                          borderRadius: "6px",
                          border: `2px solid ${selected ? "#3B82F6" : "#E5E7EB"}`,
                          background: "#F5F5F7",
                          position: "relative"
                        }}>
                          <div style={{ width: "100%", height: "100%", background: "#E8E8ED", borderRadius: "4px" }}></div>
                          {selected && (
                            <div style={{
                              position: "absolute",
                              top: "-4px",
                              right: "-4px",
                              width: "14px",
                              height: "14px",
                              background: "#3B82F6",
                              color: "white",
                              borderRadius: "50%",
                              fontSize: "8px",
                              display: "flex",
                              alignItems: "center",
                              justifyContent: "center"
                            }}>&#10003;</div>
                          )}
                        </div>
                      ))}

        <div style={{
                      width: "48px",
                      height: "48px",
                      borderRadius: "6px",
                      border: "2px dashed #E5E7EB",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      color: "#9CA3AF",
                      fontSize: "16px"
                    }}>+</div>
      </div>
    </div>

    <div style={{ marginBottom: "12px" }}>
      <div style={{ height: "10px", width: "50px", marginBottom: "8px", background: "#D1D1D6", borderRadius: "2px" }} />

      <div style={{ display: "flex", gap: "8px" }}>
        <div
          style={{
      flex: 1,
      height: "32px",
      borderRadius: "6px",
      border: "1px solid #E5E7EB",
      display: "flex",
      alignItems: "center",
      padding: "0 8px"
    }}
        >
          <div style={{ width: "12px", height: "12px", background: "#D1D1D6", borderRadius: "2px", marginRight: "6px" }} />

          <div style={{ height: "10px", width: "50px", background: "#E8E8ED", borderRadius: "2px" }} />
        </div>

        <div
          style={{
      flex: 0.6,
      height: "32px",
      borderRadius: "6px",
      border: "1px solid #E5E7EB",
      display: "flex",
      alignItems: "center",
      padding: "0 8px"
    }}
        >
          <div style={{ height: "10px", width: "40px", background: "#E8E8ED", borderRadius: "2px" }} />
        </div>
      </div>
    </div>

    <div
      style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  padding: "8px",
  background: "#F5F5F7",
  borderRadius: "6px",
  marginBottom: "12px"
}}
    >
      <div style={{ height: "10px", width: "100px", background: "#E8E8ED", borderRadius: "2px" }} />

      <div style={{ width: "12px", height: "12px", background: "#E8E8ED", borderRadius: "2px" }} />
    </div>

    <div
      style={{
  display: "flex",
  justifyContent: "flex-end",
  gap: "6px",
  paddingTop: "10px",
  borderTop: "1px solid #E5E7EB"
}}
    >
      <div
        style={{
    width: "50px",
    height: "28px",
    borderRadius: "6px",
    background: "#FFFFFF",
    border: "1px solid #E5E7EB",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}
      >
        <div style={{ height: "10px", width: "30px", background: "#E8E8ED", borderRadius: "2px" }} />
      </div>

      <div
        style={{
    width: "80px",
    height: "28px",
    borderRadius: "6px",
    background: "#3B82F6",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}
      >
        <div style={{ height: "10px", width: "50px", background: "rgba(255,255,255,0.4)", borderRadius: "2px" }} />
      </div>
    </div>
  </div>
</div>

### Redesigned Campaign Creation

We rebuilt the sponsored products campaign creation flow from the ground up. The new step-by-step wizard walks you through each decision, validates as you go, and shows exactly where you are in the process.

#### What's New

1. **Step-by-Step Wizard**: Clear progress indicator shows exactly where you are
2. **Visual Product Selection**: Browse and select products with thumbnail previews
3. **Smart Defaults**: Budget and targeting pre-filled based on your history
4. **Inline Validation**: Catch errors before you submit, not after

#### Key Improvements

* **Faster Setup**: Most campaigns can be created in under 2 minutes
* **Fewer Errors**: Required fields are clearly marked and validated in real-time
* **Better Product Selection**: Multi-select products with visual confirmation
* **Advanced Options**: Power users can expand additional settings without cluttering the basic flow

#### Migration Notes

Existing campaigns are unaffected. Rolling out now across marketplaces.

<ChangelogActions />