Add the sign-up discount CTA code snippet to your eCommerce store

Add this code snippet to your Shopify store to show a sign-up discount CTA on your product details page (PDP) to boost list growth. After the code snippet is added and a sign-up discount CTA is set up in Attentive, visitors to your store see discounted prices or other offer details next to a product's original price.

Prerequisites

• If you use Shopify for eCommerce:
  • You have an administrator-level role or a role that permits you to edit store templates.
  • Your Shopify store is integrated with Attentive and price data is available.
• You've already set up a welcome offer (% discount, dollar off, or other offer types) in your Attentive account.
• You've already created a sign-up discount CTA in Attentive.

Add the code snippet to your eCommerce store

Shopify

Where you add the sign-up discount CTA code snippet depends on which template editor you're using for your store. Here's how to check:

1. Sign in to your Shopify store and select a store.
2. Under Sales channels, click Online store > Themes.
3. Click Customize on your current theme.
4. Click the dropdown menu at the top of the page and select Products > Default product.
5. Check to see which of the following appears below Template:
   • A list of blocks and the + Add block button: you can add the code snippet with theme blocks.
   • A list of sections and only the + Add section button: you can add the code snippet with code.

Option 1: Add the code snippet with theme blocks

1. Follow steps 1-4 from above.
2. Under Product information, click Add block and select {/} Custom liquid.
3. Click the {/} Custom liquid block you added, and paste the following code snippet:

   <div id="attn-inline-price-trigger"></div>

4. Click and drag the six dots move icon next to the {/} Custom liquid block you added to where you want the sign-up discount CTA to appear on your product pages.
   
   
   Note: We recommend placing it directly next to or below your product price.
5. Click Save in the upper right corner of the editor.

Option 2: Add the code snippet with code

1. Follow steps 1-4 from the process above.
2. Click the three dots on the top left of the page and select Edit code.
3. Scroll to Sections and click product-template.liquid.
4. Paste the following code snippet where you want the sign-up discount CTA to appear on your product pages:

   <div id="attn-inline-price-trigger"></div>

   Note: We recommend placing it directly next to or below your product price.
5. Click Save in the upper right corner of the code editor.

Other eCommerce platforms

Paste the following code snippet where you want the sign-up discount CTA to appear on your product pages:

<div id="attn-inline-price-trigger"></div>

Customize the appearance of sign-up discount CTAs

The sign-up discount CTA follows the default styling of the "button" class on your website. If you want to customize its appearance:

• You can add additional CSS classes to the div element, for example:

   <div id="attn-inline-price-trigger" class="your-custom-class"></div>

• Alternatively, you can use inline styles:

  <div id="attn-inline-price-trigger" style="your-custom-styles-here"></div>

Test and optimize sign-up discount CTAs

To maximize the effectiveness of your sign-up discount CTA:

1. Test the sign-up unit on various product pages to ensure it displays correctly.
2. Consider running an A/B test to measure the impact on subscriber growth and conversions.
3. Monitor your analytics in Attentive to track performance and make data-driven decisions.

If you run into any issues or have questions about implementing the sign-up discount CTA, please reach out to your Attentive CSM or White Glove (whiteglove@attentivemobile.com).