> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.promoparty.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/4/4/4/b444e77f33dec00/ppp-product-cta_nbzepx.png)


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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/4/4/4/b444e77f33dec00/ppp-product-cta-pdp_ul4ei2.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/4/4/4/b444e77f33dec00/ppp-product-cta-theme-editor_nhn1jx.png)


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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/4/4/4/b444e77f33dec00/ppp-product-cta-admin-2_dk6p1m.png)


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