Adding a sign-up discount CTA to product details pages (PDPs) can boost your list growth and help you acquire high-intent visitors by highlighting the immediate benefit of subscribing to messaging from your brand. Once configured, store visitors see discounted prices or offer details next to a product's original price.
To further incentivize visitors, customize this sign-up discount CTA (also called the PDP CTA) to offer percentage discounts, flat dollar amount discounts, or other kinds of offers (like free shipping) for signing up. You can also customize the copy and design of the sign-up discount CTA.
- This CTA works with most Attentive sign-up units, but it isn’t compatible with spin to win functionality.
- You won’t be able to see a preview of how the CTA will appear in your store when creating the sign-up unit. It inherits the same styles set for the button class on your store, but you can change which class is used.
- When designing the CTA, all prices shown in the preview use $100 as a placeholder.
- If you use Shopify for eCommerce, the price shown in the CTA changes dynamically based on which product store visitors are viewing. If you don't use Shopify, see Set up your non-Shopify store's sign-up discount CTA below for our recommended setup.
Set up your Shopify store's sign-up discount CTA
If you use Shopify for eCommerce, follow these steps:
- Go to Sign-up units and click + Create sign-up flow.
- Click Choose template, then click Continue.
- Click Start with template for either Convert new site visitors into subscribers - Mobile Product Detail Page (PDP) Price or Convert new site visitors into subscribers - Desktop Product Detail Page (PDP) Price.
- Hover over the sign-up unit and click Edit Design.
- Click PDP CTA at the top of the preview.
- Click PDP CTA >.
- Customize the copy that store visitors see in the PDP CTA. Enter details for:
- (a) Before Offer Text: The text preceding the offer value.
- (b) Offer: The type and amount of discount. Select from Other offer type, Percentage off, or Dollar amount.
-
(c) After Offer Text: The text after the offer.
- Class names: The CSS class in your store used to style the sign-up discount CTA.
- Alignment: The text alignment of the sign-up unit CTA (left, center, or right).
- When finished, click Save changes.
Note: We recommend editing your Display rules for your sign-up discount CTA to include it on as many pages as possible to help improve CTR.
Set up your non-Shopify store's sign-up discount CTA
If you don't use Shopify for eCommerce, follow these steps:
- Follow steps 1–6 above.
- Customize the copy that store visitors see on the PDP. Enter details for:
- Before Offer Text: The text preceding the offer.
- Offer: Select Other offer type and leave this field blank.
- After Offer Text: The text after the offer.
- Class names: The CSS class in your store used to style the sign-up discount CTA.
- Alignment: The text alignment of the sign-up unit CTA (left, center, or right).
- Click Save.
Example: To create a CTA that says "Get 15% off when you sign up for texts," set up the following:
-
Before Offer Text: Enter
Get 15% off when you sign up for texts. - Offer: Choose Other offer type and leave field blank.
- After Offer Text: Leave field blank.
Add the sign-up discount CTA code snippet to your store
After you create your sign-up discount CTA, follow these instructions to add code to your eCommerce store to ensure that the CTA appears on your product pages.