Component Library (Left Panel)
The shelf that holds the ready-made building blocks (components) you can add to your page. You grab a component from here and drag it onto the canvas,…
Where to find: In the left panel of the Theme Editor, with the heading Components Who it's for: Everyone who wants to add a new section (banner, category boxes, FAQ, footer, etc.) to their page In short: The shelf that holds the ready-made building blocks (components) you can add to your page. You grab a component from here and drag it onto the canvas, or add it by clicking on it.
What does it do?
The Component Library in the left panel is the list of all the ready-made pieces you'll use while building your store. Each piece (component) is designed for a specific job: some are a large promotional banner, some show category tiles, some make a "Frequently Asked Questions" list. You select these ready-made pieces and place them on your page, then fill their insides with your own content.
At the top of the panel the heading says Components, and below it a small description says Click or drag — that is, it reminds you that there are two ways to add a component.
View mode: List / Gallery
In the top right corner of the panel there are two small buttons; they select how the components are listed:
| Button (icon) | Mode | How does it show? |
|---|---|---|
| List | List | Lists the components one under the other, as a small icon + name. More components are visible at a single glance. |
| Gallery | Gallery | Shows the components as larger boxes in two columns. It's more comfortable for visualizing what is what. |
The mode you choose is remembered; the next time you open it, it comes back in the same mode.
Tip: If you're just learning which component does what, Gallery mode is clearer. As you get to know the components, you can switch to List mode for faster scanning.
How are the components grouped? (Categories)
The components are divided into categories according to their function. Each category appears as an expandable-collapsible heading (accordion), and when the panel opens all of them are open. You can collapse one category by clicking on its heading to make room for the others.
The categories and what kind of components are inside them:
| Category | What's inside it? |
|---|---|
| Hero | The large, eye-catching promotional areas at the very top of the page (banner, video, cover image). |
| İçerik | Information sections such as text, Frequently Asked Questions, feature list, map. |
| Promosyon | Campaign/announcement bars and the countdown timer. |
| Kategori | Sections that show your store categories as tiles. |
| Güven | Badges that give the customer confidence (secure payment, fast shipping, etc.). |
| Medya | Image gallery, before/after comparison. |
| Düzen | Building blocks that divide the page into sections (columns, tabs, scrollable area, divider line, top menu). |
| E-Ticaret | The section that shows a product list. |
| Altbilgi | Page-end (footer) designs. |
You can find what each component does one by one and which settings it has in the Component Catalog (All Components) file.
Adding a component to the page — 2 methods
Method 1: Drag-and-drop
- Find the component you want to add in the left panel.
- Hold down on the component with your mouse and drag it toward the canvas in the middle.
- While dragging, a line/marker appears on the canvas showing where you'll drop it.
- When you reach the position you want, release the mouse. The component is added at that point.
Method 2: Clicking
- Click the component in the left panel.
- The component is added to the end of the page.
- Then you can change its order by grabbing it on the canvas and dragging it where you want (see Canvas and Preview).
After you add the component, click on it on the canvas; the Properties open in the right panel and you edit its content (text, image, color) (see Properties Panel (Right Panel)).
Tip: You can also drag a component into a container component like "Grid" (columns), "Tab", or "Carousel". This way you create side-by-side columns or tabbed areas. For details, see the "Container components" section in the Properties Panel (Right Panel) file.
A confusing point: Some components are "locked/structural"
Functional components such as the menu and footer inside the Header Structure and Footer Structure are special building blocks. These may look like a gray, lock-marked box on the canvas and cannot be moved/deleted freely like normal components. This is normal — they are the "skeleton" pieces of the store, and their settings are still made from the right panel.
Marketplace (coming soon)
In the future, a Marketplace (Marketplace) tab will also be added to the left panel: from there you'll be able to find additional components prepared by other designers and install them into your store. This feature is currently disabled, so if you don't see such a tab in the panel, that's normal. For now, the ready-made component library described above covers all your needs.
Frequently asked questions
Q: I can't find the component I'm looking for. A: First make sure you're looking in the right category (e.g. Hero for a promotional banner, Altbilgi for a footer). If the categories are collapsed, click the heading to open them. For a list of all components, you can look at the Component Catalog (All Components) file.
Q: I added a component but I can't see it on the canvas. A: If you added it with the clicking method, the component has been added to the very bottom of the page; scroll the canvas down. You can also list and check all the components on that page from the Component Pool (right panel).
Q: I added the wrong component, how do I delete it? A: You can delete it with the delete () button that appears when you hover over the component on the canvas, or from the Component Pool (see Component Pool (Right Panel)).
Pages and Structure
Here you manage which screens your store consists of. You select, create, edit, and delete pages; you also switch to the shared Header/Footer Structure…
Canvas and Preview
A live preview of your store. You select components from here, order them by dragging; you check them in different device views and in preview mode.