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
Log in to your Shopify Admin.
In the left-hand menu, click on "Bundles" (under the Appstle section).
Choose the bundle you want to edit and go to the Design section.
Scroll down and click on “Integrate Custom HTML”.
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!