> For the complete documentation index, see [llms.txt](https://docs-en.shoppy.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-en.shoppy.is/shoppy-dashboard/app-builder/layout.md). # Layout In this section, you can choose the style of your app. You can personalize the colors, logos, and images to construct an app that uniquely represents your brand. On the right, you can see a preview of how the app will appear. In this section you can customize the layouts of the main views of your Shoppy app. Watch the tutorial below to see how this can be done on your Shoppy Dashboard: {% embed url="" %} ### **Catalogue Layout** With this selector you can choose the layout of your app's catalogue view. You can choose between: * *Image Layout:* the collections are shown with their image as the main focal point, each listed under the other. * *List Layout:* collections are shown in a list with only their name. If there are sub-menus, they can be opened below with a drop-down menu. * *Mixed Layout:* the main collections are shown in a list with their name on the left and the collection image on the right. If there are sub-menus, they are displayed on a new page in a list with a slightly different layout, featuring the image on the left and the collection title on the right. ![](/files/hy25M3aR9OQ1sf0YeYLT) ### **Wishlist Layout** In this section you can choose the layout for the wishlist: ![](/files/ZxMOeIUiuEemWz0KUFP7) * *Grid Layout*: products are displayed in a grid. * *List Layout*: products are displayed in a list. ![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwSBhfivhVS4sx3aq5dPG%2Fuploads%2FM8Uz4D8KNM91pCaen7Q2%2Fwishlist.png?alt=media\&token=61125dcc-bb36-4730-b12a-d78e121ffb27) ### **Filter Layouts** In this section you can choose to show the filters in a modal or full-screen view: ![](/files/Xz6PNTZ0s1Mh4rtJC5AA) * *Modal Screen View*: the filters are shown to the users in a modal view that partially covers the view of the collections. * *Full-Screen View*: the filters are shown to users in a full-screen view. ![](/files/7vPPkTjwYhZBFozKyyvX) ### **Brand List Layout** You can choose how vendors are displayed on the Brand List page directly from the Layout section. * **1 Column** — brands are listed in a single vertical column. * **2 Columns** — brands are displayed in a two-column grid. To apply your preferred layout, navigate to the **Layout** section in the App Builder, scroll to the **Brand List Layout** option, select your preferred display mode and click **'Save'**. The change will be reflected in your app immediately. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs-en.shoppy.is/shoppy-dashboard/app-builder/layout.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.