Product Page Integration for TryNow

Overview

Effective product page integration is critical for a successful TryNow implementation. This technical guide addresses how to manage the presentation of TryNow purchase options within Shopify themes, focusing on selling plan display customization and optimal user experience design.

By default, Shopify themes automatically render all selling plans (including TryNow's "Try Before You Buy" option) as standard UI elements (radio buttons or dropdowns) alongside regular purchase options. This default behavior often creates suboptimal user experiences and can negatively impact conversion analytics.

Technical Background: Selling Plan Display

Default Behavior

Shopify themes use the Liquid templating language to automatically render selling plans through the following mechanisms:

Selling Plan Groups API: Themes check for product.selling_plan_groups.size > 0 to determine if selling plans exist
Variant-Selling Plan Allocations: Themes iterate through variant.selling_plan_allocations to display each option
UI Components: Most themes render these as either:
- Radio button groups (<input type="radio">)
- Dropdown selects (<select> with <option> elements)
- Custom UI components that use the same underlying data

This default rendering can be modified through theme code customization to create a more strategic TryNow implementation.

Implementation Strategies

Based on implementation data, we recommend one of the following technical approaches:

Strategy	Implementation Complexity	Use Case
Hide all selling plans	Moderate	When TryNow is the only selling plan or when you want complete control over the purchase flow
Hide only TryNow plans	Moderate	When you have other selling plans (e.g., subscriptions) that should remain visible
Custom UI implementation	Advanced	When you need a highly customized purchase experience with multiple options

Developer Recommendation: For optimal conversion rates and analytics accuracy, implement a dedicated TryNow button using the TryNow SDK rather than relying on Shopify's default selling plan UI. This approach provides clearer user experience and more accurate attribution data.

Theme Code Identification and Modification

Locating Selling Plan Rendering Code

To customize the TryNow experience, you first need to identify where and how your theme renders selling plans. This typically occurs in product template files such as:

product.liquid
product-template.liquid
product-form.liquid
Components within a sections-based theme

Common Selling Plan Iteration Patterns:

{% comment %}Pattern 1: Direct selling plan iteration{% endcomment %}
{% for selling_plan in group.selling_plans %}
  <!-- TryNow selling plan will appear in this loop -->
{% endfor %}

{% comment %}Pattern 2: Selling plan groups check{% endcomment %}
{%- if product.selling_plan_groups.size > 0 -%}
  <!-- Selling plan rendering logic here -->
{%- endif -%}

{% comment %}Pattern 3: Variant allocation iteration{% endcomment %}
{%- for variant in product.variants -%}
  {%- for allocation in variant.selling_plan_allocations -%}
    <!-- TryNow selling plan will appear here -->
  {%- endfor -%}
{%- endfor -%}

Developer Note: Theme structures vary significantly. Use your browser's developer tools (Elements inspector) to identify the HTML structure of the selling plan elements, then search your theme files for the corresponding Liquid code patterns.

Identifying Theme-Specific Implementation

Most Shopify themes implement selling plans in one of these common patterns:

Dropdown Select Implementation

{%- if product.selling_plan_groups.size > 0 -%}
  <div class="selling-plan-container">
      <label for="selling-plan-selector">{{ 'product.selling_plan' | t }}</label>
      <select name="selling_plan" id="selling-plan-selector">
          <!-- One-time purchase option -->
          <option value="">{{ 'product.one_time_purchase' | t }}</option>

          {%- for variant in product.variants -%}
          <optgroup label="{{ variant.title }}">
              {%- for allocation in variant.selling_plan_allocations -%}
              <option value="{{ allocation.selling_plan.id }}">
                  {{ allocation.selling_plan.name }}
              </option>
              {%- endfor -%}
          </optgroup>
          {%- endfor -%}
      </select>
  </div>
{%- endif -%}

Radio Button Implementation

{%- if product.selling_plan_groups.size > 0 -%}
  <div class="selling-plan-options">
    <fieldset>
      <legend>{{ 'product.purchase_options' | t }}</legend>

      <!-- One-time purchase option -->
      <div class="selling-plan-option">
        <input type="radio" 
               name="selling_plan" 
               id="selling_plan_none" 
               value="" 
               checked>
        <label for="selling_plan_none">{{ 'product.one_time_purchase' | t }}</label>
      </div>

      {%- for group in product.selling_plan_groups -%}
        {%- for selling_plan in group.selling_plans -%}
          <div class="selling-plan-option">
            <input type="radio" 
                   name="selling_plan" 
                   id="selling_plan_{{ selling_plan.id }}" 
                   value="{{ selling_plan.id }}">
            <label for="selling_plan_{{ selling_plan.id }}">{{ selling_plan.name }}</label>
          </div>
        {%- endfor -%}
      {%- endfor -%}
    </fieldset>
  </div>
{%- endif -%}

Once you've identified the relevant code in your theme, you can apply one of the modification strategies outlined below.

Implementation Strategies

Strategy 1: Hide All Selling Plans for TryNow Products

This approach completely removes the selling plan selector when a TryNow selling plan is detected, allowing you to implement a custom TryNow button instead. This is ideal when TryNow is your primary selling plan or when you want complete control over the purchase experience.

{% comment %}
  Implementation Strategy: Hide All Selling Plans for TryNow Products

  This code:
  1. Checks if the product has any selling plans
  2. Searches for TryNow selling plans
  3. Only renders the selling plan selector if no TryNow plans are found

  Replace your existing selling plan code with this implementation
{% endcomment %}

{%- if product.selling_plan_groups.size > 0 -%}
  {% comment %}Initialize TryNow detection variable{% endcomment %}
  {% assign trynow_selling_plan_detected = false %}

  {% comment %}Scan all variants and their selling plan allocations{% endcomment %}
  {%- for variant in product.variants -%}
    {%- for allocation in variant.selling_plan_allocations -%}
      {% comment %}Check for TryNow selling plan by name pattern{% endcomment %}
      {% if allocation.selling_plan.name contains "Try Before You Buy" or allocation.selling_plan.name contains "TryNow" %}
        {% assign trynow_selling_plan_detected = true %}
        {% break %}
      {% endif %}
    {%- endfor -%}

    {% comment %}Break outer loop if TryNow is found{% endcomment %}
    {% if trynow_selling_plan_detected %}
      {% break %}
    {% endif %}
  {%- endfor -%}

  {% comment %}Only render selling plan selector if no TryNow plans exist{% endcomment %}
  {% unless trynow_selling_plan_detected %}
    <div class="selling-plan-container" data-selling-plan-container>
      <label for="selling-plan-selector">{{ 'product.purchase_options' | t }}</label>
      <select name="selling_plan" id="selling-plan-selector" class="selling-plan-selector">
        <option value="">{{ 'product.one_time_purchase' | t }}</option>
        {%- for variant in product.variants -%}
          <optgroup label="{{ variant.title }}">
            {%- for allocation in variant.selling_plan_allocations -%}
              <option value="{{ allocation.selling_plan.id }}" 
                      data-selling-plan-name="{{ allocation.selling_plan.name }}"
                      {% if allocation.selling_plan.id == current_selling_plan %}selected="selected"{% endif %}>
                {{ allocation.selling_plan.name }}
              </option>
            {%- endfor -%}
          </optgroup>
        {%- endfor -%}
      </select>
    </div>
  {% endunless %}
{%- endif -%}

Strategy 2: Selectively Hide TryNow Selling Plans

This approach keeps the selling plan selector but filters out TryNow options, allowing other selling plans (like subscriptions) to remain visible. This is ideal for stores that offer multiple selling plan types.

{% comment %}
  Implementation Strategy: Selectively Hide TryNow Selling Plans

  This code:
  1. Maintains the selling plan selector UI
  2. Filters out only TryNow selling plans
  3. Preserves other selling plans like subscriptions

  Replace your existing selling plan code with this implementation
{% endcomment %}

{%- if product.selling_plan_groups.size > 0 -%}
  <div class="selling-plan-container" data-selling-plan-container>
    <label for="selling-plan-selector">{{ 'product.purchase_options' | t }}</label>

    {% comment %}Determine if non-TryNow selling plans exist{% endcomment %}
    {% assign has_non_trynow_plans = false %}
    {%- for variant in product.variants -%}
      {%- for allocation in variant.selling_plan_allocations -%}
        {% unless allocation.selling_plan.name contains "Try Before You Buy" or allocation.selling_plan.name contains "TryNow" %}
          {% assign has_non_trynow_plans = true %}
          {% break %}
        {% endunless %}
      {%- endfor -%}
      {% if has_non_trynow_plans %}{% break %}{% endif %}
    {%- endfor -%}

    {% comment %}Only render if non-TryNow plans exist{% endcomment %}
    {% if has_non_trynow_plans %}
      <select name="selling_plan" id="selling-plan-selector" class="selling-plan-selector">
        <option value="">{{ 'product.one_time_purchase' | t }}</option>

        {%- for variant in product.variants -%}
          {% assign has_plans_for_variant = false %}
          {% assign variant_plans = '' %}

          {% comment %}Pre-check if variant has any non-TryNow plans{% endcomment %}
          {%- for allocation in variant.selling_plan_allocations -%}
            {% unless allocation.selling_plan.name contains "Try Before You Buy" or allocation.selling_plan.name contains "TryNow" %}
              {% assign has_plans_for_variant = true %}
              {% capture variant_plans %}
                {{ variant_plans }}
                <option value="{{ allocation.selling_plan.id }}" 
                        data-selling-plan-name="{{ allocation.selling_plan.name }}"
                        {% if allocation.selling_plan.id == current_selling_plan %}selected="selected"{% endif %}>
                  {{ allocation.selling_plan.name }}
                </option>
              {% endcapture %}
            {% endunless %}
          {%- endfor -%}

          {% comment %}Only render optgroup if variant has non-TryNow plans{% endcomment %}
          {% if has_plans_for_variant %}
            <optgroup label="{{ variant.title }}">
              {{ variant_plans }}
            </optgroup>
          {% endif %}
        {%- endfor -%}
      </select>
    {% endif %}
  </div>
{%- endif -%}

Implementation Notes

When implementing either strategy:

Theme Compatibility: Test thoroughly with your specific theme as DOM structure may vary
Translation Support: Ensure all text strings use Shopify's translation filters (| t)
Selling Plan Detection: The code uses name pattern matching (contains "Try Before You Buy") which may need adjustment based on your specific TryNow configuration
Performance Considerations: The code uses Liquid's break statements to optimize performance by exiting loops early when possible

Implementation Best Practices

Based on extensive implementation data and conversion analysis across multiple merchants, we recommend the following technical best practices for optimal TryNow product page integration:

UI/UX Architecture

Best Practice	Implementation Approach	Rationale
Dedicated TryNow Button	Implement a standalone TryNow CTA button using the TryNow SDK Button API rather than including TryNow in a dropdown menu	Increases visibility, improves analytics tracking, and creates a clearer user journey
Visual Hierarchy	Apply distinct styling to TryNow elements using CSS custom properties for consistent theming	Helps customers distinguish between standard purchase and TryNow options
Progressive Enhancement	Implement feature detection and fallbacks for older browsers	Ensures functionality across all supported browsers and devices
Responsive Design	Use flexbox/grid layouts and relative units for TryNow UI elements	Maintains proper display across all viewport sizes

Technical Implementation

// Example: Implementing a dedicated TryNow button with the SDK
document.addEventListener('DOMContentLoaded', () => {
  // Initialize TryNow SDK
  window.trynow.initialize({
    myshopifyDomain: 'your-store.myshopify.com'
  });

  // Register a custom TryNow button component
  window.trynow.registerComponent('custom-trynow-button', {
    productId: '{{ product.id }}',
    variantId: '{{ product.selected_or_first_available_variant.id }}',
    container: '#trynow-button-container',
    template: '<button class="trynow-cta">Try Before You Buy</button>',
    onClick: (event) => {
      // Custom analytics tracking
      console.log('TryNow button clicked', event);
    }
  });
});

Testing & Validation

Implement a comprehensive testing strategy for your TryNow product page integration:

Cross-browser Testing
- Test in Chrome, Safari, Firefox, and Edge
- Verify mobile browser compatibility (iOS Safari, Android Chrome)
Performance Testing
- Measure Time to Interactive (TTI) with and without TryNow implementation
- Ensure TryNow components load efficiently and don't block critical rendering path
A/B Testing
- Test different TryNow button placements and designs
- Measure impact on conversion rate and average order value
User Testing
- Conduct usability testing with representative users
- Gather feedback on clarity of the TryNow option

Consistency & Maintenance

Implement TryNow UI components using reusable code patterns
Document your implementation approach for future maintenance
Use version control to track changes to TryNow-related theme code
Create a QA checklist for validating TryNow functionality after theme updates

Technical Resources

Resource	Description
TryNow CTA Button API	Comprehensive documentation for implementing and customizing TryNow buttons
Cart Integration	Technical guide for integrating TryNow with the shopping cart experience
Entry Points API	Documentation for implementing TryNow entry points throughout the customer journey
Implementation Guide	Complete technical implementation guide for the TryNow platform
SDK Methods Reference	Detailed API reference for all TryNow SDK methods