Shopify Integration

Adding gettickr.app timers to Shopify stores helps create urgency for sales, highlight limited-time offers, and build anticipation for product launches. This guide covers multiple integration methods for different Shopify use cases.

Quick Start Overview

Prerequisites

Before you begin, you'll need:

Method 1: Product Page Timers (Theme Customizer)

Perfect for product launches, limited-time offers, and creating urgency on specific products.

Step-by-Step Guide

Step 1: Create Your Timer

1. Go to the Editor
2. Design a timer that matches your product page style
3. Use countdown for duration-based sales (e.g., "24 Hour Flash Sale")
4. Use count-to for specific end dates/times
5. Copy the timer URL from the Renderer section

Step 2: Access Theme Customizer

1. In Shopify Admin, go to Online Store → Themes
2. Click "Customize" on your active theme
3. Navigate to a product page in the preview

Step 3: Add Custom Liquid Section

1. Click "Add section" or find an existing section where you want the timer
2. Look for "Custom Liquid" or "Custom HTML" section
3. If unavailable, your theme may require Method 3 (Code Editor)

Step 4: Insert Timer Code

Paste this code into the Custom Liquid section:

<div
  class="product-countdown-timer"
  style="text-align: center; margin: 30px 0;"
>
  <h3 style="margin-bottom: 15px;">Limited Time Offer!</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="300"
    style="border: none; max-width: 800px; margin: 0 auto; display: block;"
    title="Product Sale Timer"
  >
  </iframe>
  <p style="margin-top: 15px; color: #e74c3c; font-weight: bold;">
    Hurry! Sale ends when timer reaches zero.
  </p>
</div>

Step 5: Position and Style

1. Drag the section to position it (above/below product images or description)
2. Adjust margin and styling as needed
3. Common positions:
   • Above "Add to Cart" - Maximum urgency
   • Below product title - Prominent but not overwhelming
   • In product description area - Contextual placement

Step 6: Save and Publish

1. Click "Save" in the top-right
2. Preview on desktop and mobile
3. Click "Publish" when satisfied

Recommended Timer Sizes for Products

Method 2: Homepage Integration

Create urgency for store-wide sales or major events by adding timers to your homepage.

Using Theme Sections

Step 1: Access Homepage Editor

1. Shopify Admin → Online Store → Themes
2. Click "Customize"
3. Ensure you're viewing the Homepage

Step 2: Add Custom Section

1. Click "Add section"
2. Select "Custom Liquid" or "Custom HTML"
3. Position it where you want (hero area, middle, above footer)

Step 3: Insert Homepage Timer Code

<section
  class="homepage-countdown"
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px 20px; text-align: center; color: white;"
>
  <div style="max-width: 1200px; margin: 0 auto;">
    <h2 style="font-size: 48px; margin: 0 0 10px 0; font-weight: bold;">
      🎉 Flash Sale Happening Now!
    </h2>
    <p style="font-size: 24px; margin: 0 0 30px 0;">
      Save up to 50% on selected items
    </p>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="400"
      style="border: none; max-width: 1000px; margin: 0 auto; display: block; background: transparent;"
      title="Flash Sale Timer"
    >
    </iframe>
    <a
      href="/collections/sale"
      style="display: inline-block; margin-top: 30px; padding: 15px 40px; background: white; color: #667eea; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 18px;"
    >
      Shop Sale Now →
    </a>
  </div>
</section>

Homepage Timer Design Tips

Method 3: Collection/Category Pages

Add timers to collection pages for category-specific sales (e.g., "Summer Collection Sale").

Theme Code Editor Method

Step 1: Access Code Editor

1. Shopify Admin → Online Store → Themes
2. Click "Actions" → "Edit code"
3. Find "Sections" folder in left sidebar

Step 2: Edit Collection Template

1. Find collection-template.liquid or main-collection.liquid
2. Locate where you want to add the timer (usually after <h1>{{ collection.title }}</h1>)

Step 3: Add Timer Code

Insert this code at your chosen location:

{% comment %} Countdown Timer for Collection Sale {% endcomment %}
<div
  class="collection-countdown-wrapper"
  style="margin: 40px auto; max-width: 1200px; padding: 0 20px;"
>
  <div
    style="text-align: center; background: #f8f9fa; padding: 30px; border-radius: 8px;"
  >
    <h2 style="margin-top: 0;">⏰ Sale Ends Soon!</h2>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="300"
      style="border: none; max-width: 900px; margin: 20px auto; display: block;"
      title="Collection Sale Timer"
    >
    </iframe>
    <p style="margin-bottom: 0; font-size: 18px; color: #666;">
      Don't miss out on exclusive discounts!
    </p>
  </div>
</div>

Step 4: Conditional Display (Optional)

To show timer only on specific collections:

{% if collection.handle == 'summer-sale' %}
<!-- Timer code here -->
{% endif %}

Step 5: Save and Test

1. Click "Save" in the top-right
2. Visit a collection page to see the timer
3. Test on mobile devices

Method 4: Custom Pages (Landing Pages)

For dedicated sale pages, event pages, or promotional landing pages.

Page Editor Method

Step 1: Create or Edit Page

1. Shopify Admin → Online Store → Pages
2. Click "Add page" or edit existing page
3. Enter page title and content

Step 2: Switch to HTML Mode

1. Click the "<>" (Show HTML) button in the editor toolbar
2. This reveals the raw HTML of your page

Step 3: Insert Timer Code

Paste your timer code where you want it:

<div style="text-align: center; margin: 40px 0;">
  <h2>Early Bird Registration Closes In:</h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    style="border: none; max-width: 1000px; margin: 20px auto; display: block;"
    title="Registration Timer"
  >
  </iframe>
  <p style="font-size: 18px;">Register now to save 30%!</p>
</div>

Step 4: Save and Publish

1. Click "Save"
2. Preview the page
3. Publish when ready

Method 5: Site-Wide Banner Timer

Display timers across your entire store in a header or notification bar.

Theme Header Integration

Step 1: Edit Theme Code

1. Themes → Actions → Edit code
2. Find sections/header.liquid or sections/announcement-bar.liquid

Step 2: Add Banner Timer

Insert before closing </header> tag or at the top of the file:

<div
  class="site-wide-countdown-banner"
  style="background: #ff6b6b; padding: 15px 20px; text-align: center;"
>
  <div
    style="max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px;"
  >
    <span style="color: white; font-weight: bold; font-size: 16px;">
      🔥 Flash Sale Ends In:
    </span>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="400"
      height="60"
      style="border: none; vertical-align: middle;"
      title="Sale Banner Timer"
    >
    </iframe>
    <a
      href="/collections/sale"
      style="color: white; text-decoration: underline; font-weight: bold;"
    >
      Shop Now →
    </a>
  </div>
</div>

Step 3: Make It Dismissible (Optional)

Add JavaScript to allow users to close the banner:

<div
  id="countdown-banner"
  class="site-wide-countdown-banner"
  style="background: #ff6b6b; padding: 15px 20px; text-align: center; position: relative;"
>
  <!-- Timer content -->
  <button
    onclick="document.getElementById('countdown-banner').style.display='none'"
    style="position: absolute; right: 10px; top: 10px; background: none; border: none; color: white; font-size: 20px; cursor: pointer;"
  >
    ✕
  </button>
</div>

Troubleshooting Shopify Integration

Common Issues

Testing Checklist

Before publishing timer changes:

• Test on actual product/collection/page
• Verify mobile responsiveness (use Shopify mobile preview)
• Check timer updates correctly
• Ensure timer doesn't break page layout
• Test in multiple browsers (Chrome, Safari, Firefox)
• Verify timer loads quickly (< 3 seconds)
• Check that timer matches store branding

Performance & SEO

Performance Tips

SEO Considerations

Best Practices:

• Add descriptive title attribute to iFrames
• Include text context around timers (headings, descriptions)
• Don't hide important content behind timers
• Ensure page content is valuable beyond just the timer

Premium Features for Shopify

Remote Control Workflow:

1. Add timer to product page with Premium URL
2. When sale starts: Open editor, start timer remotely
3. Timer updates automatically on store
4. When sale ends: Pause or reset timer remotely
5. Reuse same timer for next sale event

Best Practices for E-Commerce Timers

Conversion Optimization

✅ DO:

• Place timers above the fold on key pages
• Use urgent colors (red, orange) for time-sensitive offers
• Match timer design to product/brand aesthetics
• Test different timer positions for best results
• Combine timers with clear CTAs (Call-to-Actions)
• Use authentic deadlines (don't fake urgency)

❌ DON'T:

• Overuse timers on every product (creates "cry wolf" effect)
• Use misleading or false deadlines
• Make timers so large they overwhelm content
• Forget to remove expired timers
• Use timers without clear value proposition

A/B Testing Ideas

Next Steps

• iFrame Integration - Deep dive into iFrame customization
• Customize Timer Design - Match your Shopify theme perfectly
• Remote Control - Learn about Premium timer management
• WordPress Integration - If you also run a WordPress blog