Properties Panel (Right Panel)

You edit all the settings of the component you selected here. The settings are divided at the top into tabs (Content, Appearance, Spacing, etc.); each…

Where to find: In the right panel of the Theme Editor, opens when you click on a component (with the heading Properties) Who it's for: Everyone who wants to set the text, color, image, spacing — in short, the appearance — of a component they added In short: You edit all the settings of the component you selected here. The settings are divided at the top into tabs (Content, Appearance, Spacing, etc.); each tab has controls specific to that job.

What does it do?

Adding a component to the page is half the story; you do the actual customization in the Properties Panel. When you click on a component on the canvas, the right panel switches to this mode and all the settings belonging to that component appear here: its title, description, images, colors, margins, which device it will appear on, and more.

When no component is selected, the panel is empty and says Select a component to edit. When you select a component from the canvas (or from the Component Pool), it fills in.

The top part of the panel

Component name and description: Shows which component you're editing (e.g. "Hero Split — Left text + right image or video").
Parent Component button: If you're editing a component inside a container (Grid, Tab, Carousel), pressing this button takes you up one level (to the container itself). Handy for not getting lost while working nested.

Setting tabs (groups)

Because a component can have many settings, they are grouped into tabs at the top of the panel. It varies from component to component, but the most commonly seen groups are:

Tab	What's inside it?
Content	Text, images, links, list items — that is, "what the component says".
Appearance	Colors, font, background, border, shadow — that is, "how it looks".
Size & Spacing (or Spacing)	Inner/outer spacing, corner rounding, width.
Behavior	Animated settings like hover effect, automatic scroll.
Visibility	Which devices it will appear on.
Advanced	Advanced settings like a link ID.

If a component has only a single group, the tabs don't appear and all settings are listed one under the other.

Tip: If you can't find a setting, make sure you're looking at the right tab. For example, you look for the "text color" in Appearance and the "text itself" in Content.

Setting types you'll encounter often

Below we explain the types of controls you'll see in the panel and what they do. Some of these are present in each component.

Content (text, image, link) settings

Control	What does it do?
Text / text box	The areas where you type texts like a title or description. Some have AI help next to them (Write with AI) (see Artificial Intelligence (AI) Tools).
Rich text editor	An advanced text area where you can do formatting like bold, italic, headings, lists, links.
Image / Select Media	You select an image or video from your store gallery. There are Change and Remove buttons. If you selected a video, Autoplay / Muted / Loop / Controls switches appear.
Gallery	You add multiple images; change their order by dragging, and if you want, give each a link.
Link	The address a button or element will go to when clicked. There's an Opens in a new tab / Opens in the same tab option.
Button setting	A button's text, address, Style (Filled, Secondary, Outlined, Ghost, Link, Warning), color, icon, and icon position (Left/Right).
List / adding items	You add items one by one to lists like "Features", "Questions" (Add Element, Add Question, etc.).
Product / Category selector	The window where you select the products or categories to be shown in a list. Multiple selection is made; it shows like {number} products selected.
Icon selector	You select an icon. Some have an Suggest with AI button that suggests a suitable icon based on the text.
Date/time selector	In components like a countdown, you select the target date (day + hour:minute:second).

Appearance (style) settings

Control	What does it do?
Background	Sets the component's background. It has tabs: Color, Gradient (color transition), Image, Media (image/video), Pattern, and Shader (animated, effect background).
Typography	Text settings: Size, Weight (Normal/Medium/Semi Bold/Bold), Font (Sans Serif/Serif/Monospace/Custom), Tag (Heading 1-6 / Paragraph), Line Height, Letter Spacing.
Color	You select a solid color. There's a Transparent option and ready-made Variables (theme colors: Primary, Secondary, Accent, etc.).
Border	Frame: Thickness, Style (Solid/Dashed/Dotted/Double/None), Color.
Corner Rounding	How rounded the corners will be (each corner can be set separately).
Shadow	Ready-made shadows (None/Small/Medium/Large/Extra Large/Theme Shadow) or Custom (horizontal/vertical/blur/spread/color).

Size, spacing, and alignment

Control	What does it do?
Padding / Margin	The spacing inside and outside the component. Top / Right / Bottom / Left are set separately. With the link button in the middle, you select Linked (all the same) or Separate (each edge different).
Container	The horizontal width of the component: Small/Medium/Large/Extra Large/Full/Custom and its alignment (Left/Center/Right).
Alignment	Text alignment: Left / Center / Right / Justify.
Opacity	The transparency of the component (0% invisible — 100% fully visible).
Hover Effect	A grow/fade effect when the mouse hovers over it. Enable, Scale, Opacity, Transition Duration settings.

Visibility

The Visibility control determines on which devices the component will be hidden:

Hide on Mobile — This component does not appear on phones.
Hide on Tablet — Does not appear on tablets.
Hide on Desktop — Does not appear on computers.

Tip: You might want to hide a very large promotional banner on a phone and show a simple title in its place instead. For this, you give the large banner "Hide on Mobile" and the simple title "Hide on Desktop".

Advanced — Link ID

The Link ID (Custom ID) gives the component a unique identity (e.g. iletisim). This way you can set up a link on a button within the page like "go to this section". It's an advanced feature; if you're not sure, you can leave it blank.

Container components: Grid, Tab, and Carousel

Some components are containers into which you can put other components. These let you set up more complex layouts:

Grid (Columns)

Divides the page into side-by-side columns; you put a separate component in each column.

Select the Grid; in the right panel you see the Column 1, Column 2... headings.
Open a column heading and press the Add Component button inside it.
There are two tabs in the window that opens:
- Add New — Adds a brand new component from scratch (you select from a list).
- Move Existing — Moves another component on the page into this column.
For each column, with the Mobile / Tablet / Desktop switches you can set separately on which device that column will appear.
You can order the components inside a column by dragging.

Tab (Tabs)

Shows content in a tabbed area (the content changes as the customer clicks the tabs).

Select the Tab component; you see the Tab 1, Tab 2... headings.
You open a new tab with Add Tab.
You edit each tab's name (with the pencil icon), and if you want, you add an Icon.
You put content inside each tab with Add Component (again Add New / Move Existing).
To delete a tab, you use the Delete Tab icon.

Carousel (Sliding Slides)

Shows content as slides that scroll left and right.

Select the Carousel; you see the Slide 1, Slide 2... headings.
You open a new slide with Add Slide.
You put content inside each slide with Add Component.
To delete a slide, you use the Delete Slide icon.

Tip: While editing a component inside a container, you can return to the container itself with the Parent Component button at the top of the panel.

Special settings for the Header Structure (menu) and Footer Structure (footer)

The Header component is the most complex piece of your store. You select from among ready-made layouts, then place the logo / menu / search / cart / profile blocks into the left-center-right areas. In the Menu items section:

You add a menu item manually with Add Custom Link.
You move your store categories into the menu with Add from Category.
You add all top categories to the menu at once with Auto-create from Categories.
You can choose a Dropdown Menu Style (Simple List, Columns, Mega Grid, Card Grid, Icon List, etc.) for each item.
You can add sub-items (submenus) and have icons suggested automatically for all of them with Suggest Icons for All with AI.

In footer components you manage columns and the links in each column:

You add a link manually with Add Link.
With Auto-add from existing data (magic wand) you add links in bulk from your Categories, Pages, Legal Pages, Blog, or Forms list.
With Add Social Link you add social media links like Instagram, Facebook (you select the platform, enter the URL).

Frequently asked questions

Q: The right panel is empty, it says "Select a component to edit". A: You haven't selected a component yet. Click on a section on the canvas or select a component from the Component Pool; the panel will fill in.

Q: When selecting a color, something called "Variables" appears, what are these? A: These are your store's theme colors (Primary, Secondary, Accent, etc.). If you select a theme color instead of a fixed color, when you later change your palette from Theme Settings, this component automatically adapts too. Using theme colors is recommended for a consistent look.

Q: Can I take a component I put inside a Grid back out? A: Yes. You can grab the component from the grid column and drag it out on the canvas (into the page's body); or you can move it from the Component Pool.

Q: I changed a setting but nothing happened. A: Some settings only take effect under certain conditions (for example "Overlay Color" only when "Overlay" is on). Also make sure the change appears in the right device view (mobile/desktop). If the change appeared on the canvas, you're on the right track; for it to appear on the store, Publish is needed.