Collection page customization on kalles theme

[Timileyin]

I would like to customize the collection page with a banner, some text, additional images, and maybe a video, if possible, like the picture below

I would appreciate it if anyone could provide a code and process to do it

[goldi07]

Hello @Timileyin 

Got it — you want your collection page on the Kalles theme to look more like the example you shared:

. Top Banner (big image + title text)

. Introductory Text + Image section

. Collection Products Grid

. (Optional) Video inserted somewhere

This is definitely possible on the Kalles theme because it is super flexible, especially using Sections and Metafields or custom blocks.
Here’s a plan to set it up (I’ll guide you based on how Kalles usually works):

Step 1: Add a Custom Banner at the Top
1. Go to Online Store → Themes → Customize.

2. Navigate to your Collection Page.

3. Click Add Section → Choose "Banner" or "Image with Text Overlay" (Kalles has multiple options).

4. Upload your banner image (like the guy standing in front of the wall in your example).

5. Set the Heading and Subheading ("ICON2 JEANS" + "Stoer, Strak & Stijlvol").

Step 2: Add Text and Image Section
1. Still on the collection page editor, Add Section → "Image with Text".

2. Upload the secondary image (like the sitting guy in your example).

3. In the text block, write your description ("Ontdek de nieuwste ICON2 jeans..." etc.).

4. Adjust the alignment (text left or right of image) as you prefer.

Step 3: Insert a Video (Optional)
1. Add Section → "Video" (you can embed a YouTube/Vimeo link or upload an MP4 file).

2. Place the video above or below the product grid.

Step 4: Show the Collection Products
1. Under these custom sections, make sure the "Collection Products" block is active.

2. It will automatically pull the products from the selected collection.

Step 5: Fine-Tune
. You can set padding (space around sections) to make it look cleaner.

. Add a background color if needed to separate sections visually.

. Kalles also allows text animations if you want fancy movements.

Thank you 😊

[Timileyin]

The theme does not support me adding section on the collection page

[goldi07]

Got it — thanks for clarifying!
Since your version of Kalles (or the way it’s set up) does not allow adding sections directly on collection pages through the Shopify customizer, we'll have to customize it manually by editing the theme files.

No problem — this is very doable.
Here’s the new plan:

How to customize the Collection page manually (in Kalles)
1. Duplicate your theme first
Always duplicate your live theme before editing:
Online Store → Themes → Actions → Duplicate
(so you can safely edit without breaking your live store).

2. Find and edit the collection.json template
1. Go to Online Store → Themes → Edit Code.

2. Under Templates, open collection.json.
(Or if you see collection.liquid, open that — depends on your Kalles version.)

3. Add a custom section inside the template
Look for this in your code:

{
  "type": "collection-products",
  "settings": {
    ...
  }
}

(or similar, where the products are listed).

Before or above that block, insert a reference to a new section, like this:

{
  "type": "custom-collection-banner"
},
{
  "type": "collection-products",
  "settings": {
    ...
  }
}

4. Create the new custom section
Now we need to create the section.

. Go to Sections → Add a new section → Name it custom-collection-banner.liquid.

Paste this simple starter code:

{% schema %}
{
  "name": "Custom Collection Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Your Title Here"
    },
    {
      "type": "textarea",
      "id": "subtext",
      "label": "Subtext",
      "default": "Your description here."
    },
    {
      "type": "url",
      "id": "video_link",
      "label": "Optional Video Link"
    }
  ],
  "presets": [
    {
      "name": "Custom Collection Banner",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="collection-banner">
  {% if section.settings.banner_image != blank %}
    <img src="{{ section.settings.banner_image | img_url: '1500x' }}" alt="Banner" />
  {% endif %}
  <div class="banner-text">
    <h1>{{ section.settings.title }}</h1>
    <p>{{ section.settings.subtext }}</p>
    {% if section.settings.video_link != blank %}
      <div class="video-container">
        <iframe width="560" height="315" src="{{ section.settings.video_link }}" frameborder="0" allowfullscreen></iframe>
      </div>
    {% endif %}
  </div>
</div>

<style>
.collection-banner {
  text-align: center;
  margin-bottom: 30px;
}
.collection-banner img {
  width: 100%;
  height: auto;
}
.banner-text {
  padding: 20px;
}
.video-container {
  margin-top: 20px;
}
</style>

5. Save and Test!
. Save all files.

. Go to your collection page.

. You should now see your banner, text, and video area above your products!

You will be able to edit the banner image, text, and optional video from the customizer under "Custom Collection Banner".

After this, your collection page will look similar to the example you posted!

Thank you 😊

[Timileyin]

I can't find the liqiud code of collection but I have fixed the image section 

[goldi07]

Perfect — thanks for sharing the screenshot!
Now I clearly see what's happening:

. You do have collection.liquid.

. Your collection page is built using a section called collection_page.liquid.

. Inside that section, it loads the sidebar, products, banners, etc.

Summary:
You are using a traditional Liquid template (collection.liquid) — not JSON — but it's still modular through sections like collection_page.liquid.
This is great! because it gives you more freedom to inject new content!

Here's what you can do next:
To add a banner, text, images, or video on your collection page:

1. Open sections/collection_page.liquid
You already have it open (I see it in your tabs ).

This is the main section controlling the content of your collection page.

2. Find a good spot to insert your custom content
Usually, you will see something like:

{% section 'collection-banner' %}
{% section 'collection-products' %}

or

{% render 'collection-banner' %}
{% render 'collection-products' %}

(Or a custom layout...)

Wherever you want your banner and text to appear (usually above products), insert a custom HTML block.

3. Add your content manually
For example, inside collection_page.liquid, you can insert this:

<div class="custom-collection-banner" style="text-align: center; margin-bottom: 30px;">
  <img src="{{ 'your-banner-image.jpg' | asset_url }}" alt="Collection Banner" style="width: 100%; height: auto;" />
  <h1 style="margin-top: 20px;">ICON2 JEANS</h1>
  <p style="max-width: 600px; margin: 10px auto;">Perfect fit, bold streetstyle details, and fast shipping. Order now!</p>

  <div style="margin-top: 30px;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/yourVideoID" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

. Replace your-banner-image.jpg with your banner image (you can upload it into Settings → Files and grab the link, or put it in your assets).

. Replace yourVideoID with your YouTube video ID.

What this will give you:
. Banner image

. Heading text

. Paragraph text

. Embedded video

. Clean and responsive styling

Thank you 😊

[Timileyin]

I pasted it here but still not working

[goldi07]

Got it — I see exactly why it’s not working.
You're very close, but here's the problem:

You pasted the HTML inside the <style> tags accidentally!
(And that’s why it's not showing — browsers ignore HTML inside <style> because <style> is only meant for CSS.)

Here's what you need to fix:
In your screenshot, notice:

</style>   <-- You are inserting AFTER this

Move your code AFTER the </style> tag, not inside it.

Correct way:
It should be like this:

{% endstyle %}   {# or </style> depending on syntax #}

<div class="custom-collection-banner" style="text-align: center; margin-bottom: 30px;">
  <img src="{{ 'your-banner-image.jpg' | asset_url }}" alt="Collection Banner" style="width: 100%; height: auto;" />
  <h1 style="margin-top: 20px;">ICON2 JEANS</h1>
  <p style="max-width: 600px; margin: 10px auto;">Perfect fit, bold streetstyle details, and fast shipping. Order now!</p>

  <div style="margin-top: 30px;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/yourVideoID" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

{% schema %}
{
  "name": "Collection Page",
  ...
}
{% endschema %}

Key points:

. Your HTML (banner, text, video) goes outside the <style> section.

. The schema {% schema %} always stays at the very bottom.

In short:

Wrong | Correct
Inside <style> | After </style>
Browser ignores it | Browser shows your content

Next steps:
. Move the banner code after </style>.
. Save the file.
.Refresh your collection page frontend (CTRL+Shift+R).

You should see your banner + text + video nicely!

Thank you 

[Timileyin]

I have insert it but it showed on new page instead of the default collection

[goldi07]

ok last try now 

Perfect — now from this screenshot I can clearly see:

. Your collection pages are using "Default collection" template.

. That "Default collection" template is assigned to 28 collections.

. So we need to edit what is inside the Default collection template, NOT create a new page.

Solution steps for you:
1. Go back to your Shopify code editor.

2. Open:

. templates/collection.liquid

. OR whatever file your "Default collection" points to.
(It usually looks like {% section 'collection' %} or {% section 'main-collection' %} inside the liquid file.)

3. Now, insert your custom banner/video code inside the section that is loaded.

Ideally above the product grid, so it shows up at the top of the collection page.

Example:
In collection.liquid, you probably see this:

{% section 'collection' %}

or

{% section 'main-collection' %}

Then:

. Open sections/collection.liquid or sections/main-collection.liquid

. Insert your HTML (banner + text + video) inside that section, before products loop.

Why your previous code didn't work:
You pasted the code in collection_page.liquid, which is NOT connected to your "Default collection" template.
That's why it opened on a separate new page — it's a completely different template.

Let's do this:
If you want, you can show me:

. The content inside your collection.liquid and/or

. The section it is calling (inside sections/ folder)

I'll tell you exactly where to paste your code for it to appear properly on your existing collections!

Thank you 😊

[Timileyin]

Where should I put the code now

[goldi07]

Alright, I see everything clearly now!
You're inside the right file (templates/collection.liquid) — perfect.

Now based on your file, here’s what you should do:

Where to insert your custom banner/video code:
Insert your code right after this line:

{% if cat_des == '2' %}
<div class="cat_des_nt4 container container_cat tc mt__40">{{ collection.description }}</div>
{% endif %}

OR if you want even simpler:
Put your code just above the <div class="container container_cat ..."> line.

Example:

{% if cat_des == '2' %}
<div class="cat_des_nt4 container container_cat tc mt__40">{{ collection.description }}</div>
{% endif %}

<!-- 🔥 Your custom banner/video code here -->
<div class="custom-collection-banner" style="text-align: center; margin-bottom: 30px;">
  <img src="{{ 'your-banner-image.jpg' | asset_url }}" alt="Collection Banner" style="width: 100%; height: auto;" />
  <h1 style="margin-top: 20px;">ICON2 JEANS</h1>
  <p style="max-width: 600px; margin: 10px auto;">Perfect fit, bold streetstyle details, and fast shipping. Order now!</p>
  <div style="margin-top: 30px;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/yourVideoID" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<!-- 🔥 End of your custom code -->

<!-- Product filter and grid starts after this -->
<div class="container container_cat ...">

In short:
. Your banner/video will show at the top of the Default Collection page.

. Then the product grid will appear below it.

Quick Note:
. Replace "your-banner-image.jpg" with your real uploaded image file from Shopify assets.

. Replace "yourVideoID" with your real YouTube video ID.

[Timileyin]

I have tried all that, but still the same 😣 

[goldi07]

hey @Timileyin 

I can clearly see now what's happening.

Problem:
You are editing the collection.liquid template, but in your store preview, you're viewing a collection (like "Default Collection") that is using a section-based layout (probably collection_page.liquid or collection-list.liquid from the sections folder) — not the collection.liquid template you edited.

That’s why your inserted code shows on a new page or doesn't show where you want.

How to fix it properly:

Step 1:
Instead of editing templates/collection.liquid, you must edit the right section file that's being used for the collection layout.

Usually, it is sections/collection-page.liquid or sections/collection-list.liquid.

From your screenshot, open:

. sections/collection_page.liquid

(You already have that tab open in your code editor.)

Step 2:
Inside collection_page.liquid, find where the product grid or product list is rendered — usually after a line like:

{% section 'product-grid' %}

or

{% render 'product-grid' %}

or similar.

Above that (before the product grid), insert your custom collection banner and text block (your promotional block like the ICON2 JEANS example).

Example:

<div class="custom-collection-banner">
  <img src="{{ 'your-banner-image.jpg' | asset_url }}" alt="ICON2 JEANS">
  <div class="custom-collection-text">
    <h2>Ontdek de nieuwste ICON2 Jeans</h2>
    <p>Perfect aangesloten pasvorm, stoere details en streetstyle uitstraling. Bestel nu, vandaag nog verzonden!</p>
  </div>
</div>

Replace the image link and text according to your content.

Step 3:
Save the changes and preview the collection page.
Now your custom block should show above the products inside the existing collection page — not on a separate new page!

Summary:

. Do not edit templates/collection.liquid.

. Edit sections/collection_page.liquid.

. Insert your code above the product listing block.

Would you like me to show you exactly where inside your collection_page.liquid you should paste the code?
If yes, please send me a screenshot of the top half of your collection_page.liquid file!
(Or just paste the first ~100 lines of it here.)

if it still not work then i am sorry and you need to higher a developer 

Thank you 😊