Skip to content

Adding Confetti to Specific Pages

Pasilobus Confetti enhances your Shopify store with dynamic visual effects that celebrate customer interactions. By default, both the "Welcome Confetti" and "Add-to-Cart Confetti" features are globally enabled and controlled to enhance the overall user experience across your entire website. 

This documentation explains how these features work globally and how you can customize and show confetti settings on specific pages only.

Understanding Global and Page-Specific Confetti Effects

In the theme editor, Pasilobus Confetti is enabled as app embed by default. You can disable global embed and add confetti components to specific pages on Shopify.  

Global Confetti Settings
  • Welcome Confetti: When enabled globally, Welcome Confetti greets new visitors with a festive display upon entering your Shopify store's homepage or landing page. This feature aims to create a positive first impression and engage visitors from the moment they arrive.
  • Add-to-Cart Confetti: Globally enabled, Add-to-Cart Confetti triggers a celebratory animation each time a customer adds an item to their shopping cart. This visual feedback enhances the shopping experience by acknowledging and rewarding customer actions.

Specific Page Effects: 
For more targeted celebrations, you can add Pasilobus Confetti blocks to specific sections of your store. In the theme editor, go to the specific page (like 'Product pages' or 'Cart'), add a new app section, and choose 'Pasilobus Confetti'. You can then customize the confetti effect for that particular section.

Remember, the changes you make will only be saved once you click 'Save' in the theme editor. Customize Pasilobus Confetti to your liking and create engaging celebrations for your online store visitors.

Managing Confetti Duplication

When both global and page-specific confetti features are active simultaneously, confetti effects may appear duplicated. Here’s how to manage this effectively:
  1. Disable Global Confetti Settings: If you plan to utilize page-specific confetti blocks extensively, consider disabling global confetti settings for Welcome Confetti or Add-to-Cart Confetti. This prevents overlapping effects and maintains a cohesive visual experience.
  2. Customize Confetti Blocks: Configure confetti settings within individual blocks to align with the page's theme or campaign goals. Adjust colors, shapes, and animation styles to complement the page content effectively.
  3. Preview and Test: Before deployment, preview each page to ensure confetti effects are applied appropriately without redundancy. Testing across different devices and screen sizes helps identify any performance issues or visual inconsistencies.

Here are practical use cases for managing page-specific confetti effects:

Use Case 1: Add-to-Cart Confetti on Product Pages

Scenario: You want to celebrate and acknowledge when customers add products to their cart but only want the confetti effect to appear on product detail pages. For example your Shopify theme may have "quick add" feature on collection pages and you may not want a confetti played when product added with quick-add buttons.

Implementation:
  • Configure Confetti: Disable Add-to-Cart Confetti globally but customize settings to trigger the animation specifically on product pages.
  • Page-Specific Blocks: Add a confetti block to product detail pages using Pasilobus Confetti's block feature. This ensures that the celebratory animation is directly associated with the action of adding items to the cart on those specific pages.

Benefits:
  • Focused Engagement: By limiting Add-to-Cart Confetti to product pages, you enhance the relevance of the animation, reinforcing positive customer actions directly related to purchasing decisions.
  • Visual Feedback: Customers receive immediate visual feedback when interacting with product pages, encouraging further exploration and potentially increasing conversion rates.

Use Case 2: Special Promotions or Events

Scenario: You are running a limited-time promotion or hosting an event and want to create a festive atmosphere on specific landing pages.
Implementation:
  • Customize Confetti Blocks: Utilize Pasilobus Confetti's block feature to add customized confetti effects to landing pages dedicated to promotions or events.
  • Theme Alignment: Customize confetti colors, shapes, and animations to align with the promotional theme or event aesthetics, enhancing the overall visitor experience.
Benefits:
  • Event Highlighting: Confetti animations draw attention to special promotions or events, effectively communicating excitement and encouraging visitor engagement.
  • Memorable Experience: The celebratory atmosphere created by confetti reinforces the uniqueness and importance of the promotion or event, leaving a lasting impression on visitors.

Use Case 3: Welcome Confetti on Homepage

Scenario: You want to create a welcoming experience for new visitors landing on your Shopify store’s homepage.
Implementation:
  • Enable Welcome Confetti: Activate Welcome Confetti globally to greet new visitors with a celebratory animation upon entering your site.
  • Customize Appearance: Adjust confetti settings to reflect your brand’s personality or current seasonal themes, ensuring a positive and engaging first impression.
Benefits:
  • Positive First Impression: Welcome Confetti enhances the initial interaction with your store, making visitors feel valued and encouraging them to explore further.
  • Brand Identity Reinforcement: The customized confetti design reinforces your brand identity, establishing a cohesive and memorable user experience from the outset.

Share