Product drop
ProProductv1.0.0
Build anticipation for a launch, then sell it the second it goes live. Before the drop, a large image sits beside your story, a countdown to the real launch time in your store's time zone and an email sign-up that adds shoppers to your customers, subscribed to email marketing and tagged for this drop, ready for a launch email from Shopify Email. At the launch moment the section switches by itself, without a reload, to the product with its price, options and Add to cart, honest low stock when Shopify tracks inventory, and a sold-out message when it's gone. Leave the date empty to use it as a featured product hero.
Good for: Limited editions and product drops · Pre-launch email sign-ups · A featured product hero
When to use it
Use it at the top of your home page or a launch page when you’re releasing a limited edition or a new product on a set date.
- Build interest before the launch. A countdown to the exact launch time and an email sign-up turn early visitors into a list you can email on launch day.
- Selling starts on time. At the launch moment the section switches to the product’s price, options and Add to cart by itself, with no reload, for shoppers who are already on the page.
- Honest stock. After the launch it can show how many are left when stock runs low, and a sold-out message when the product is gone.
Set it up
Add the section
On your home page or a page template, choose Add section and pick SU: Product drop.
Pick the product
Under Product, choose the Product you’re launching. Add an Image if you want a different picture from the product’s own, and choose which side it sits on with Image on desktop.
Keep the product published to the Online Store sales channel before the launch. The section can’t show or sell an unpublished product.
Set the launch time
Under Launch, type the Launch date as YYYY-MM-DD, for example 2026-12-05, and the Launch time as HH:MM
in 24-hour time, for example 10:00. The time uses your store’s time zone, set in Shopify under Settings →
General. If you leave the time empty, the launch is at 00:00. The section uses your time zone’s current offset
from UTC, so if daylight saving time starts or ends before the launch, the launch can shift by an hour.
If the date isn’t in this format, the theme editor shows a note. Leave Launch date empty to sell the product right away and use the section as a featured product hero.
Write the pre-launch content
Under Before the launch, fill in the Eyebrow, Heading and Text. If you leave Heading empty, the product’s title is used. Label above the timer sits above the countdown.
Collect sign-ups
Keep Let shoppers sign up to hear about the launch on to show an email field. Each sign-up becomes a customer in
Shopify, subscribed to email marketing and tagged with your Customer tag (drop by default) and with
drop- followed by the product’s handle. You can change the Button label, the Text under the form and the
Message after signing up.
The section doesn’t send any email. On launch day, send one yourself, for example with Shopify Email to the customers with your tag.
Write the launch content
Under After the launch, set the Eyebrow and Text shoppers see once the product is on sale. Leave Text empty to keep the text from before the launch.
Show low stock
Keep Show low stock on and set Low stock at or below. The stock line only shows when Shopify tracks inventory for every variant of the product and doesn’t keep selling when it’s out of stock. When the product sells out, shoppers see Message when sold out.
The section only controls what it shows. Because the product has to be published, shoppers who find its product page, for example through search, can buy it there before the launch.
Try it
Settings
In the theme editor, in the order you'll see them. Every section also has the heading and style settings.
Product
| Setting | What it does |
|---|---|
| ProductProduct | Keep it published to the Online Store before the drop, so the section can sell it the moment it launches. |
| ImageImage | Leave empty to use the product's image. |
| Image on desktopDropdown |
Launch
| Setting | What it does |
|---|---|
| Launch dateText | YYYY-MM-DD, e.g. 2026-12-05. Leave empty to sell right away. |
| Launch timeText | HH:MM in your store's time zone. Leave empty for 00:00. |
Before the launch
| Setting | What it does |
|---|---|
| Label above the timerText | |
| Let shoppers sign up to hear about the launchCheckbox | Adds them to your customers, subscribed to email marketing and tagged with the tag below. |
| Customer tagText | |
| Button labelText | |
| Text under the formText (bold, italic, links) | |
| Message after signing upText (bold, italic, links) |
After the launch
| Setting | What it does |
|---|---|
| EyebrowText | |
| TextRich text | Leave empty to keep the text from before the launch. |
| Show low stockCheckbox | Only when Shopify tracks the product's inventory and it stops selling at zero. |
| Low stock at or belowSlider (1–50) | |
| Message when sold outText (bold, italic, links) | |
| LookDropdown | |
| After adding to cartDropdown |
Good to know
- Keep the product published to the Online Store before the launch: an unpublished product can't be shown or sold by the section.
- Sign-ups are Shopify customers subscribed to email marketing with your tag; send the launch email yourself, for example with Shopify Email.
- The launch time uses your store's time zone with its current UTC offset; a daylight-saving change before the launch can shift it by an hour.
- Without JavaScript the launch time is written out, the sign-up form posts to Shopify, and after the launch the page shows the product to buy on its next load.
Changelog
- 1.0.0: Initial release.