> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.courses-plus.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# My courses page layouts

**My Courses page** can be displayed in different layout styles, allowing you to choose the look and structure that best match your brand and learning experience. 

My Courses page supports different layout styles, allowing the overall look and structure to be aligned with your brand and learning experience.
Layout variations are available as custom implementations and if you’d like to use any of these layouts, please [contact us](https://courses-plus.com/pages/about-us) to discuss implementation options.

Below is a brief overview of alternative design options we can apply to your My Courses page. You can check demo sites for each available option: 

| Use password `1` to access the demo stores.

### [Design #1 — classic course list](https://courses-design-1.myshopify.com/apps/my/courses/list)

Straightforward vertical list with clear titles and actions. Best for simplicity and readability.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/e/a/3aea62344d5c9200/screens_5065yp.png =1900x1068)

[View demo store](https://courses-design-1.myshopify.com/apps/my/courses/list) (store password: 1)

---

### [Design #2 — cards with progress](https://courses-design-2.myshopify.com/apps/my/courses/list)

Card layout that highlights progress and “continue” actions, making it easy to resume learning.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/e/a/3aea62344d5c9200/screens-1_1bo54lt.png =1900x1068)

[View demo store](https://courses-design-2.myshopify.com/apps/my/courses/list) (store password: 1)

---

### [Design #3 — compact grid](https://courses-design-3.myshopify.com/apps/my/courses/list)

Tighter grid layout that shows more courses on one screen and reduces scrolling.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/e/a/3aea62344d5c9200/screens-2_oh7j0d.png =1900x1068)

[View demo store](https://courses-design-3.myshopify.com/apps/my/courses/list) (store password: 1)

---

### [Design #4 — visual and image-focused](https://courses-design-4.myshopify.com/apps/my/courses/list)

Large thumbnails with stronger visual emphasis — good when course covers matter.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/e/a/3aea62344d5c9200/screens-3_eexded.png =1900x1068)

[View demo store](https://courses-design-4.myshopify.com/apps/my/courses/list) (store password: 1)

---

### [Design #5 — minimalist](https://courses-design-5.myshopify.com/apps/my/courses/list)

Clean layout with fewer elements, works great on mobile and small screens.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/e/a/3aea62344d5c9200/screens-4_1g039zf.png =1900x1068)

[View demo store](https://courses-design-5.myshopify.com/apps/my/courses/list) (store password: 1)

---

### [Design #6 — detailed cards](https://courses-design-6.myshopify.com/apps/my/courses/list)

Larger cards with more structure, giving extra context without clutter.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/e/a/3aea62344d5c9200/screens-5_mmx08d.png =1900x1068)

[View demo store](https://courses-design-6.myshopify.com/apps/my/courses/list) (store password: 1)

---

In this section:

* [My courses page](https://help.courses-plus.com/en/article/my-courses-page-11gv2fx/)
* [Course completion page and recommended courses](https://help.courses-plus.com/en/article/course-completion-page-and-recommended-courses-12m4bux/)