Growth Hacks App for Shopify – [User Guide]

Discount pop-ups are one of the most effective growth hacks for improving user engagement and conversions on Shopify stores.

That’s why we bring you the “Growth Hacks” app – a multi-featured solution designed to boost your sales using powerful marketing methods.

With this app, you can choose from multiple conversion-focused features like:

• Spin Wheel – A fun way to offer discount coupons to customers in exchange for their email addresses.
• Recent Sales Popup – Build trust and urgency by showing recent sales activity on your storefront.
• Product Countdown – Create urgency by displaying a countdown timer on selected products.
• Image Part Finder – Help users visually locate the exact parts or variants of a product using images.

Each method is available under flexible monthly plans, and you can enable/disable them individually as per your business strategy.

Start using these growth methods to create excitement, increase conversions, and improve your store’s overall performance. GET APP

• A simplified way to enable various conversion-boosting pop-ups like Spin Wheel, Recent Sales, Product Countdown, and Image Part Finder – all in a single app.
• For the Spin Wheel, you can create custom rules to define how and when prizes are shown.
• The pop-up design and colors are fully customizable to match your storefront branding.
• Customers receive their discount codes via email automatically, based on their prize.
• You can configure:
  Limit per customer for discount codes
  Email templates and spin wheel labels for personalized messaging
  Show recent sales popups to build urgency and trust among new visitors.
  Enable countdown timers on product pages to promote limited-time deals.
• Image Part Finder allows customers to interact with product images and find specific parts or variants easily, perfect for complex product catalogs.

The Growth Hacks app offers multiple feature-based plans, so you can enable only what you need:

• Spin Wheel – Free forever ($0/month)
• Recent Sales Popup – $5/month
• Product Countdown – $10/month
• Image Part Finder – $15/month

Each method can be enabled or disabled individually from the “Feature App Service” section inside the app.

Now let’s explore how to configure these features.

Once the initial setup is done, the next important step is configuring the basic settings that define how the app will interact with your store.

The General Configuration section allows you to manage some core elements like branding, communication preferences, timezone settings, and discount code behavior.

Here’s a quick overview of the key options you’ll find under this section:

• Store Logo: You can upload your store logo here, which will also reflect in customer-facing email templates.
  It’s recommended to use a logo with dimensions of 197px × 52px.
  
• Store Email: This is the email address that the app will use for all outbound communication like notifications or customer mails. Make sure it’s active and relevant to your store.
  
• Time Zone: All date and time stamps across the app (including order timestamps, reports, etc.) will follow the timezone selected here.

Spin Wheel Configuration

This sub-section is specifically relevant if you’re using the Spin Wheel feature for gamified discounts. It helps you control how the discount codes are generated and used by customers.

• Discount Code Prefix: You can define a prefix (like wkgh_) that will be added at the beginning of all discount codes generated through the Spin Wheel.
  
• Limit Per Customer: Set how many times a customer is allowed to use the discount code. This helps prevent overuse and ensures fair play.
  
• Validity Period: You can define how long the discount code remains valid after it’s generated. For example, if you set it to 7, the code will expire 7 days after being issued.

After setting up the general configuration, you can head over to the Growth Hack Configuration section.

Manage Spin Wheel Configuration

This gamified discount feature can be a great way to capture visitor attention and grow your email list.

In this section, you can enable or disable the Spin Wheel and configure its active date range to schedule it for specific campaigns.

If you’ve already configured the Spin Wheel settings under the General Configuration, this section lets you control when it goes live on your storefront.

You can plan it around festive sales, product launches, or special promotions.

Manage Recent Sales Popup Configuration

The “Recent Sales Popup” is a powerful social proof tool that displays live notifications of customer purchases.

This builds trust and encourages new visitors to purchase by showing that others are buying in real-time.

Under this section, you can:

• Enable or disable the pop-up visibility.
• Set a start and end date for when the pop-up should be active.
• Use the Import Orders button to fetch past customer orders for display.
• Track the total imported orders at the bottom of the section.

Manage Product Countdown Configuration

Adding a countdown timer to your product pages helps create a sense of urgency, pushing customers toward quicker purchase decisions.

The app provides a simple toggle to enable or disable this feature for specific products.

Important Note: Once a countdown is running on a product, do not edit that product directly from Shopify, or it may break the countdown flow.

After activation, the timer appears directly on the product page and visually reminds customers of limited-time offers — a simple yet effective way to convert hesitant buyers.

Manage Image Part Finder Configuration

This feature is especially useful for stores dealing in spare parts, accessories, or multi-component items.

With the Image Part Finder, customers can visually select specific components from an image, making navigation much easier for technically complex catalogs.

You can enable or disable this feature based on your store’s needs from this section.

Once activated and configured with the right image and clickable zones, it improves UX drastically for parts-heavy inventories.

Once your growth hacks are active, like Spin Wheel or Recent Sales Popups —

You can customize the email that is automatically sent to customers after they win a discount code via any method configured in the app.

So, for that, go to the Configuration tab and click on Mail Configuration.
Here, you’ll see the mail template listed.

On the right-hand side, under the Action column, click the three-dot menu and select Edit.

Once inside the editor, you’ll be able to view and modify the template content.

You can customize the following:

• Email Subject (e.g., “Your Exclusive Discount Inside!”)
• Email Body Content — powered by a rich text editor (TinyMCE), where you can format, personalize, and style the email easily.

Using Dynamic Variables

To make the email personalized and informative, the app supports template variables inside double curly brackets {{ }}.

These placeholders automatically get replaced with actual customer and discount data.

Note: Do not remove these variables, as they dynamically fetch relevant data for each customer.

Once you’re done customizing the content, just hit Submit to save your changes.

To ensure a consistent user experience across different languages, the Growth Hack app allows you to translate storefront labels with ease.

This feature is particularly helpful for merchants catering to multi-lingual audiences.

You can modify and personalize the default labels shown on the storefront popups like the Spin Wheel or Recent Sales notifications.

So, for that, navigate to the Configuration > Translation section from the app interface.
Here, you’ll find a list of all the default labels that appear on your storefront.

These labels are fully editable and can be customized in your preferred language.

In the top-right corner, you’ll see two action buttons:

• Default Translation: Clicking on this button will lock the labels, making them non-editable. This means only the app’s default label values will be shown on the storefront without any customizations.
  
• Reset to Default: This option helps you discard any custom changes you’ve made to the labels. Once clicked, all edited text will be overridden and restored to the app’s default label values.

The Design Configuration section allows you to customize the visual appearance of your Growth Hack features on the storefront.

You can match the look and feel of the Spin Wheel or Recent Sales Popup with your store’s branding by configuring color schemes, text styles, sizes, and behavior settings.

Let’s explore each part step-by-step:

Manage Spin Wheel Design Configuration

You can personalize how the Spin Wheel pop-up appears on your storefront. The following design elements are available for customization:

• First Background Color – Sets the outermost background of the spin wheel.
• Second Background Color – Sets the inner layer or alternate background.
• Wheel Wing First Color – Color for alternating wheel slices.
• Wheel Wing Second Color – Second color for alternating slices.
• Winning Wing Color – Highlight color used on the winning section of the wheel.
• Text Color on Wheel Wing – Color of the text that appears on each slice.
• Spin Wheel Win Popup Box Color – Color of the success message box shown after a win.
• Text Size on Wheel Wing (in pixels) – Adjusts the font size used on wheel slices.
• Customer Details Fields – You can select which customer details to collect before spinning:
  • Email (Mandatory)
  • Name (Optional)
  • Phone (Optional)
• Time Difference to Show Spin Wheel Again (in minutes)
  This controls how often a returning customer can see the spin wheel pop-up.
  Example: If set to 1440 minutes (24 hours), and a customer views the pop-up at 1:00 PM, they won’t see it again until 1:00 PM the next day.

Recent Sales Popup Design Configuration

Customize the look and behavior of the Recent Sales Popup that appears when a customer makes a purchase.

• Background Color – Set the background color of the popup.
• Product Name Color – Customize the font color used for product names.
• Customer Name Color – Customize the font color used for customer names.
• Product Name Size (in pixels) – Adjust text size for product names.
• Customer Name Line Size (in pixels) – Adjust the font size for customer name line.
• Popup Show Time (in seconds) – How long the popup remains visible.
• Popup Hide Time (in seconds) – How quickly the popup disappears after being triggered.
• You can also select the position where the popup appears on your storefront.
• Customer Remove Recent Sales Popup – Option to allow the customer to close or dismiss the popup using a “close” button shown at the top-right corner.

Manage Product Countdown Design Configuration

The Product Countdown feature allows you to show a timer on specific products to create urgency. From this section, you can adjust the look of the countdown banner displayed on product pages.

• Background Color – Set the backdrop color of the countdown timer.
• Text Color – Choose the font color for countdown digits and labels.
• Border Color – Define the border color for the timer container.
• Off Label Color – Customize the background color of the “OFF” label shown during the offer period.

Manage Image Part Finder Design Configuration

The Image Part Finder feature helps customers find products by clicking on different parts of an image.

• Button Color – Background color of interactive buttons.
• Button Text Color – Font color used on buttons.
• Finder List Card Color – Background of cards displaying the list of matched items.
• Finder Carousel Button Color – Color of the navigation buttons used in image carousels.
• Ripple Color – Color of the ripple effect when users tap on the image.
• Ripple Pointer Color – Color of the marker that appears at the tap location.
• Highlight Ripple Pointer Color – Color used to highlight the selected marker.

To offer personalized and targeted discount experiences through various Growth Hack methods, you need to define rules in the app.

These rules act as the logic behind how and when a discount is triggered — whether it’s via a spin wheel, countdown timer, or any other method.

To create a new rule, go to “Rules” and click the “Add Rule” button.

While adding a rule, you’ll need to provide the following details:

• Status – Enable or disable the rule as needed.
• Growth Hack Method – Choose from available methods like Spin Wheel, Countdown Timer, Image Part Finder.
• Start and End Date – Define the time window during which this rule should be active.
• Discount Type – Choose between:
  • Fixed amount discount (e.g., ₹100 off)
  • Percentage discount (e.g., 10% off)
• Discount Value – Set the value of the discount.
• Minimum Purchase Amount – Set a minimum cart value to qualify for the discount.
• Label – A short label that represents the offer (visible to customers).
• Description – A brief explanation of the discount.

Once a rule is created, it gets linked to the respective Growth Hack method. For example:

• If you configure a Spin Wheel, only the linked rules will appear on the wheel.
• If you’re using a Countdown Timer, the discount logic will follow the assigned rule setup.

You can easily edit, enable/disable, or delete existing rules from the Rules section at any time.

This section gives you complete visibility into all the discount codes generated via the app, specifically when customers interact with configured growth hacks such as the Spin Wheel.

Whenever a customer engages with the Spin the Wheel and wins a discount, a unique one-time discount code is automatically created and sent to their email address.

These discount codes are governed by the rules you defined earlier (like discount value, minimum cart amount, validity, etc.).

The list dynamically displays all the discount codes that have been generated so far. For each code, you’ll get key details like:

• Customer Email – The email ID of the customer who received the discount.
• Discount Code – The unique, one-time code assigned.
• Order Name – If the discount has already been used, this shows the corresponding Shopify order name.
• Expiry Date – The validity period of the discount code.
• Status – Whether the code is still active, used, or expired.

This list keeps updating automatically as more customers win and receive discount codes.

If you ever need to verify, track, or audit any discount-related concerns,

for example, checking whether a specific customer got their code, or whether a code was used — this section acts as a centralized record.

You can also use this section to monitor how effective your growth hack campaigns are in terms of user engagement and actual redemptions.

This section allows you to manually add the embed codes needed to show different growth hack features (like the Spin Wheel, Recent Order Popups, Product Countdowns, etc.) on your Shopify storefront.

Choose the theme on which you want to configure the storefront features.

Once selected, you’ll be provided with the respective embed codes for each growth hack method.

This section allows you to create urgency on selected products by showing a limited-time discount offer along with a visible countdown timer on the product page.

1. Go to the App Dashboard → Navigate to the Product section.
2. Click on “Add Product”.
3. Choose the product you want to apply the discount to.
4. Select Off On Product Price Type:
   • Percentage Discount
   • Fixed Discount
5. Enter the Discount Value (e.g., 20% or ₹200).
6. Set the Countdown Dates:
   • Start Date
   • End Date
7. Click on Submit.

Once submitted, a countdown timer will be displayed on the respective product’s front end.

It will clearly show the time left for the offer to expire, creating a sense of urgency.

This encourages customers to act fast and complete their purchase before the deal ends.

You can always edit the product countdown offer later.

Or, choose to delete it completely if you no longer want the timer to appear.

The Image Part Finder feature in the Growth Hack app makes your store’s shopping experience interactive, visual, and effortless.

Instead of customers scrolling through multiple products, they can click on specific areas in an image to explore product details or add them directly to the cart.

This turns static visuals into smart, shoppable images, making product discovery smooth and boosting conversions.

Key Benefits

• Converts product images into clickable, interactive shopping zones.
• Simplifies navigation and product discovery.
• Encourages faster decisions by offering a visual map of items.
• Enhances overall customer engagement on your store.

You can enable the Image Part Finder by activating the respective plan from the Feature Apps section of the Growth Hack app.

After activation, go to the Growth Hack Configuration section and toggle the Image Part Finder status ON/OFF as needed.

Follow these simple steps to set up the Image Part Finder:

1. Navigate to the Image Part Finder section in the Growth Hack app.
2. Click on the “Add Part Finder” button.
3. Select the product you want to associate with the image.
4. Add a title, select the relevant collection, and upload your main image for the finder.
5. In the uploaded image, click on any area where you want to link a product.
6. Use the search bar to find the product, then add it to that area.
7. Repeat the process for multiple products within the same image.

Each selected product will now be linked to its respective “hotspot” in the image.

Theme Extension Setup

To make the Image Part Finder appear on both product description pages and collection pages, follow the steps below:

Product Page:

1. Go to Online Store > Customize Theme.
2. From the dropdown, select “Products”.
3. Under the Product Information section, click “Add block”.
4. Select the “Product Finder Slider” from the block options.

Collection Page:

1. In the same Customize Theme section, switch the dropdown to “Collections”.
2. Under the Apps section, click “Add block”.
3. Choose “Product Finder Slider” from the available blocks.

Save the theme changes.

Storefront View

Once set up:

• The Image Part Finder will be visible on the product description page and collection page.
• Clicking on the finder image will open the interactive view with all linked product areas.
• Customers can then:
  • Click “View” to go to the product’s detail page.
  • Click “Add to Cart” to instantly add the product to their cart.

In case you are using Online store 2.0 (Example- Dawn), you need to follow the steps to add the codes.

To show the spin wheel pop-up, add the code below inside the form tag after the head tag in theme.liquid :-

{% include 'growth-spin-wheel' %}

Code to display “Recent Order Popup”, add the code below inside the form tag after the head tag in theme.liquid :-

{% include 'recent-order-popup' %}

For the Product Countdown feature

To display the countdown timer on the product page in main-product.liquid, paste the copied code just after ‘</product-form>’:-

<div id='wk_growth_hack_product_count_down' data-product_id='{{ product.id }}'></div>

To display the countdown timer on the collection page in main-collection-product-grid.liquid, paste the copied code between the ‘{% for product in collection.products %}’ loop:-

<div id='wk_growth_hack_collection_product_{{ product.id }}' class='wk_growth_hack_collection_products' data-product_id='{{product.id}}' data-shopmethods='{{ shop.metafields.wk_gh_labels.wk_gh_shopmethods }}'></div>

To display the Image Finder details on both the product description page and the collection page, you’ll need to add the required theme extension.

To begin, go to the “Customize theme” section in your Shopify store’s backend:

From the dropdown, select Products and under the Product Information section, click on “Add block”:

In the Add block section, choose the “Product Finder Slider”:

Repeat the same steps for the collection page. This time, select Collections from the dropdown and click on “Add block” under the Apps section:

Then, select the “Product Finder Slider” option in the block settings:

Storefront

Once configured, the Image Finder will be visible on the product description page:

Upon clicking it, the finder image will open, allowing customers to explore the listed products:

When a customer clicks on any of the finder icons, the associated product will appear with “View” and “Add to Cart” options:

• Clicking “View” will redirect the customer to the product’s description page.
  
• Clicking “Add to Cart” will directly add the product to the customer’s cart.

Collection page

The Image Finder will also be displayed on the collection page in the following format.

You can refer to the below-given URL & credentials to check the demo: https://growth-hack-demo.myshopify.com
Storefront Password: pildai

Need Support?

Hope you like this blog. To get more interesting blogs, keep in touch with us. If you need any kind of support, simply raise a ticket at https://webkul.uvdesk.com/en/.

You can contact support@webkul.com to get proper assistance.

Thank you for reading this Blog!