Back to Blog List

Introducing New Feature: Interaction - a Tool For Maximum Engagement and Conversion

GemPages Team
Updated:
10 minutes read
gempages-interaction

One of the key differences between a physical store and an online one is flexibility. In a physical store, your staff is prepared to adapt to any situation, ensuring a smooth and personalized customer experience. But an online store is the opposite. It runs as it was set up—you cannot adjust things in real-time while customers browse your site.

That’s why crafting an online store that delivers unforgettable experiences is an art.

The GemPages team has deeply researched CRO to clearly see that CRO is a synthesis of many factors, including copywriting, product, UI/UX design, as well as sales techniques. In which, the balance between aesthetic factors and UX experiences is crucial for success.

To empower Shopify store owners to become true artists, GemPages is thrilled to introduce our latest customer-centric feature: Interaction. 

Our ultimate feature empowers Shopify store owners to create dynamic, engaging interactions on their site without coding, delivering a seamless buying experience while driving conversions. Any seller can use this feature effortlessly to make their store more "addictive".

This blog post will cover Interaction’s definition, common use cases, CRO tips and how to maximize it with GemPages. Let’s delve in!

What is the GemPages’ Interaction?

Interactions refer to actions performed by customers on a live page, such as hovering over an element, clicking on it, or when the page loaded and causing changes in other elements.

Two Parts of Each Interaction

  • Trigger Element: The element that web visitors click/hover, or the action they take on the page. One element can create multiple triggers and one trigger can have multiple target elements.
  • Target Element: The element that changes in response to the action taken on its corresponding trigger.

Two Types of Interaction

  • Element: This type requires buyers to perform a specific action on an element—such as clicking or hovering—before any changes occur.
  • Entire page: This type activates when the page loads or when the user scrolls up or down, without having any specific action on an element.
gempages-interaction-ui

Key Benefits of the Interaction Feature

  • Enhance the buyer experience: Enhance the responsiveness of your Shopify store by setting up effective interactions. Improve communication by delivering timely, relevant messages tailored to customer behavior and purchasing actions
  • Capture Attention: Create visually appealing interactions that draw in visitors to read important information about your product
  • Drive Conversions: Building upsell interactions, incentive messages, etc. will also increase conversion rates.
  • Memorable Moments: Foster a lasting connection with their buyer.

Limitations

  1. Pricing Plan: This feature is exclusive for Optimize Plan and higher tiers.
  2. Others:
  • Duplication and Import/Export Limitations: When you duplicate or import/export pages that contain interactions, those interactions will not be carried over to the new page.
  • GemPages's Theme Section: Interaction will not be carried with the created theme section.
  • Sales Funnel: Interaction feature works with Sales Pages within the Sales Funnel, but it is not available on the Post-Purchase Pages
  • Compatibility: Interaction is supported on all page types, including Instant Landing Pages.
  • Plan Downgrade: If you downgrade from the Optimize plan,
    • It is impossible to edit or add new interactions within the GemPages Editor.
    • Interactions currently active on your live pages remain fully functional.
    Not ready to commit but still want to kick the tires?
    No problem! Get started with GemPages' free plan. Explore wonderful features that can do wonders for your store.

    Common Use Case for Interaction Feature

    Here are 10 typical use cases that demonstrate the practical application and effectiveness of the Interaction feature in CRO.

    1. Dynamic Page Design Based on Product Variant Selection

    • When and How: Display additional information when a buyer selects a specific quantity of a product, such as free shipping eligibility.
    • CRO Benefit: Encourages higher cart values by motivating customers to purchase more to unlock additional benefits.

    Experience this Interaction via our Demo store: LINK DEMO

    gempages-demo-case

    About this case: There are two interactions in this circumstance. The first one is a pop up message when clicked to an exact quantity. The second one is a pop up discount when clicked to an exact quantity.
    In this case, you want to motivate customers to purchase more by displaying a message like, "Add 1 more to get a 10% discount" when they have selected up to 3 products. This prompts customers to buy at least 3 or more items.

    2. Custom Content Based on Variant Selection

    • When and How: Display specific information or offers when a buyer selects a product variant, such as available sizes or quantity discounts.
    • CRO Benefit: Enhances the shopping experience by providing tailored information, increasing engagement and conversions.

    Experience this Interaction via our Demo store: LINK DEMO

    gempages-demo-case-2

    About this case: With each product color selection, tailored details appear, enhancing the customer's understanding about the product while giving every variation a unique touch. The shifting colors also deliver a bold visual experience, ensuring your site leaves a lasting impression and stays memorable for visitors.

    3. Custom Carousel Navigation for Mobile:

    • When and How: Use custom navigation buttons to control the carousel on mobile devices for easier and more precise interaction.
    • CRO Benefit: Improves the mobile user experience, reducing accidental swipes and ensuring users stay on your site longer.

    Experience this Interaction via our Demo store: LINK DEMO

    gempages-usecase-3

    About this case: When using a phone, you know, the screen is quite small and can easily lead to incorrect operations. For example, sliding back and forth a carousel and causing customers to accidentally slide back to the old tab, thus dropping a purchase journey. To fix this, you can set 2 buttons for customers to click on. Let experience it in our demo link, testimonial section.

    More Use Cases For Interaction

    4. Upsell Popup:

    • When and How: Trigger an upsell popup after a product is added to the cart to suggest relevant products.
    • CRO Benefit: Completes your upsell funnel, increasing revenue while fostering long-term customer relationships.
    • About this case: Set button "Add to cart" as the Trigger, upon clicking on this button, the Target is the popup banner, will show relevant product. 
    upsell-popupLearn how to create this case with us.

    5. Create Urgency with Last-Minute Deals

    • When and How: Show a message when the countdown timer reaches 1 minute, urging the customer to complete their purchase quickly.
    • CRO Benefit: Drives urgency, pushing customers to take immediate action, increasing conversion rates.
    • Experience this Interaction via our Demo store: LINK DEMO
    • About this case: Set "Countdown Timer" as the Trigger, when it counts down to 1:45s; the Target, here is the message banner, shows up. 
    create-urgencyLearn how to create this case with us.

    6. Interactive Testimonial Showcase

    • When and How: Use an interactive gallery, such as image comparisons, to showcase product testimonials and results.
    • CRO Benefit: Improves credibility and product appeal, helping to quickly convince visitors of your product's value.
    • About this case: Set the images as the Trigger, upon clicking on each image, the Target is the big image will be shown up
    testimonial-showcaseLearn how to create this case with us

    7. Subtle CTA Introduction When Users Are Ready

    • When and How: Reveal key product details, such as price and reviews, after the user interacts with a product image or list on the homepage.
    • CRO Benefit: Avoids overwhelming users with information too early, driving engagement and making the buying process smoother.
    • About this case: Set the product as the Trigger, when hover to this product, the Target, is the product additional information, will be shown.
    subtle-ctaLearn how to create this case with us.

    8. Use Buttons to Replace Tab Headers

    • When and How: Create custom buttons or images to act as tab headers, allowing users to control which content is displayed by interacting with the buttons.
    • CRO Benefit: Enhances flexibility in page design, improving the overall user experience and boosting engagement.
    button-replace-tab-header

    Learn how to create this case with us.

     The best part? With GemPages’ Interaction, you can build all of above common cases, and even more, depending on your creativity.

    Conclusion

    The launch of this new feature, Interaction, marks a significant milestone for GemPages. 

    With interactions, you can not only deliver a smooth experience but also truly engage, especially on key pages such as home pages, product pages and landing pages.

    Personalizing the experience of these pages will bring a connection between the brand and the shopper, thereby increasing CR & AOV.

    Even for Shopify store owners who may not prioritize conversions but want to deliver a visually stunning design for their buyers, this feature provides exactly that.

    Take advantage of the Interaction feature and watch your eCommerce business thrive!

    Our dedicated support team is here to help with any questions or clarifications. Reach out via live chat or email us at support@gempages.help.

    We value your partnership and are excited to deliver an even more enhanced GemPages experience.

    Start selling on Shopify

    Start with free trial, then get your first month for $1.

    Start free trial
    Shopify Sign Up Shopify Sign Up