Skip to main content

Adding App Blocks to Your Theme

App blocks are how MOD Bundles displays on your store. This guide walks you through adding them to your theme.

Updated yesterday

What Are App Blocks?

App blocks are draggable components that you add to your theme through the Shopify theme customizer. MOD Bundles provides three app blocks:

App Block

Used For

Mix & Match Bundle

Mix & Match bundles

Pack Builder

Pack Builder bundles

Collection Bundle

Collection Bundles

Step-by-Step: Adding an App Block

Step 1: Open Theme Customizer

  1. Go to Online Store → Themes in your Shopify admin

  2. Click Edit theme on your active theme

Navigating to the theme editor

Step 2: Create or Select a Bundle Template

Click the template dropdown at the top center of the screen.

We recommend creating a dedicated template for your bundles:

  1. Click the template dropdown → Products → Create template

  2. Name it something descriptive (e.g., "MOD-Mix-and-Match-Bundle")

  3. This duplicates your default product template, which you can now customize for bundles

Alternatively, you can duplicate an existing template by selecting it and choosing Create template to make a copy.

Tip: Keeping bundles on their own template lets you customize the layout without affecting your regular product pages. See Creating a Product Template for detailed instructions.

Creating a new template

Step 3: Add the App Block

For Mix & Match and Collection Bundles:

  1. In the left sidebar, find the Product information section (sometimes called Product details — the name varies by theme)

  2. Click Add block

  3. Scroll down to Apps

  4. Click the appropriate block:
    ​Mix & Match Bundle for Mix & Match Collection Bundle for Collection Bundles

  5. Position the block below the title/price and above the Add to Cart button

For Pack Builder:

Pack Builder works best at full width. Instead of adding it to the Product information section:

  1. Hide the Product information section by clicking the eye icon next to it

  2. Click Add section and add a custom section (such as Custom Liquid or Custom content — the name varies by theme) that can span the full width of the page

  3. Inside that section, click Add block → Apps → Pack Builder

Adding an app block
Block positioning in the sidebar

Step 5: Save

Click Save in the top right corner.

Block Settings

Each app block has settings you can configure:

Click the block in the sidebar to see its options. Common settings include:

  • Bundle Product (required for page/collection templates)

  • Show Bundle Title / Show Bundle Price toggles

  • Layout Options (desktop/mobile columns)

  • Color Swatches configuration

  • Cart behavior settings

Block settings panel

Note: Most styling is controlled through the MOD Bundles app itself, not the block settings.

Using Bundle Product (Page & Collection Templates)

This is important and often missed!

When Is Bundle Product Required?

Template Type

Bundle Product Needed?

Product template

No — Block auto-detects which bundle to show

Page template

Yes — You must select the bundle product

Collection template

Yes — You must select the bundle product

How to Configure Bundle Product

  1. Add the app block to your page or collection template

  2. Click the block in the left sidebar

  3. Find the Bundle Product setting

  4. Click Select and search for your bundle's exact name

  5. Select the parent bundle product (the product MOD Bundles created for your bundle)

  6. Click Save

Bundle Product setting
Searching for a bundle product

Important: You must select the parent bundle product that was created by MOD Bundles—not one of the individual products inside the bundle. Search for the exact bundle name you entered when creating the bundle in the app.

Why Is This Needed?

On a product template, the block knows which bundle to display because you're viewing that product's page.

On a page template or collection template, there's no product context—the block doesn't know which bundle you want to show. The Bundle Product setting tells it which bundle product to display.

Common Mistakes

Problem 1: You added the block to a page template but the bundle doesn't show up.

Solution: Click the block and configure the Bundle Product setting.

Problem 2: You selected a product but it's not the right one.

Solution: Make sure you're selecting the parent bundle product created by MOD Bundles, not one of the individual products inside the bundle. Search for the exact bundle name.

Multiple Bundle Types

If you sell different bundle types, create a separate template for each:

  • "Mix & Match Template" with Mix & Match Bundle block

  • "Pack Builder Template" with Pack Builder block

  • "Collection Bundle Template" with Collection Bundle block

Assign each bundle product to its matching template.

Removing an App Block

If you need to remove a block:

  1. Open theme customizer

  2. Navigate to the template with the block

  3. Click the block in the sidebar

  4. Click the trash icon or "Remove block"

  5. Save

Troubleshooting

Don't See "Apps" in Block Picker?

Your theme may not support app blocks (not Online Store 2.0).

Solutions:

  • Upgrade to an OS 2.0 theme

  • Contact us for manual integration options

Block Added But Nothing Shows?

  • Using a page or collection template? You must configure the Bundle Product setting in the block—see "Using Bundle Product" above

  • Make sure you're viewing a bundle product page (if using product template)

  • Check that the product uses the template with the block

  • Verify the bundle was created successfully in the app

Block Shows But Looks Wrong?

  • Check positioning within the template

  • Review customization settings in MOD Bundles app

  • Test in incognito mode to rule out caching

Next Steps

Did this answer your question?