Skip to main content

How to Add a Custom Image or Banner to Your Bundle Page

(No Coding Experience Needed!)

Updated this week

Want to add a promotional image, banner, or a special message to your bundle page on Shopify using Appstle? Good news — it’s super easy, and you don’t need to be a developer to do it!

Follow this guide to add custom HTML (like an image) to your bundle page in just a few simple steps.


🧭 Step 1: Open the Custom HTML Section

  1. Log in to your Shopify Admin.

  2. In the left-hand menu, click on "Bundles" (under the Appstle section).

  3. Choose the bundle you want to edit and go to the Design section.

  4. Scroll down and click on “Integrate Custom HTML”.

  5. Click the “Add HTML” button.

Now you’ll see three fields appear:

  • Selector

  • Position

  • Custom HTML


🧹 What Do These Fields Mean?

1. Selector

This tells the system where on the page you want your content to appear. It's like giving directions!

🟢 Example:
If you want to add your image above the bundle title, you can use this:

.ab-bundle-heading-title

Think of this as picking the spot where your image will show up.


2. Position

Now decide how the HTML is added in relation to that spot. You have 3 options:

  • After: Your content will appear below the selected element.
    ✅ Use this if you want to add an image under a title or section.

  • Before: Your content appears above the selected element.
    ✅ Great for banners or messages above a block.

  • Child: Your content goes inside the selected element.
    ✅ Use this to embed things inside a box or section.


3. Custom HTML

This is the actual code that controls what’s shown — like an image, banner, or text.


🖼️ Example: Add an Image to Your Bundle Page

Paste the following code into the Custom HTML field:

<div style="display: flex; justify-content: center; padding: 10px;">
<img
src="https://cdn.shopify.com/s/files/1/0713/3272/4793/files/theme_cover_image.jpg?v=1740953205"
alt="Bundle Image"
style="max-width: 100%; width: 300px; height: auto; border-radius: 8px;"
>
</div>

✅ This will:

  • Center the image on the page

  • Add spacing around it

  • Limit the width to 300px

  • Slightly round the corners for a clean look


🎨 Want to Customize It? Try These Tweaks:

Resize the Image

width: 400px;
height: auto;

Align to Left or Right

justify-content: flex-start; /* Align left */
justify-content: flex-end; /* Align right */

Add a Border

border: 2px solid #ccc;

Add Space Below the Image

margin-bottom: 20px;

✅ Final Tip

You can add any HTML this way — text, buttons, images, videos, and more. Just make sure to use the correct selector and position for where you want it to show up!

And that’s it — your bundle page is now even more personalized! 🎉

Need help finding the right selector or styling the image? Our support team is here for you!

Did this answer your question?