دليل ثيم بلّورا

Bellora Theme Documentation

Bellora is a Salla theme with a modern glass visual system, flexible merchant sections, dark mode, responsive layouts, and optional 3D presentation. 3D is an enhancement, not a requirement: normal product and banner images remain the baseline experience.

Quick start

1. Activate Bellora on your Salla store.
2. Open Theme Customization.
3. Set glass intensity, animation, content width, corners and spacing.
4. Configure the header and optional announcement bar.
5. Add and reorder homepage sections; normally choose one primary hero.
6. Review desktop, mobile, light/dark modes, links and product states before publishing.

Bellora design settings

• Glass intensity: Subtle, Medium, Immersive.
• Animation intensity: Off, Subtle, Full.
• Reduced effects: disables blur, non-essential motion and 3D for visitors.
• WebGL: master switch for 3D features.
• Liquid transitions: liquid movement on supported hero media; disable for standard Salla transitions.
• Container width: Standard 1280px, Wide 1536px, Full width.
• Corner style: Sharp, Soft, Rounded.
• Spacing: Compact, Comfortable, Spacious.
• Default dark mode: starts first visits in dark mode while preserving visitor switching.

Header and navigation

Bellora supports a sticky header, a transparent-at-the-top header, an optional announcement bar and link, important-page links, and a More menu for overflow navigation. Mobile navigation adapts these links to smaller screens.

Dark mode

You can make dark mode the default for a visitor’s first visit; visitors can still switch mode and their browser remembers the choice. Check logos, banners and text embedded inside images in both modes.

Homepage sections

Current Bellora merchant components include the 3D Hero Slider, Classic Hero Slider, Glass Quick Links, Products Slider with Feature Banner, Square Glass Banners, Brands Showcase, authored Customer Testimonials, live Salla Store Reviews, Store Features, Flash Deals with Countdown, Video Spotlight, Latest Products, Blog Articles, Fixed Banner, Featured Products with three layouts, YouTube, Photos Slider, Products Slider, Products Grid, Parallax Background and Square Photos.

3D Hero Slider

Each slide can have a desktop image (recommended 1600×1000), separate mobile image (800×1200), multilingual title and description, CTA text and destination, and an optional direct GLB/GLTF model URL.

CTA destinations support a product, products by tag, category, brand, info page, article, blog category, offers, brands page, blog, or external URL.

3D products and WebGL

WebGL is the master 3D switch. Product pages use supported 3D media attached to products in Salla, while the supported homepage hero accepts an optional direct model URL. Keep normal images as the fallback. For merchant-hosted model URLs, use a direct HTTPS URL from a host that permits browser access, and optimize model size.

Product page

Merchant controls include product and product-list breadcrumbs, gallery fit (Contain/Cover), image zoom, image-based options, product 3D when available, tags, enhanced add-to-cart notification, notify-when-available behavior, and sticky mobile purchase controls.

Product cards and promotions

Bellora reflects Salla product data for pricing, discounts, availability and sold-out states. Tags/badges and notify-when-available behavior depend on your theme settings and product data.

Preparing images

Use the dimensions shown in each component’s settings. Key recommendations include 1600×1000 desktop and 800×1200 mobile for the 3D hero, 900×600 for the Classic Hero, 640×427 for Square Glass Banners, 1200×300 for Fixed Banner, 640×360 blog images, 1200×300 Photos Slider, 1400×500 Parallax and 400×400 Square Photos.

Contain shows the whole image and may leave unused space. Cover fills the frame and may crop edges. Keep important text and subjects away from banner edges.

Performance recommendations

• Use appropriately sized, optimized images.
• Avoid stacking multiple heavy hero sections.
• Use Reduced Effects for very large catalogs or weaker devices.
• Disable WebGL when you do not use 3D.
• Keep 3D models optimized and use them where they add real value.

Suggested store presets

Electronics: Medium glass, Subtle/Full animation, WebGL when needed, Wide container, Comfortable spacing. Premium: Immersive glass, Subtle/Full animation, Wide container, Soft/Rounded corners, Spacious spacing. General retail: Medium glass, Subtle animation, Standard container, Comfortable spacing. Large catalog/performance: Subtle glass, Subtle/Off animation, Reduced Effects, WebGL off unless required, Compact/Comfortable spacing.

Troubleshooting

3D does not appear

Check that WebGL is enabled, Reduced Effects is off, the URL is a direct HTTPS GLB/GLTF file, and test another browser/device.

Hero image is cropped

Use a dedicated mobile image where available, keep important content in a safe central area, and remember that Cover intentionally crops edges.

CTA is missing or opens the wrong destination

Set both CTA text and its Salla destination, save, and preview again.

Variant image is not switching

Review the option values and their image assignments in your Salla product configuration.

Store feels too animated

Lower Animation Intensity or enable Reduced Effects. Disable WebGL if 3D is unused.

Flash countdown is missing

Enable the countdown and set an expiry date; without an expiry date the timer is hidden.

FAQ

Support

screenprotectiontv@gmail.com

For faster diagnosis, include your store URL, a clear screenshot, device/browser information, and the exact steps that reproduce the issue.