Customize Shop Design & Layouts
Give your shop a personal touch. Choose from professional themes and configure the homepage, brand colors, and header/footer in the visual live editor.
The Design Pillars of Your Pixalo Shop
Theme Selection (Global Design Template)
Before you get into the fine-tuning, define the basic design of your shop in the General Settings. Scroll down in the "General" tab to the "Theme Selection" area:
Selectable Themes:
- Pixalo Modern Theme: A contemporary, airy design with organic SVG wave forms, large image heroes, and a dynamic product presentation.
- Pixalo Base: A classic-structured, minimalist design that directs focus entirely to your photos.
- Click on your desired theme and then click Save Settings at the bottom right. The shop will reload briefly to apply the styles directly.
Visual Editor (Design & Layout)
Click on Design in the main navigation. Here you manage the various layout components of your shop, divided into four intuitive tabs:
1. Homepage (Modular Page Builder)
Your shop's homepage is modular. In the Page Builder, you manage the so-called Page Sections:
- Add Section: Add new grids (e.g., hero banners, pricing cards, gallery previews, or text sections).
- Adjust Order (Drag & Drop): Move sections up or down to control the structure of the landing page.
- Edit Content: Each section has its own fields (headline, subtitle, background image, button links) that you fill in directly in the web interface.
Detailed Section Properties (Example: Homepage Banner / Hero Banner)
As soon as you select a section entry in the left area (marked in the image as Homepage Banner / Online Photo Gallery), the detailed editing menu for this element opens in the main area:
Structure and Configuration Options:
- Title Input: Change the main text live (e.g.
Online Photo Gallery). - Desktop Size: Adjust the font size continuously using the slider (e.g.
70px). - Mobile Size: Determine the optimized font size for smartphones (e.g.
41px). - Line Height: Change the vertical spacing for multi-line text (e.g.
1.1). - Font & Weight: Choose the font family (e.g.
Playfair Display) and weight (e.g.400 - Regular). - Text Style: Formatting buttons for italic (I), underline (U), and strikethrough (S).
- Subtitle Input: A second text block for explanatory sentences or call-to-actions.
- Independent Sizing: Individual size sliders for desktop (e.g.
18px) and mobile devices (e.g.14px). - Line Height & Typography: Use separate font families (e.g.
Inter) and weights for the subtitle.
2. Colors & Text (CI Adaptation)
Match the shop colors with your studio branding. In the colors tab you control the main color palette:
- Primary Color: Controls the accent color for primary interaction buttons, active links, and color highlights.
- Secondary Color & Contrasts: Used for visual separation of background grids and secondary function areas.
- Background Colors: Customize the base background (light vs. slightly darkened contrasts).
3. Header (Shop Header)
In the header tab, you configure the top navigation bar of your shop:
- Logo Scaling: Adjust the maximum width of your logo in the header continuously.
- Sticky Header: Choose whether the navigation bar remains permanently fixed at the top of the screen when scrolling.
- Header Menu Link: Link the header menu previously configured under "Pages & Menus" here.
4. Footer (Shop Footer)
In the footer tab, you control the closing section of your online shop:
- Copyright & Footnote Text: Enter copyright notices and brief descriptions of your studio.
- Social Links: Embed your profiles from Instagram, Facebook, or Pinterest as icon links.
- Footer Menu: Link your T&C, legal notice, and privacy policy prepared under "Legal" here.
Real-Time Preview
All adjustments you make in the visual editor under the four tabs are immediately applied in real time to your live shop after saving. It is best to test the result on your smartphone in parallel!
Shop Setup Completed!
Congratulations! You have now set up all important settings, products, content pages, and design layouts. Your online shop is fully operational.
Back to Documentation Overview