> ## 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.

# Schedule Your Sponsored Listings Like a Pro

> Dayparting lets you control exactly when your sponsored listings appear, so you're spending budget during peak shopping hours—not while everyone's asleep.

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">February 5, 2026</Badge>
  <Badge color="blue" size="sm" icon="rectangle-ad">Ad Platform</Badge>
  <Badge color="green" size="sm" icon="sparkles">New Feature</Badge>
</div>

<div className="cl-mockup-wrapper">
  <div className="cl-mockup-card">
    <div
      style={{
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
  marginBottom: "12px",
  paddingBottom: "8px",
  borderBottom: "1px solid #E5E7EB"
}}
    >
      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
        <div style={{ width: "24px", height: "24px", borderRadius: "4px", background: "#DBEAFE" }} />

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

      <div
        style={{
    width: "28px",
    height: "16px",
    borderRadius: "8px",
    background: "#3B82F6",
    position: "relative"
  }}
      >
        <div
          style={{
      position: "absolute",
      right: "2px",
      top: "2px",
      width: "12px",
      height: "12px",
      borderRadius: "50%",
      background: "white"
    }}
        />
      </div>
    </div>

    <div style={{ display: "flex", gap: "4px", marginBottom: "10px" }}>
      {["M", "T", "W", "T", "F"].map((_, i) => (
                  <div key={i} style={{
                    flex: 1,
                    height: "22px",
                    borderRadius: "4px",
                    border: "1px solid #3B82F6",
                    background: "#DBEAFE",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center"
                  }}>
                    <div style={{ width: "10px", height: "6px", background: "#3B82F6", borderRadius: "1px" }}></div>
                  </div>
                ))}

      {["S", "S"].map((_, i) => (
                  <div key={i + 5} style={{
                    flex: 1,
                    height: "22px",
                    borderRadius: "4px",
                    border: "1px solid #E5E7EB",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center"
                  }}>
                    <div style={{ width: "10px", height: "6px", background: "#E8E8ED", borderRadius: "1px" }}></div>
                  </div>
                ))}
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: "6px", marginBottom: "10px" }}>
      {[0, 1].map((i) => (
                  <div key={i} style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "6px",
                    padding: "6px 8px",
                    background: "#F5F5F7",
                    borderRadius: "4px"
                  }}>
                    <div style={{
                      flex: 1,
                      height: "22px",
                      borderRadius: "4px",
                      border: "1px solid #E5E7EB",
                      background: "#FFFFFF",
                      display: "flex",
                      alignItems: "center",
                      padding: "0 6px"
                    }}>
                      <div style={{ height: "8px", width: "36px", background: "#E8E8ED", borderRadius: "2px" }}></div>
                    </div>
                    <div style={{ width: "10px", height: "1px", background: "#D1D1D6" }}></div>
                    <div style={{
                      flex: 1,
                      height: "22px",
                      borderRadius: "4px",
                      border: "1px solid #E5E7EB",
                      background: "#FFFFFF",
                      display: "flex",
                      alignItems: "center",
                      padding: "0 6px"
                    }}>
                      <div style={{ height: "8px", width: "36px", background: "#E8E8ED", borderRadius: "2px" }}></div>
                    </div>
                  </div>
                ))}
    </div>

    <div
      style={{
  display: "grid",
  gridTemplateColumns: "28px repeat(7, 1fr)",
  gap: "2px",
  marginBottom: "10px",
  background: "#F5F5F7",
  padding: "8px",
  borderRadius: "6px"
}}
    >
      <div />

      {[0, 1, 2, 3, 4, 5, 6].map((i) => (
                  <div key={i} style={{ height: "12px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <div style={{ width: "8px", height: "6px", background: "#E8E8ED", borderRadius: "1px" }}></div>
                  </div>
                ))}

      {[0, 1, 2, 3].map((row) => (
                  <>
                    <div key={`label-${row}`} style={{ height: "10px", display: "flex", alignItems: "center" }}>
                      <div style={{ height: "6px", width: "20px", background: "#E8E8ED", borderRadius: "1px" }}></div>
                    </div>
                    {[0, 1, 2, 3, 4, 5, 6].map((col) => (
                      <div key={`${row}-${col}`} style={{
                        height: "10px",
                        borderRadius: "2px",
                        background: (row !== 2 && col < 5) ? "#3B82F6" : "#E8E8ED",
                        opacity: (row !== 2 && col < 5) ? 0.5 : 1
                      }}></div>
                    ))}
                  </>
                ))}
    </div>

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

      <div
        style={{
    width: "70px",
    height: "24px",
    borderRadius: "4px",
    background: "#3B82F6",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}
      >
        <div style={{ height: "8px", width: "50px", background: "rgba(255,255,255,0.4)", borderRadius: "1px" }} />
      </div>
    </div>
  </div>
</div>

### Dayparting for Sponsored Listings

Stop wasting ad spend on off-hours traffic. Dayparting gives you granular control over when your sponsored listings are active, letting you align visibility with your customers' actual shopping patterns.

#### Key Benefits

1. **Maximize ROI**: Focus your budget on hours when conversion rates are highest
2. **Reduce Wasted Spend**: Automatically pause ads during low-traffic periods
3. **Match Customer Behavior**: Align ad visibility with when your audience actually shops

#### How It Works

* **Day Selection**: Toggle individual days on or off with a single click
* **Time Intervals**: Set one time window per day
* **Visual Grid**: See your entire weekly schedule at a glance
* **Instant Updates**: Changes take effect immediately—no waiting for the next day

#### Use Cases

* **Lunch Rush**: Restaurant suppliers can target 10am-2pm weekdays
* **Evening Shoppers**: Consumer goods can focus on 6pm-10pm when people browse
* **Weekend Warriors**: Home improvement can concentrate spend on Saturday mornings

<ChangelogActions />