Back in Stock: Theme Integration & Setup

Overview

Back in Stock supports multiple button types that integrate directly with your Shopify theme. Choose the option that best fits your store's design and technical requirements.

Available Integration Types:

• Premade Theme Integration - Automatic setup for popular themes
• App Block Button - Drag-and-drop for Online Store 2.0 themes
• Floating Button - Universal solution that works with any theme
• Custom Integration - Developer-created solutions

🎯 Recommended Setup Process

Step 1: Check Your Theme Compatibility

For Online Store 2.0 Themes:

• Back in Stock automatically detects OS2 compatibility
• Skip to App Block Button setup below

For Other Popular Themes:

• We have premade integrations for most popular Shopify themes
• Continue to Premade Theme Integration below

For Custom/Unsupported Themes:

• Floating button works universally
• Contact us for custom integration

🔧 Integration Methods

Method 1: Premade Theme Integration (Recommended for most stores)

Best for: Popular Shopify themes with existing integrations

Setup Steps:

1. Access Integration Settings
   • Go to your Back in Stock dashboard
   • Click 'Customize' from main menu
   • Select 'Theme Integration' from dropdown
2. Select Your Theme
   • Click 'Select theme integration' dropdown
   • Find and select your theme from the list
   • If your theme isn't listed, see "Don't see your theme?" below
3. Publish Integration
   • Click 'Publish integration' button
   • Integration is now active
4. Verify Installation
   • Visit an out-of-stock product page on your store
   • Button should appear (usually below 'Sold out' button)
   • Test the signup form functionality

Supported Features:

• ✅ Inline button placement on product pages
• ✅ Automatic variant detection
• ✅ Theme-matched styling
• ✅ Mobile responsive design

Method 2: App Block Button (Online Store 2.0 themes)

Best for: Modern Shopify themes supporting App Blocks

Automatic Detection:

• Back in Stock auto-detects OS2 compatibility on installation
• Check current setting: Customize → Theme Integration → Should show "Online Store 2.0"

Adding the Button:

1. Open Shopify Theme Editor
   • Go to Online Store → Themes → Customize
   • Navigate to a product page
2. Add App Block
   • Click 'Add block'
   • Select 'Back in Stock button' under Apps section
   • Position where desired on the page
3. Customize Appearance
   • Click the added 'Back in Stock button' block
   • Adjust colors, fonts, margins, etc.
   • Changes preview in real-time
   • Click Save when satisfied

Customization Options:

• Button text and styling
• Colors and fonts
• Margins and spacing
• Position on page

Method 3: Floating Button (Universal solution)

Best for: Any theme, quick setup, no coding required

Setup Steps:

1. Access Button Settings
   • Dashboard → Customize → Product Page Button
2. Configure Floating Button
   • Toggle floating button on/off
   • Choose position (corners of screen)
   • Customize appearance and text
3. Technical Details
   • Positioned on page borders
   • Created inside iframe (unaffected by theme styles)
   • Inserted via JavaScript widget
   • Works with all themes

Method 4: On-Page Form Integration (Special themes)

Supported Themes:

• Mobilia v2.0+
• Responsive v3.2+
• Retina (any version)
• Parallax (any version)

Form Label Customization:

1. Access Theme Language Settings
   • Shopify Admin → Themes
   • Choose 'Edit language' from dropdown
   • Select 'Products' tab
2. Edit Notify Form Section
   • Scroll to 'Notify Form' section
   • Modify labels as needed
   • Click Save

🛠️ Technical Implementation

Theme File Changes

What Back in Stock Adds:

• File: back-in-stock-helper.liquid (added to Snippets)
• Include: Added to bottom of theme.liquid layout
• Purpose: Communicates inventory and variant data to the app

Code Added to theme.liquid:

{% include 'back-in-stock-helper' %}

Removing Integration (If uninstalling)

1. Remove Include Line
   • Edit theme.liquid file
   • Find and delete: {% include 'back-in-stock-helper' %}
2. Delete Snippet File
   • Go to Snippets folder
   • Delete back-in-stock-helper.liquid

🔄 Theme Updates & Maintenance

When Installing New Theme

Good News: No need to reinstall Back in Stock!

Check These Settings:

1. Theme Integration: May need to select new theme integration
2. Button Appearance: Verify button still appears on sold-out pages
3. Signup Form: Test form functionality

After Theme Updates

For Premade Integrations:

• Check if button still appears
• Contact support if integration breaks

For Custom Integrations:

• Contact support for updates
• We'll adapt integration to new theme version

For App Block Buttons:

• Usually continue working automatically
• May need to re-add block in theme editor

🎨 Customization Options

Button Caption Configuration

• Available for all button types
• Settings: Customize → Product Page Button → Button Caption
• Changes apply to both theme integration and floating buttons

Advanced Styling

Floating Button: Full customization in dashboard Theme Integration: Contact support for styling changes App Block: Customize directly in Shopify theme editor

❓ FAQ & Troubleshooting

"Don't see your theme in the dropdown?"

Solution: Email backinstock-support@useamp.com

• We create new theme integrations on request
• Usually completed within 24-48 hours
• Free service for all customers

"Button not appearing after setup?"

Check:

• Product is actually out of stock
• Correct theme integration selected
• App embed is enabled in theme editor

Get Help: Contact backinstock-support@useamp.com

"Button doesn't match my theme design?"

For Theme Integrations: Contact support for styling adjustments For Floating Button: Use dashboard customization options For App Blocks: Use Shopify theme editor

"Does Back in Stock work with product variants?"

Yes! Back in Stock works at the variant level:

• Customer selects specific size/color that's out of stock
• Receives notification only when that variant restocks
• Other variants don't trigger notification