Component Library (Left Panel)

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.

---

Search box

Right under the heading there is a search box. The list narrows as you type; the search matches both component names and descriptions. Categories with matches open automatically, the rest are hidden. If nothing matches, it says "No matching blocks". The **** on the right clears the search and restores the full list.

The design variations of product page blocks are searchable too: type "mosaic" and Product Gallery → Mosaic comes up directly. Details: Product Page Template (Block-Based Product Page).

---

Design variations (product page blocks only)

Some blocks have a small button on the right showing the number of designs (e.g. 5 ). Click it and every design for that block opens as a small preview card; drag or click a card to add the block with that design. The block type stays the same — you can change the design later from the Properties panel, and your position/spacing/style settings are kept.

---

View mode: List / Gallery

In the top right corner of the panel there are two small buttons; they select how the components are listed:

The mode you choose is remembered; the next time you open it, it comes back in the same mode.

---

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:

While you edit the Product Page template, a Product Page category is added at the top of the list. Because it holds many blocks, it is split into sub-groups: Media & Breadcrumb · Product Identity · Purchase · Detail & Content · Social Proof · Recommendations · Combined (legacy). The sub-headings appear in both list and gallery view. See Product Page Template (Block-Based Product Page) for details.

The same happens on other page types too: whichever template you are editing, a category specific to that page is added at the top of the list, and the blocks in it can be used only on that page type. That is why you cannot see blocks such as Filter Panel or Order Summary in the list while editing the Home Page.

You can find what each component does one by one and which settings it has in the Component Catalog (All Components) file. That catalogue covers the general blocks; the settings of page-specific blocks live on the pages listed above.

---

Adding a component to the page — 2 methods

Method 1: Drag-and-drop

1. Find the component you want to add in the left panel.
2. Hold down on the component with your mouse and drag it toward the canvas in the middle.
3. While dragging, a line/marker appears on the canvas showing where you'll drop it.
4. When you reach the position you want, release the mouse. The component is added at that point.

Method 2: Clicking

1. Click the component in the left panel.
2. The component is added to the end of the page.
3. 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)).

---

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.

---

Community

The left panel also has a Community tab: there you can find components other merchants have shared and had approved, and install them into your store. Components you generated yourself are not listed in that tab — they appear in the Components tab. How to submit your own component to the community is explained in Sharing a Component with the Community. If you don't see this tab in your panel, the feature is not enabled on your account yet; the ready-made component library covers all the basics.

---

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)).