Wishlist Theme Integration

GP ‑ Wishlist & Upsell Suite uses Shopify’s theme app extension to seamlessly integrate widgets into your storefront. This guide explains how to enable, position, and customize the theme extension blocks.

What is a Theme Extension?

A theme app extension is a modern way for Shopify apps to add functionality to your store without modifying your theme’s code directly. Benefits include:

• No code editing required — Use the theme customizer
• Easy updates — App updates automatically apply
• Safe installation — Won’t break your theme
• Quick removal — Disable anytime without residue

Enabling the Theme Extension

Step 1: Access Theme Customizer

1. Go to Online Store > Themes in Shopify admin
2. Click Customize on your active theme

Step 2: Enable App Embeds

1. In the customizer, click the App embeds icon (puzzle piece) in the left sidebar
2. Find GroPulse Wishlist in the list
3. Toggle the switch to enable the extension
4. Click Save

Important: The app embed must be enabled for any widgets to appear.

Available Theme Blocks

GP ‑ Wishlist & Upsell Suite provides several blocks you can add to your theme:

Wishlist Button Block

gropulse-wishlist-button.liquid

Adds the “Add to Wishlist” button to product pages.

Placement options:

• Product form section
• Below add to cart button
• Product description area
• Custom location

Wishlist Page Block

gropulse-wishlist.liquid

Displays the full wishlist page with all saved items.

Best placement:

• Dedicated wishlist page template
• Customer account area

Volume Discount Block

gropulse-volume-discount.liquid

Shows tiered pricing options on product pages.

Best placement:

• Above or below add to cart
• Product information section

BOGO Offer Block

gropulse-bogo-offer.liquid

Displays Buy One Get One promotions.

Best placement:

• Product page (near add to cart)
• Cart page
• Collection pages

Upsell Offer Block

gropulse-upsell-offer.liquid

Shows upsell product recommendations.

Best placement:

• Below product description
• Cart page
• Cart drawer

Product Bundle Block

gropulse-product-bundler.liquid

Displays product bundle offers.

Best placement:

• Product page
• Collection page
• Dedicated bundle section

Product Recommendations Block

gropulse-product-recommendations.liquid

Shows curated product recommendations.

Best placement:

• Product page (bottom)
• Collection page
• Homepage
• Cart page

Adding Blocks to Your Theme

Using Theme Customizer

1. Open the theme customizer
2. Navigate to the page template you want to edit (e.g., Product page)
3. Click Add section or Add block
4. Find the GroPulse block you want to add
5. Drag to position it
6. Configure settings if available
7. Click Save

Block Settings

Each block may have customizable settings:

Theme-Specific Placement

Online Store 2.0 Themes

Modern themes support app blocks natively:

1. Open theme customizer
2. Select the template (Product, Collection, etc.)
3. Find the section where you want the block
4. Click Add block within that section
5. Select the GroPulse block
6. Position and save

Compatible themes include:

• Dawn
• Sense
• Fresh
• Craft
• Ride
• Studio
• Publisher
• Crave

Vintage Themes

Older themes may require manual code insertion:

1. Go to Online Store > Themes > Edit code
2. Find the template file (e.g., product.liquid)
3. Add the render snippet:

{% render 'gropulse-wishlist-button' %}

4. Position it where you want the button
5. Save

Snippet Reference

Available Snippets

Rendering Snippets

{% comment %} Basic render {% endcomment %}
{% render 'gropulse-wishlist-button' %}

{% comment %} With product context {% endcomment %}
{% render 'gropulse-wishlist-button', product: product %}

{% comment %} With custom settings {% endcomment %}
{% render 'gropulse-volume-discount', product: product, show_savings: true %}

Navigation Wishlist Icon

Add a wishlist icon to your header navigation:

For Header Section

1. Open theme customizer
2. Click on your header section
3. Look for app blocks or announcement bar area
4. Add the wishlist navigation button block

Manual Code Method

In your header.liquid or navigation file:

{% render 'navigation-wishlist-button' %}

Position it near your cart icon for consistency.

Page Templates

Creating a Wishlist Page

1. In Shopify admin, go to Online Store > Pages
2. Click Add page
3. Title: “Wishlist” (or your preferred name)
4. In theme customizer, assign the wishlist template
5. Add the wishlist page block to the template

URL Configuration

Default wishlist URL: /pages/wishlist

Ensure your menu links point to this URL:

1. Go to Online Store > Navigation
2. Edit your main menu
3. Add a menu item with link: /pages/wishlist

Troubleshooting

Blocks Not Appearing

1. Check app embed is enabled
   • Theme customizer > App embeds > GroPulse Wishlist ON
2. Verify block is added
   • Check the specific template in customizer
   • Ensure block is visible (not hidden)
3. Check theme compatibility
   • Some vintage themes need manual code
4. Clear cache
   • Browser cache
   • Shopify CDN cache (wait 5-10 minutes)

Wrong Position

1. Open theme customizer
2. Navigate to the template
3. Drag the block to new position
4. Save changes

Styling Issues

• Check for theme CSS conflicts
• Use Custom CSS feature to override
• Verify app embed styles are loading

Multiple Blocks Showing

• Check for duplicate blocks in customizer
• Remove extra instances
• Verify code doesn’t have duplicate renders

Best Practices

Placement Guidelines

Mobile Considerations

• Test all placements on mobile
• Ensure buttons are touch-friendly
• Consider hiding some blocks on mobile if cluttered
• Verify scrolling and interactions work

Performance

• Don’t add duplicate blocks
• Remove unused blocks
• Use lazy loading where available

Advanced Customization

Conditional Rendering

{% comment %} Only show on specific products {% endcomment %}
{% if product.tags contains 'wishlist-enabled' %}
  {% render 'gropulse-wishlist-button' %}
{% endif %}

{% comment %} Only for logged-in customers {% endcomment %}
{% if customer %}
  {% render 'gropulse-wishlist-button' %}
{% endif %}

Custom Styling in Theme

{% comment %} Wrap with custom class {% endcomment %}
<div class="my-custom-wrapper">
  {% render 'gropulse-wishlist-button' %}
</div>

/* In theme CSS */
.my-custom-wrapper .gp-wishlist-button {
  /* Custom styles */
}

What’s Next?

Continue optimizing your store:

• Custom CSS Styling — Advanced visual customization
• Email Templates & Social Links — Email customization
• Understanding Your Analytics — Track performance

Proper theme extension integration ensures your widgets appear exactly where you want them — take time to set it up right.