Component Catalog (All Components)

An introduction to each of the ready-made components you can add to your page, one by one. Here you'll find which building block is suitable for which job.

Where to find: The Components library in the left panel (split into categories) Who it's for: Those who wonder "Which component does what, and when should I use which one?" In short: An introduction to each of the ready-made components you can add to your page, one by one. Here you'll find which building block is suitable for which job.

How should this be read?

Components are split into categories. Below, each category is given as a table: the component's name (as it appears in the left panel) and what it does.

The common settings of each component (background, font, color, spacing, visibility, alignment, etc.) are explained in the Properties Panel (Right Panel) file. Here we focus on each component's own specific purpose. For how to add a component to the page, see the Component Library (Left Panel) file.

Tip: Components with "Hero" in their name are the large promotional areas at the top of the page — usually one is used per page. You can add the other components as many times as you need.

Hero — Top promotional areas

The large, first-to-catch-the-eye sections at the very top of the page. They usually contain a heading, a short description and one or two buttons.

Component	What does it do?
Hero Bento	1–4 images in a grid layout + heading and button area. For showing multiple images in an elegant mosaic.
Hero Bento Marquee	A scrolling 3-column image stack + heading and button area. A dynamic, moving intro.
Hero Centered	Centered heading, description and button; background image optional. Plain and striking.
Hero Floating	Central text + floating images on the sides (6 positions). An elegant, playful intro.
Hero Showcase	Text on the left + a fan-shaped arrangement of product cards on the right. Showcases the products you select in a window display (image, name, price come automatically from the product).
Hero Split	Text on the left + image or video on the right. The most classic and safe hero layout.
Hero Video	A full-screen video background + central text. The most eye-catching intro; a video plays in the back.

Tip: If you're not sure, start with Hero Split — it suits almost every sector and its content is clear.

Content — Information sections

Sections that give information to and tell the customer about something.

Component	What does it do?
Frequently Asked Questions	A question-answer list, in an expandable accordion structure. Reduces customer questions.
Features	A feature/advantage list with icon + heading + description (grid, timeline or icon row). Ideal for a "Why us?" narrative.
Features Zigzag	Shows text and image/video in turn in a zigzag layout. For introducing your brand in detail.
Text	Rich text content — heading, paragraph, list, link and formatting. For text-heavy pages like "About Us", "Shipping", "Privacy".
Map	A Google Maps map embed + contact information. If you have a physical store, it shows your address.

Promotion — Campaigns and announcements

Eye-catching campaign/announcement elements.

Component	What does it do?
Promotion Bar	A page-top announcement bar — campaign, shipping, discount notice. Optionally includes a badge and countdown; can be made closable.
Marquee Bar	A promotional announcement with automatically scrolling (left-right flowing) text. Each line becomes a separate scrolling element.
Countdown	A countdown timer to a target date (boxes, circles, inline, urgency bar, promotion styles). Emphasizes the end of a campaign.

Category — Category tiles

Shows your store categories to the customer; clicking goes to that category.

Component	What does it do?
Category Cards (Icon)	Lists categories in card format with an icon or initial letter.
Category Cards (Image)	Lists categories in card format with a background image/video.
Category Cards (Round)	Lists categories with a round image/video.

Tip: If you have nice category images, Image or Round cards look more attractive. If you don't have images, Icon cards give a clean look.

Trust — Trust badges

Component	What does it do?
Trust Badges	Reassuring badges with icon + heading (in a row, strip, bordered or card layout). E.g. "Secure Payment", "Fast Shipping", "Easy Returns".
Shipping & Returns Card	Explains shipping, return and warranty terms as icon cards. On the product page it can also show the estimated delivery day range from store settings.

Media — Image sections

Component	What does it do?
Style Gallery	A media gallery in different styles (grid, 3D tilt, hover effect, polaroid, filmstrip, lightbox, scrolling). Showcases your product/work images.
Before / After	Compares two images (before/after) with a draggable bar. For showing transformation/effect (e.g. renovation, maintenance, cosmetics).
Stories	Instagram-highlights style cover rings; tapping plays image and video frames full screen automatically. Frames can link to a product. Details: Stories Block.

You do not write the content; it comes automatically from the account you connect under Integrations → Social Media and is cached for 30 minutes. Without a key the block is not rendered on the storefront and shows sample content in the editor. Full guide: Social Feed Blocks: Instagram, YouTube, Google Reviews.

Component	What does it do?
Instagram Feed	Shows the latest posts of your Instagram account as a grid or horizontal scroller; image ratio, caption and profile link are configurable.
YouTube Feed	Lists the latest videos of your channel (or a playlist) with cover images; a privacy-friendly player opens on click.
Google Reviews	Shows your business's Google rating, review count and latest 5 reviews as cards.

Layout — Building blocks

The blocks that divide the page into sections and organize the other components.

Component	What does it do?
Grid Layout	A multi-column layout; you can place a separate component in each column. For side-by-side content (see Properties Panel (Right Panel) → Container components).
Tab Layout	A tabbed area; you can place a separate component in each tab. For grouping content with tabs.
Carousel	Left-right scrolling slides; you can place a separate component in each slide.
Style Divider	A horizontal divider line in different styles (solid, dotted, with text, with icon, gradient, wave, zigzag, thick bar). Visually separates sections.
Navbar	The store's top menu (navigation bar): layout, menu items, logo, search, cart and the mobile menu that opens on phones. Usually used in Header. Full guide: Navbar Ve Mobil Menu.en.

Tip: Grid, Tab and Carousel are "container" components — that is, you place other components inside them. With these you can set up two-column sections, tabbed content and scrolling showcases.

ℹWhen tab labels don't fit: In the horizontal layout the tab strip does not push the page sideways when the labels don't fit — the strip scrolls inside itself. Even with long tab names or many tabs, no horizontal scrollbar appears on the page; visitors reach the other tabs by scrolling the strip sideways. When the strip really does overflow, a soft fade appears at the scrollable edge, signalling that there are more tabs in that direction. If the strip fits, no indicator appears. This does not apply to the vertical layout, where tabs are stacked.

E-Commerce — Product list

Component	What does it do?
Product List	Lists products you select manually or automatically (e.g. newest, best sellers) (in grid, scrolling or carousel layout). For showing featured products on the home page.

The section at the very bottom of the page. Usually used in Footer and shown on all pages.

Component	What does it do?
Footer - Centered	A centered footer; navigation links and social media icons.
Footer - Classic	A 4-column classic footer; links split into categories.
Footer - Dark	A dark-themed footer; payment methods and brand description.
Footer - Minimal	A single-line plain footer.

Tip: If you'll have many links in the footer, Classic (4 columns) is the most organized. For a plain store, Minimal or Centered is enough.

Shared payment logo settings of the four footers

All four footer components have the same two settings in their Properties panel:

Setting	What does it do?
Show Payment Logos	Whether the payment provider logo band is rendered in this footer. Default is on.
Logo Set	Which provider's logo appears: Use theme setting (default), iyzico (Visa + Mastercard), PayTR or Hide.

While Use theme setting is selected, the Theme Settings → Checkout → Payment Logos setting applies. If you pick something else in a footer, that block overrides the store-wide setting.

The band's tone is chosen automatically from the background: the white version on a dark background, the colour version on a light one — Footer - Dark always uses the white version.

Tip: For the iyzico application you need the logos on before the integration is connected. The full order: Connecting iyzico to Your Store.

Frequently asked questions

Q: Can I add the same component more than once? A: Yes. For example, you can add several Features or Product List components to different parts of the page. (The only exception: it's usually visually better to use one Hero section per page.)

Q: I can't decide which component to put where. A: A typical home page is ordered like this: a Hero at the very top, then Category Cards, then Product List, Features, Trust Badges and Frequently Asked Questions at the bottom. The top menu and footer come from the Header/Footer.

Q: Can I also put the "Navbar" and "Footer" components on a normal page? A: Although it's technically possible, since these automatically appear on all pages when managed in the Header and Footer, it's recommended to use them there. That way you manage the menu/footer from one place.