in ella theme how to collection page

Store Design

Topic summary

Issue: User wants to add a collection page to their home page using the Ella theme (Trade 15.2.0) on Shopify.

Solution Provided:

  1. Access Theme Editor: Navigate to Online Store > Themes > Customize in Shopify Admin

  2. Add Collection Section:

    • Select Home Page from page selector
    • Click “Add Section” and choose Collection List or Featured Collection
    • Configure by selecting desired collections (e.g., Long Kurta, Short Kurti)

  3. Optional Customization:

    • Adjust layout (grid/carousel)
    • Style appearance (fonts, colors)
    • Enable Slider Navigation if using carousel layout

  4. Enable Navigation Arrows (if missing):

    • Verify Slider Navigation setting is enabled in theme editor
    • Add JavaScript initialization code to theme’s JavaScript file if unavailable:
    navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev'
}

  5. Save and Preview: Review changes to ensure collections display correctly

Status: Solution appears complete with technical implementation details provided.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Rivaaj Ethnic in home page how to add a collection page by ref:

premsai_0-1733305248769.png
premsai_0-1733305248769.png1888×519 361 KB

2

Steps to Add a Collection Page:1. Go to Theme Editor:

  • From your Shopify Admin, go to Online Store > Themes.
  • Click Customize for the theme you’re using (in your case, Trade 15.2.0).

  1. Add a Collection Section:

    • In the theme editor, select the Home Page from the page selector dropdown.
    • Look for the option to Add Section and choose a section related to collections, like Collection List or Featured Collection.
    • Configure the section by selecting the collections you want to display (e.g., Long Kurta, Short Kurti, etc.).

  2. Style the Section (Optional):

    • Use your theme settings to control the layout (grid, carousel, etc.) and appearance (font, colors, etc.).
    • For carousel-style navigation (like in your screenshot), ensure that Slider or Carousel Layout is enabled in the section’s settings.

  3. Enable Navigation Arrows (if missing):

    • If arrows are not showing in your slider:
      • Check if the Slider Navigation setting is enabled for the collection list in the theme editor.
      • If unavailable, add the following code to your slider initialization in the theme’s JavaScript file:
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
}

Save and Preview:

  • Save the changes and preview your home page to ensure the collections are displayed correctly.