> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections.md).

# Sections

Sections from the current group can be used almost on each page of a store.

{% hint style="success" %}
Click the '**Sections**' icon in the top-left corner of the settings panel to manage sections.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F74hH36Rwy1nNjeLHlKl2%2Feditor_sections.png?alt=media&amp;token=cfecf171-de9f-4833-949c-844566144172" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
&#x20;In the '*Template*' section group, press the '**Add section**' button and select a desired section from the list.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FIHo8CexS15zktf70qh7N%2Feditor_add%20section.png?alt=media&amp;token=5b14d567-2e60-4b1a-aace-bf7eab9d97d1" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Any dynamic section can be removed or hidden by hovering over its title to reveal the trash or eye icons and pressing the corresponding icon.&#x20;
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Foa29zxPCMTyl6HL20it7%2Feditor_remove%20section.png?alt=media&amp;token=4d6145c7-0d96-46ed-8ab9-68b3e802be8a" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Additional section settings can be viewed by pressing the section, then hitting the three dots \[...] button at the top.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fxa1S5qW5yY8B6OAxQpuT%2Feditor_section%20options.png?alt=media&amp;token=46bcf3e0-4238-4b89-a555-df3dd4b52611" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Dynamic sections can include up to three levels of blocks. To view additional blocks, press the arrow next to the section name to open a drop-down and hit the '**Add block**' button. Then, select a block from the proposed list.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FUa2VrN1pegs9XGIrquvD%2Feditor_add%20block.png?alt=media&amp;token=e27abfde-3ec9-4696-b3df-796258026007" alt=""><figcaption></figcaption></figure>

***

### Customizable sections

Using the provided sections helps you build a more engaging and flexible storefront without needing technical skills. They make it easy to highlight products, promote offers, share your brand story, and organize content to guide customers through your store. By combining different types of sections, you can create a more dynamic shopping experience, keep your site fresh, and improve how customers discover and interact with your products.

#### Banners

Use banner sections to quickly grab attention.\
They’re great for promotions, announcements, or highlighting key messages with strong visuals.

* [<mark style="color:$primary;">Banners carousel</mark>](/triumph/template/sections/banners-carousel.md)
* [<mark style="color:$primary;">Collage</mark>](/triumph/template/sections/collage.md)
* [<mark style="color:$primary;">Slideshow</mark>](/triumph/template/sections/slideshow.md)
* [<mark style="color:$primary;">Slideshow vertical</mark>](/triumph/template/sections/slideshow-vertical.md)

***

#### Blog

Use blog sections to share updates, stories, or helpful content.\
This helps keep your store fresh and can build trust with your audience.

* [<mark style="color:$primary;">Blog posts</mark>](/triumph/template/sections/blog-posts.md)
* [<mark style="color:$primary;">Featured blog posts</mark>](/triumph/template/sections/featured-blog-posts.md)

***

#### Collections

Use the collection section to showcase groups of products (like “New Arrivals” or “Best Sellers”) and make it easier for customers to browse.

* [<mark style="color:$primary;">Collection list</mark>](/triumph/template/sections/collection-list.md)

***

#### Forms

Use forms to collect information from customers - like contact requests, sign-ups, or feedback.\
It’s a simple way to stay connected.

* [<mark style="color:$primary;">Contact form</mark>](/triumph/template/sections/contact-form.md)
* [<mark style="color:$primary;">Newsletter signup</mark>](/triumph/template/sections/newsletter-signup.md)

***

#### Offers

Use offer sections to highlight discounts, special deals, or limited-time promotions and encourage customers to take action.

* [<mark style="color:$primary;">Call to action</mark>](/triumph/template/sections/call-to-action.md)
* [<mark style="color:$primary;">Countdown timer</mark>](/triumph/template/sections/countdown-timer.md)
* [<mark style="color:$primary;">Discount coupon</mark>](/triumph/template/sections/discount-coupon.md)

***

#### Products

Use product sections to feature specific items you want to promote, such as popular products or new releases.

* [<mark style="color:$primary;">Bundle products</mark>](/triumph/template/sections/bundle-products.md)
* [<mark style="color:$primary;">Featured collection</mark>](/triumph/template/sections/featured-collection.md)
* [<mark style="color:$primary;">Featured collection: Grid</mark>](/triumph/template/sections/featured-collection-grid.md)
* [<mark style="color:$primary;">Featured collection: Loop</mark>](/triumph/template/sections/featured-collection-loop.md)
* [<mark style="color:blue;">Featured collection: Tabs</mark>](/triumph/template/sections/featured-collection-tabs.md)
* [<mark style="color:$primary;">Featured product</mark>](/triumph/template/sections/featured-product.md)
* [<mark style="color:$primary;">Products collage</mark>](/triumph/template/sections/products-collage.md)
* [<mark style="color:$primary;">Products list with banner</mark>](/triumph/template/sections/product-list-with-banner.md)
* [<mark style="color:$primary;">Social shop feed</mark>](/triumph/template/sections/social-shop-feed.md)

***

#### Storytelling

Use storytelling sections to share your brand’s story, values, or mission.\
This helps create a stronger emotional connection with customers.

* [<mark style="color:$primary;">Image with text: Grid</mark>](/triumph/template/sections/image-with-text-grid.md)
* [<mark style="color:$primary;">Image with text: Tabs</mark>](/triumph/template/sections/image-with-text-tabs.md)
* [<mark style="color:$primary;">Map</mark>](/triumph/template/sections/map.md)
* [<mark style="color:$primary;">Media collage</mark>](/triumph/template/sections/media-collage.md)
* [<mark style="color:$primary;">Media gallery</mark>](/triumph/template/sections/media-gallery.md)
* [<mark style="color:$primary;">Media horizontal scroll</mark>](/triumph/template/sections/media-horizontal-scroll.md)
* [<mark style="color:$primary;">Media vertical scroll</mark>](/triumph/template/sections/media-vertical-scroll.md)
* [<mark style="color:$primary;">Reviews</mark>](/triumph/template/sections/reviews.md)
* [<mark style="color:$primary;">Scrolling logo</mark>](/triumph/template/sections/scrolling-logo.md)
* [<mark style="color:$primary;">Video</mark>](/triumph/template/sections/video.md)

***

#### Text

Use text sections for simple content, such as descriptions, announcements, or additional information, without heavy design elements.

* [<mark style="color:$primary;">Accordion</mark>](/triumph/template/sections/accordion.md)
* [<mark style="color:$primary;">Contact info</mark>](/triumph/template/sections/contact-info.md)
* [<mark style="color:$primary;">Icons with text</mark>](/triumph/template/sections/icons-with-text.md)
* [<mark style="color:$primary;">Page</mark>](/triumph/template/sections/page.md)
* [<mark style="color:$primary;">Rich text</mark>](/triumph/template/sections/rich-text.md)
* [<mark style="color:$primary;">Scrolling text</mark>](/triumph/template/sections/scrolling-text.md)
* [<mark style="color:$primary;">Tags</mark>](/triumph/template/sections/tags.md)

***

#### Vendors

Use vendor sections to highlight brands or suppliers you work with, helping customers discover products by brand.

* [<mark style="color:$primary;">Vendors list</mark>](/triumph/template/sections/vendors-list.md)