Every way to put it on your storefront

One block. Your storefront, your rules. Try the student-price controls below, then use the settings beside them to make the same thing in your theme.

Lecture hoodie

Rs 4,800

Variant: S

On a product page, just below Add to cart.

Layout: Button · Button style: Theme secondary button · Alignment: Left · Full width: On · Show branding: On

Back view of a person wearing a plain white pullover hoodie with the hood up, standing against a plain light grey background. Face not visible.

Pick a button

Your theme supplies the first two. The outline and orange options bring their own styling. Try each one: the claim flow stays the same.

Your theme's primary button

Whatever your Add to cart looks like, this looks like that.

Button style: Theme primary button

Your theme's secondary button

Subordinate to Add to cart, which is usually the right hierarchy on a product page.

Button style: Theme secondary button

Minimal outline

Borrows the surrounding text colour and nothing else. Safe on any background.

Button style: Minimal outline

The Uni Deals orange

Our colour, not yours. Use it when you want the student offer to interrupt rather than blend in.

Button style: The Uni Deals orange

Unless noted: Layout: Button · Alignment: Left · Full width: Off · Show branding: On. All examples use the default applied message unless a custom message is shown.

Give it room

Keep the button at its natural width, place it anywhere in the row, or fill the whole column.

Left

Alignment: Left · Full width: Off

Center

Alignment: Center · Full width: Off

Right

Alignment: Right · Full width: Off

Full width

Alignment: Left · Full width: On

Every example here uses Button style: Minimal outline.

Give the offer its own space

The banner layout carries its own heading, its own sentence and its own colours, so the offer can be explained where it sits instead of only inside the popup.

On your darkest ground

Layout: Banner · Button style: The Uni Deals orange
Background: var(--bg-deep) · Text: var(--bg)

Exact banner settings

Heading: Students save here
Text: Verify once with The Uni Deals and your discount applies at checkout.
Button label: Get the student price
Banner background: var(--bg-deep)
Banner text color: var(--bg)

Or a quiet tint

Layout: Banner · Button style: Theme primary button
Background: var(--brand-tint) · Text: var(--ink)

Exact banner settings

Heading: A student price, made for you
Text: Verify with your university email or student card to claim your offer.
Button label: Check if you qualify
Banner background: var(--brand-tint)
Banner text color: var(--ink)

Make the details yours

Keep the small credit line or turn it off. Choose what shoppers see after a code is applied.

With the credit line

Show branding: On
Button style: Theme secondary button

Just your button

Show branding: Off
Button style: Theme secondary button

After a code is applied

State previews only. No code has been applied to your cart by these examples. Switch back to the button to try the real claim window.

Default applied message

Student discount applied at checkout

Applied message: Student discount applied at checkout
Button style: Theme primary button · Show branding: Off

Your own applied message

Your student price is ready for checkout

Applied message: Your student price is ready for checkout
Button style: Theme primary button · Show branding: Off

Make it entirely yours

Custom HTML replaces the button and banner. Mark your clickable element with data-tud-trigger. Custom CSS can finish the credit line and applied message, scoped to this mount.

Try your custom trigger

Still studying? Unlock your student price and put more towards the semester.

Preview the applied state to see the scoped .tud-applied style. The credit line above also uses the scoped .tud-powered rule.

Custom HTML: markup shown alongside · Show branding: On · Applied message: Your student price is ready for checkout

Custom HTML

<p>Still studying? <a href="#" data-tud-trigger>Unlock your student price</a> and put more towards the semester.</p>

Custom CSS

#tud-demo-custom .tud-powered {
  font-size: 0.85em !important;
  opacity: 1 !important;
}
#tud-demo-custom .tud-applied {
  padding: var(--sp-4);
  background: var(--brand-tint);
  color: var(--ink);
}

What custom CSS can reach

Three parts the built-in settings leave alone on purpose. Scope each rule to the block, or a rule meant for one placement will follow it everywhere.

#tud-demo-css-credit .tud-powered {
  opacity: 1;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8D857B;
}

The credit line

Keep it, but set it in your own small-print style instead of ours.

Student discount applied at checkout

#tud-demo-css-applied .tud-applied {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #E8F5EC;
  color: #1E7D46;
}

The applied message

Turn the confirmation into whatever your shop uses to say something worked.

#tud-demo-css-button .button {
  width: 100%;
  border-radius: 0;
  padding: 18px 20px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

The button itself

Square it off, set the tracking, fill the column. It still inherits your theme first.

Custom CSS is optional. Everything above is reachable without it if the built-in settings already suit you.

Put it where the decision happens

The opening example shows the product page. Here are three more places to meet your shoppers, wherever your theme supports app blocks.

The home page

In a marketing band, as a reason to start shopping rather than a reason to finish.

Layout: Banner · Button style: Theme primary button · Background: var(--brand-tint) · Text: var(--ink)

Make room for the semester

Everyday pieces for campus and everything after.

Students save hereVerify once with The Uni Deals and your discount applies at checkout.

A collection page

Above the grid, so a student sees the offer before picking anything.

Layout: Button · Button style: Minimal outline · Alignment: Right · Full width: Off

Find your next everyday favourite

A pair of black low-top lace-up sneakers with white soles, shown from behind against a white brick wall on a dark wood floor.

Campus sneakerRs 9,500

A black backpack with two zipped compartments and a front zip pocket, standing upright against a white brick wall.

Daily backpackRs 6,200

A plain white ceramic mug with a straight handle, photographed from directly above on a white background.

Desk mugRs 950

The cart

A last prompt before checkout, for the shopper who did not know the offer existed.

Layout: Button · Button style: Theme secondary button · Alignment: Left · Full width: On

Before you check out

A final reminder for a student who missed the offer while browsing.

Cart placement preview

Add the Student price app block wherever your theme supports app blocks, then move it in the theme editor. Built-in settings need no code. Custom HTML and CSS are optional.

Back to The Uni Deals