Studio Docs

Compose a Seasonal Landing Page in 15 Minutes

Level: Intermediate. Assumes you’ve done the 5-minute Quickstart and glanced at Working with Templates + Working with Sections. Glossary refresher: Template, Section, Section Slot, Exposed Prop, Save / Deploy.

The 5-minute Quickstart taught you to open an existing Template and change a headline. This walkthrough goes one level deeper: you’re building a Spring 2026 landing page from a Template that’s designed for reuse. The same Template drives Spring, Summer, Fall, and Winter campaigns. You’ll pick Sections, fill Section Slots, override exposed props, save + deploy (end-to-end, ~15 minutes).

Do It With a Skill

Composing is yours, in Studio. The template you compose onto is built by a developer, with build-freeform-template for a one-off campaign page or build-connected-template for a repeatable one.

What You’ll Have at the End

A new page at /campaigns/spring-2026 (or your team’s equivalent URL) with:

  • A seasonal Hero (headline, subhead, image, primary CTA).
  • Three featured product cards.
  • A short promo strip.
  • A newsletter sign-up in a Section Slot near the footer.

Live on the preview environment. Ready for your team to review before you Deploy to production.

Prerequisites: Read This First

Your engineering team must have set up:

  • A Campaign Template bound to a campaign content type (or an equivalent).
  • A campaign entry created and populated with Spring 2026 content (headline, subhead, featured product references, promo text). If it’s not there yet, ping engineering or your CMS admin. This walkthrough won’t work with an empty entry.
  • The Sections you’ll use: Seasonal Hero, Featured Product Card, Promo Strip, Newsletter Sign-up. Names may differ. The walkthrough uses generic names. Substitute your team’s actual Section names.

If any of those are missing, this becomes a “let me help you spec what to ask engineering for” exercise (still valuable, but not a 15-min build). Come back when everything’s ready.

Step 1: Open the Campaign Template (1 Min)

  • In Contentstack, open Studio, select your project, and go to Compositions, then the Templates tab.
  • Find Campaign Template. Click to open. The canvas loads with placeholder / previous-campaign content.
  • Notice the top-right of the header: the entry selector. This is where you’ll switch the canvas to render against the Spring 2026 entry.

Step 2: Point the Canvas at Your Spring 2026 Entry (30 Sec)

  • Click the entry selector.
  • Search / pick Spring 2026 (or whatever your team named the entry).
  • Canvas re-renders with Spring 2026’s headline, subhead, and product references pulled from the entry.

You’re now viewing the Template’s layout applied to your actual campaign content. Every change from here forward is scoped to how the Template + this specific entry compose. The entry data itself lives in the Content module, not here.

Step 3: Drop the Seasonal Hero (2 Min)

The Hero is the topmost Section. If it’s already there (Template shipped with a Hero placeholder), skip to the next step. If not:

  • Open the Palette (left panel).
  • Under the Sections group, find Seasonal Hero. Drag it onto the canvas at the top.
  • The Hero renders with the entry’s hero_headline, hero_subhead, hero_image, and hero_cta auto-bound, no manual wiring needed.

If the Hero looks empty:

  • Open the entry (in Content, then Entries, then Spring 2026): the hero_* fields probably aren’t filled.
  • Fill them in Contentstack. Save the entry.
  • Come back to the canvas. It auto-refreshes.

The Campaign Template usually has a Card Grid Section wired to a repeating list of product references. Confirm the Section is on the canvas. If it’s a fresh Template, drag it in.

  • Select the Card Grid (click it on the canvas, or click the layer in the Layers panel on the left).
  • The Properties panel (right) shows the Card Grid’s exposed props. Look for:
    • Layout: a choice prop (2-col, 3-col, 4-col). Pick 3-col for Spring 2026.
    • Show price: a boolean. Turn on.
    • CTA label: a text override. Set to “Shop now”.
  • The list of cards comes from the entry’s featured_products reference field. Each card auto-renders one product. To change which products appear, edit the entry’s featured_products field in Contentstack, not here.

If you don’t see cards but the field has products, click the Repeater at the top of the Card Grid in the Layers panel and toggle Preview Mode in Properties: the canvas defaults to showing one iteration. Preview Mode shows all.

Step 5: Add a Promo Strip Between Hero and Card Grid (2 Min)

  • In the Palette, go to Sections, then find Promo Strip. Drag it onto the canvas between the Hero and the Card Grid.
  • Select the Promo Strip. In Properties, its promo_text field is bound to the entry. The copy comes from Spring 2026’s promo_text value.
  • If you want to override the copy for THIS page only (without editing the entry, e.g., a one-off tagline), look for an Override option in Properties, then the Bindings section (some Sections expose this, some don’t. Ask engineering if you can’t find it for a specific Section).

The Campaign Template has a Section Slot designed for a per-campaign call-to-action: a newsletter sign-up, a webinar invite, a survey, etc. It’s an empty carved-out region right above the footer.

  • Scroll the canvas to just above the footer. You’ll see a placeholder labeled ”Drop a Section here” (the Section Slot).
  • In the Palette, go to Sections, then find Newsletter Sign-up. Drag it onto the Section Slot.
  • The Newsletter Sign-up Section renders with its default headline and form. Select it and check Properties:
    • Headline: override to “Get Spring drops in your inbox”.
    • Button label: override to “Sign up”.

Section Slots differ from regular Slots: the surrounding Template design (footer margin, background, etc.) stays intact. You’re only filling the carved-out region.

Step 7: Save + Preview (30 Sec)

  • Save (top-right button). This writes your composition as a draft.
  • Your changes are now visible to you, in this canvas, plus in any Live Preview surface your engineering team has wired.
  • Visit your team’s preview URL for /campaigns/spring-2026 in another tab. Everything you just composed should be there.

Step 8: Deploy to Preview Environment (30 Sec)

  • Confirm the preview looks right.
  • Deploy: pick the preview environment (not production yet). Deploy is per-environment. You can Deploy to preview freely for reviews without touching production.
  • Your team + stakeholders can now review at the preview URL.

Step 9: Deploy to Production (final ~1 Min)

Once approved:

  • Deploy again, this time select the production environment.
  • Live within seconds. CDN caches may take slightly longer to serve the fresh version to everyone.

Step 10: What If Something Looks Off?

Every state Studio Deployed is snapshotted. If Spring 2026 looks broken on production:

  • Open the Campaign Template.
  • Open the overflow menu, then Versions (see Rolling back a bad Deploy in Publishing and preview).
  • Hover the previous version, click Restore, then Deploy to production again.

~2 clicks. This is why Deploy is safe.

What You Learned

  • Point a Template at a specific entry via the entry selector.
  • Compose a page from Sections in the palette.
  • Configure Section behavior via exposed props (choice / boolean / text overrides).
  • Fill a Section Slot without disrupting the Template’s surrounding design.
  • Preview via Save, go live via Deploy, roll back via Versions.

Everything else in the author docs is deeper flavour on these five moves. When you next hit an unfamiliar Section or an override you haven’t seen, the Glossary + Working-with-Sections page cover it.

Next Steps

  • Repeat for Summer 2026. Same Template, new entry, same steps. This is the whole point of the Template pattern. Should take <5 minutes now that you know the flow.
  • Publishing and preview: deeper on Save vs Deploy vs Publish, environments, Versions.
  • Troubleshooting for Authors: top 8 “something looks wrong” symptoms.
  • Glossary: bookmark it.

See Also