Add custom sections or features to collection pages?

Store Design
1

Hi everyone, I’m trying to improve the design of my Shopify store’s collection pages and would like to add some custom sections or unique features (like banners, text blocks, or product highlights). I’m not sure how to edit the theme for this. What’s the best way to add custom sections to collection pages?

1 Like
2

Hey @mikechris52

It usually depends on what type of section you’re looking to add and what is your theme. Can you tell me more about it then I will be happy to provide you a detailed guidance and help if you require!

Best,
Moeed

3

Hi @mikechris52 .

I hope you are well!

first, check if your theme already allows sections on collection pages

Basically, you can add the section or the blocks or banners or product highlights by going to Online store >> Customize >> click on Add section and add the block as per your need.

Also, it’s a basic feature available in every theme but sometimes it requires code to

image
image1919×884 207 KB

Safe work advice
Duplicate your theme so that any problem you have in live code will not be disturbed (Online Store → Themes → … → Duplicate).

  1. Work on the duplicate so your live store is safe.

  2. When happy, Preview the duplicate → then Publish.

Additionally, we’re here to help—feel free to message if you need any assistance.

4

Hi there,

You can add custom sections to collection pages by editing your theme’s collection.json (or collection.liquid, depending on your theme). A common approach is:

  1. Go to Online Store > Themes > Edit code.

  2. Open /templates/collection.json.

  3. Add a new section reference (for example, “type”: “custom-banner”) where you want it to appear.

  4. Then create a new file under /sections/ (e.g., custom-banner.liquid) and build your banner/text/product highlight there.

If you don’t want to edit code, another option is to use a page builder app (like Shogun, PageFly, GemPages) which lets you drag-and-drop custom sections without coding.

That way, you can design flexible layouts while keeping your collection pages organized.

Sinh Developer, from Tipo

5

Hi @mikechris52 ,
I am from Mageplaza - Shopify solution expert.

Your request is fairly simple to implement if you’re familiar with editing code in Shopify. I have previously created and customized sections related to collections in Shopify. If you’re interested, please share your collaborator access with me, and I’ll create a sample custom collection section for you based on your specific requirements.

Best regards!

6

Hi @mikechris52 ,

If you’re not comfortable with code, you can try apps like GemPages or Shogun. These page builders make it easy to drag and drop elements like banners and text blocks onto your collection pages without any coding

Best,

Felix

7

You can only add custom sections to collection pages through the “Customize” editor if your theme’s collection.json template supports them. If you don’t see an “Add section” option when editing a collection page, you’ll need to edit your theme’s collection.json file and include your custom sections. After you do this once, the sections will appear in the theme editor for drag-and-drop customization, just like on the homepage.

Step 1: Go to Theme Code

  1. In Shopify Admin → Online Store → Themes → Edit code.
  2. Find templates/collection.json

Step 2: Modify collection.json

Your file might look like this right now (example for Dawn):

{
  "sections": {
    "main": {
      "type": "main-collection-product-grid",
      "settings": {}
    }
  },
  "order": ["main"]
}

Step 3: Manually insert the section definitions you want. For example:

"custom_banner": {
  "type": "image-with-text",
  "settings": {
    "image": "shopify://shop_images/your-banner.jpg",
    "title": "New Arrivals",
    "text": "Explore our latest collection",
    "button_label": "Shop Now",
    "button_link": "/collections/new"
  }
}

Then add "custom_banner" into the "order": [] list, like:

"order": [
  "banner",
  "custom_banner",
  "product-grid",
  "multirow_nJWXPg"
]
8

Thanks, the problem has been solved.

1 Like