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

Block name field: Located at the very top of the panel. You can give this block your own custom name (e.g. "Campaign heading"). The name you give stands out in the layer list in the Component Pool; it helps you tell which is which when you have many blocks of the same type. If you leave the field empty, the block reverts to its default type name (the component type shows as a placeholder in the box). This name is for the editor only; it is never printed anywhere on the storefront. For details, see Component Pool (Right Panel).
Component type and description: Right below the block name field, shows which type of 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, which date range, to whom and in which language the component appears.
Dividers	A shape divider (wave, tilt, triangle) on the block's top/bottom edge.
Animation	The entry effect played when the block scrolls into view.
Advanced	Advanced settings like a link ID.

The Dividers and Animation tabs exist on every component (except the Header); Visibility is now on every component too. These are "general settings" — they are not component-specific.

Components you generate with AI have the same design settings. Even if you described the component yourself, the Background, Appearance (border, corner rounding, shadow, opacity), Layout (container width, padding, margin), Visibility and Advanced (link ID) tabs appear in the panel automatically — you don't need to regenerate the component. These settings apply to the component's outer frame; settings that belong inside the component (badge color, button color and so on) stay in the Content tab. In breakpoint mode you can also give mobile/tablet their own spacing or width.

In generated components, the title, subtitle and description each get their own style tab. When the AI puts a visible title, subtitle or description into a component, the panel also shows Title Style, Subtitle Style and Description Style tabs. They carry exactly the same settings as built-in blocks: font size (including a mobile size), weight, font family, line height, letter spacing, color (theme color / solid / gradient) and alignment. The text itself stays in the Content tab; you set its styling here.

In generated components you pick icons from the icon picker. If the component has an icon, the same searchable icon picker as built-in blocks opens and you can choose from the whole library. The icon you pick is embedded in the page's server output: visitors see it the moment the page opens, with nothing to load afterwards.

The Product content card is not a block setting. While editing a product's custom page, the Product Title, Short Description, SKU and Product Tags blocks show a dashed Product content card above the tabs. Those fields write to the product itself, not the block, and do not wait for a theme publish. See Per-Product Detail Page.

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. You don't type the address; you pick what to link to from the Link type list (see Link types). 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.). You reorder rows by dragging their handle and remove them with the trash icon.
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).

Your own AI-generated components can have a list field too. When you have a component generated that holds repeating content — questions and answers, feature lists, steps, pricing plans — the panel gives you a list field where you enter that content row by row, and the component arrives on the page pre-filled with sample rows. You can delete the samples and write your own content.

If a component can be fed both from your list and from the product's own data (for example the questions and answers on the product form), the rule is: if the list you entered has rows, it is shown; if you empty the list completely, it falls back to the product's own data. On pages other than the product page (home page, content pages) there is no product data, so only your list is shown; if that is empty too, the component's "empty state" text appears.

Gallery and action-button settings appear too. If you have a component generated for an image wall, a Gallery setting appears in the panel: you pick several images from your media library at once and reorder them by dragging. The gallery starts empty — the component cannot know the real images in your store, so it adds no samples; until you fill it, the component's "empty state" text is shown. For a component with an action button you get a link picker: instead of typing an address you choose from your store's products, categories, pages, blog posts, legal pages, pre-order products and forms, and you also set the button's Style (Solid, Secondary, Outlined, Ghost, Link, Warning).

The action button in your generated components has no icon or colour picker: in these components the button's look is part of the component's own design. To change it, open the Studio and use "Update with AI", describing what you want.

Link types

When you give a link to a button, a menu item, a footer link or a gallery image, the drawer that opens first asks for a Button name, then a Link type. You don't need to type an address — once you pick a type, a picker listing your store's real content appears below it and the address is built for you.

Link type	What does it link to?	What do you pick below it?
Page	Pages you created in the theme editor	Page list
Product	A product's detail page	Product picker (with search + filters)
Category	A category listing page	Category picker
Custom URL	Any address you type yourself (external sites included)	You type the address
Blog Post	A published blog post	Blog post list
Legal Page	Legal pages such as privacy or distance selling	Legal page list
Pre-Order	The detail page of a product that is open for pre-order	List of pre-order products
Form	A published form page	Form list

The Pre-Order link

The Pre-Order type takes visitors straight to the product whose campaign you are announcing. Clicking the button opens that product's detail page, where the pre-order box, delivery dates and pre-order price are shown. There is no separate "pre-order page" — pre-order lives on the product's own page.

Only products that are genuinely open for pre-order appear in the list: products whose Pre-Order card switch is on in the product form and whose end date has not passed. This stops you from linking to a closed campaign.

If the list is empty, the panel tells you "No products are open for pre-order." This is not an error: no product of yours has pre-order enabled yet. Open the product form and turn on the Pre-Order card switch, and the product will appear in this list. Details: SEO, Publishing, Pre-Order, Delivery, and Sales Channels.

The pre-order card exists only on a Simple Product. You cannot open a variant or bundle product for pre-order, so they do not appear in this list either.

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 tab has four kinds of condition: Devices, Time range, Audience and Language.

The device condition 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.

For time range (e.g. "Friday 00:00 - Monday 00:00"), audience (guest / signed-in / specific customer groups) and language conditions see Conditional Block Visibility (Time · Audience · Language).

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

Hiding is not the only option. Instead of removing a component from phones entirely, you can change its settings just for the phone (for example, only shrinking the font size). Use the device badge in the top right of the panel for that — see Device-Specific Settings (Desktop / Tablet / Mobile)

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.

Column Layout & Style

Right under the Column Management field there is a Column Layout & Style field. Here you open each column one by one and set:

Width — Only visible when you pick Custom (free width) in the Layout field. You give a number and a unit per column: %, px, fr or Auto. There are separate rows for desktop, tablet and mobile (when that device's Layout is Custom too). Example: giving two columns 60% and 40% sets up a "wide gallery + narrow buy box" layout.
- Percentages are proportional shares. Even when the total is not 100, columns are distributed by the ratio you gave; a line above the field shows the total. The column gap is reserved first and the remaining width is split by that ratio — so the page never overflows.
- px gives a fixed width; Auto sizes the column to its content.
Order — Where the column appears on screen. Given separately for desktop, tablet and mobile; 0 = natural order. This setting does not move blocks, it only changes the display order. The classic use: info left / gallery right on desktop, gallery first on phones.
Sticky column — When enabled, that column stays pinned on screen while the page scrolls. Offset from top sets how far below the top of the screen it sits, and From this size up sets which device it kicks in from. Ideal for a buy column next to a long gallery.
Vertical Align — Defaults to Inherit from grid; change it here when you want one column to differ from the grid's overall alignment.
Column Padding / Column Background / Column Border Radius — Applied to that column only. For example you can make one column look like a "card" with a light grey background and rounded corners.

This field does not follow device mode: you give the tablet/mobile values from the rows inside the field. (For details see Device-Specific Settings (Desktop / Tablet / Mobile))

If the grid has a background image, pattern or shader and you made a column sticky, the panel shows a note about it; sticky keeps working and the border radius is preserved too.

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.