How to add the Product Page CTA Block

Encourage shoppers to reach thresholds and unlock free gifts in your Shopify store


Promo Party Pro can now show free gift messaging directly on your product pages.
Instead of waiting until shoppers reach the cart to understand the offer, you can show them what they need to add or spend to unlock their gift while they are still deciding what to buy.
For cart total campaigns, the message updates based on the shopper’s live cart, so they can see how close they are to qualifying.




Example of a cart total message shown near the Add to Cart button.


What shoppers will see


The Product Page CTA is a small message block you can add to your product page template. Where it can appear may depend on your Shopify theme.
Depending on your campaign setup, the CTA can tell shoppers to:


  • Add the current product to unlock a free gift
  • Add an item from a qualifying collection
  • Spend a little more to unlock a cart total gift

For cart total offers, Promo Party Pro can show a progress bar that updates as the shopper adds items to their cart.



Example showing a shopper how much more they need to spend to unlock a free gift.


How to add the CTA to your product page


You need to enable two things in your Shopify theme.


First, enable the Promo Party Pro app embed (listed as Gift modal manager).

  1. Go to Online Store
  2. Click Themes
  3. Click Customize
  4. Open App embeds
  5. Turn on Gift modal manager
  6. Save your changes


Next, add the CTA block to your product template.

  1. Stay in the Shopify theme editor
  2. Open a product page template
  3. Click Add block
  4. Select Gift progress bar (under Promo Party Pro)
  5. Move the block to the spot where you want shoppers to see it


PRO TIP: Place it near the product form, price, or the Add to Cart button.




Add the Gift progress bar app block inside your Shopify product template.


Which campaigns can use the Product Page CTA


The CTA works with active Promo Party Pro campaigns that have at least one free gift variant configured.
You can use it with:


  • Specific product offers

The CTA appears on matching product pages and lets shoppers know that adding that product unlocks the gift.

  • Collection offers

The CTA lets shoppers know they need to add an item from a qualifying collection.

  • Cart total offers

The CTA shows shoppers how close they are to reaching the spend threshold for their gift.
If more than one campaign applies, Promo Party Pro will choose one message to display so product pages do not get crowded.


Change the CTA color


You can update the CTA color from inside Promo Party Pro.
Go to Settings > On-store widgets and change Progress bar color.
The color you choose updates the progress bar, gift icon, accent border, and background tint together.




A few things to know


The CTA appears only when an active campaign with at least one free gift variant configured is in effect, and the shopper’s product page or cart meets that campaign’s rules.
For product and collection campaigns, the CTA may appear as soon as the product page loads.
For cart total campaigns, Promo Party Pro checks the shopper’s live cart before displaying the message. This keeps the threshold and progress bar accurate.
You can change the CTA wording, including the progress and amount-remaining text, for each language on the Translations page.
The gift icon, spacing, font size, layout, and per-campaign colors are not currently editable in the app.
Some Shopify themes limit where app blocks can be placed. If your theme does not allow the CTA where you want it, contact support, and we can look at other setup options.


Place the CTA where the theme editor won't let you


Some themes don't allow app blocks in every spot. If you can't put the CTA where you want it, you can place it in your theme code instead.


  1. Keep the Gift modal manager app embed turned on. The manual placement won't work without it.
  2. In the theme editor, remove the Gift progress bar block from your product template. If both are present, the block wins.
  3. In your theme code, add this line to the product template where you want the message to appear:


<div data-xsell-product-cta></div>


The app finds this element and shows the CTA there. This works on product pages only. Add it once per page; if there's more than one, only the first is used.


Not comfortable editing theme code? Use Request setup help in Settings > On-store widgets and we'll place it for you.


Progress banner in the cart drawer


Promo Party Pro can also show gift progress inside your slide-out cart. In Settings > On-store widgets, check Show gift progress banner in supported cart drawers. It's on by default and works in Dawn and Horizon cart drawers.


Checkout


The CTA shows on product pages, and the progress banner shows in supported cart drawers. Promo Party Pro doesn't add messages to checkout. Shopify only allows checkout customizations like this on Shopify Plus.


Need help setting it up?


Use Request setup help (in Settings > On-store widgets) or We’ll set it up for you inside Promo Party Pro to start a live support chat with our team.

Updated on: 07/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!