Welcome to Valora Theme
This guide will help you customize your store's look and feel. No coding knowledge required! Each section below explains how to configure different parts of your theme using the built-in theme editor.
đ How to Use This Guide
- Open your theme editor/customization panel
- Find the section you want to customize
- Refer to this guide for what each setting does
- Make your changes and save
- Preview your changes before publishing
đ Common Settings
Most sections share these settings:
- Background: Choose colors or gradients for section backgrounds
- Text Styling: Adjust font, size, color, bold, or italic
- Show/Hide: Toggle elements on or off
- Mobile Responsive: Everything works on phones and tablets automatically
đ Header
The top navigation bar with logo, menu, search, and account/cart.
Content Settings
đ Mega Menu
Type: DECK (Repeatable cards, max 50)
Create dropdown menu items with various templates and promotional content.
Each menu item has:
- Menu Title: (INPUTBOX) The clickable menu label
- Menu Template: (SELECTBOX) Choose display style:
- âĸ columns: Multi-column layout
- âĸ simple: Single column list
- Promo Title 1: (INPUTBOX) Title for first promotional card
- Promo Image 1: (IMAGE) Visual for first promotional card
- Promo Button 1: (BUTTON) Call-to-action link for first promo
- Promo Title 2: (INPUTBOX) Title for second promotional card
- Promo Image 2: (IMAGE) Visual for second promotional card
- Promo Button 2: (BUTTON) Call-to-action link for second promo
âšī¸ Mega Menu Info
Type: INFO - Helpful information about configuring the mega menu in the store admin
đĸ Announcements
Type: DECK (Repeatable, max 5)
Rotating announcement messages displayed in the header.
- Text: (INPUTBOX) Announcement message
- Link: (BUTTON) Optional link for the announcement
âąī¸ Announcements Autoplay
- Autoplay: (TOGGLE) Auto-rotate through announcements (default: ON)
đ Additional Resources
- Theme Contact: (INFO) Link to contact Infinite Apps for support
- Currency Switch Info: (INFO) Information about the Infinite Apps Currency Switch app
Design Settings
đī¸ Feature Toggles
- Sticky Header: (TOGGLE) Keep header visible when scrolling (default: ON)
- Show Top Bar: (TOGGLE) Display top announcement bar (default: ON)
- Top Bar Currency Switch: (TOGGLE) Show currency selector (default: ON)
- Show Search Bar: (TOGGLE) Display search functionality (default: ON)
- Mobile Bottom Bar: (TOGGLE) Show fixed navigation on mobile (default: ON)
- Find Store Button: (TOGGLE) Display store locator button (default: ON)
- Account Button: (TOGGLE) Show account/login button (default: ON)
đ¨ Colors & Backgrounds
- Top Bar Background: (BACKGROUND) Color or gradient for top bar (default: #1d349a)
- Top Bar Text: (TEXT) Font, size, color, bold, italic settings (default: 14px, white, italic)
- Menu Promo Background: (BACKGROUND) Background for mega menu promo cards (default: #e8d5b5)
- Header Background: (BACKGROUND) Main header background (default: white)
đī¸ Hero Slider
Full-width rotating carousel supporting images and videos.
Content Settings
đŧī¸ Slides
Type: DECK (Repeatable, max 10)
Each slide contains:
- Asset Type: (SELECTBOX) Choose "image" or "video"
- Image: (IMAGE) Background image (used when asset type is "image")
- Video ID: (INPUTBOX) YouTube/Vimeo video ID (used when asset type is "video")
- Title: (INPUTBOX) Main headline
- Text: (TEXTAREA) Supporting text
- Link: (BUTTON) Call-to-action with link
âąī¸ Autoplay Settings
- Autoplay: (TOGGLE) Auto-advance slides (default: ON)
- Autoplay Interval: (INPUTBOX) Time between slides in milliseconds (e.g., "3000" for 3 seconds)
Design Settings
đ¨ Styling
- Image Title: (TEXT) Font, size (20-80px), color, bold/italic (default: bold, white)
- Image Text: (TEXT) Font, size (12-32px), color, bold/italic (default: white)
- Image Link: (BUTTON) Appearance, shape, color (default: OUTLINE, RECTANGLE, white)
- Background: (BACKGROUND) Section background
đ¯ Hero
Split-layout hero section with up to 2 slides, each with a subtitle, title, image, and button.
Content Settings
đŧī¸ Hero Slides
Type: DECK (Repeatable, max 2)
Each slide contains:
- Subtitle: (INPUTBOX) Small label above the title
- Title: (INPUTBOX) Main headline
- Image: (IMAGE) Slide background or feature image
- Button: (BUTTON) Call-to-action with link
Design Settings
đ¨ Typography & Colors
- Slide Subtitle: (TEXT) Font, size (10-20px), color, bold/italic
- Slide Title: (TEXT) Font, size (24-60px), color, bold/italic (default: italic)
- Slide Button: (BUTTON) Appearance, shape, color (default: OUTLINE, RECTANGLE, white)
đ¨ Hero Mosaic
Dynamic mosaic layout with swiper slider and tile layouts.
Content Settings
đŧī¸ Slider
Type: DECK (Repeatable)
Each slide contains:
- Image: (IMAGE) Background image
- Title: (INPUTBOX) Slide title
- Text: (TEXTAREA) Slide description
- Link: (BUTTON) Call-to-action button
đ´ Tiles
Type: DECK (Repeatable)
Each tile contains:
- Image: (IMAGE) Tile image
- Title: (INPUTBOX) Tile title
- Text: (TEXTAREA) Tile description
- Link: (BUTTON) Tile link
âī¸ Settings
- Autoplay: (TOGGLE) Auto-advance slider
- Layout: (LAYOUT) Choose tile arrangement (default, single, quad)
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Image Title: (TEXT) Font, size, color, bold/italic
- Image Text: (TEXT) Font, size, color, bold/italic
- Background: (BACKGROUND) Section background
đ Blog
Display blog posts with images, titles, excerpts, and links.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading
đ° Blog Posts
Type: DECK (Repeatable, max 6)
Each post contains:
- Image: (IMAGE) Post featured image
- Title: (INPUTBOX) Post title
- Excerpt: (TEXTAREA) Short post summary
- Link: (BUTTON) Read more button
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Section Title: (TEXT) Font, size (20-60px), color, bold/italic
- Post Title: (TEXT) Font, size (16-30px), color, bold/italic
- Excerpt: (TEXT) Font, size (12-16px), color, bold/italic
- Background: (BACKGROUND) Section background
â FAQ
Frequently asked questions with expandable answers.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading
- Section Description: (TEXTAREA) Supporting text below the title
â Questions
Type: DECK (Repeatable)
Each FAQ item contains:
- Question: (INPUTBOX) The question text
- Answer: (TEXTAREA) The answer text
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Section Title: (TEXT) Font, size (18-60px), color, bold/italic
- Section Description: (TEXT) Font, size (12-20px), color, bold/italic (default: italic)
- Background: (BACKGROUND) Section background
â Featured Product
Showcase a single product with details and purchase options.
Content Settings
đī¸ Product & Labels
- Product Selector: (PRODUCT_SELECTOR) Choose 1 product to feature
- View Details Button Text: (INPUTBOX) Label for the view details button
- Add to Cart Button: (BUTTON) Add to cart call-to-action
- In Stock Text: (INPUTBOX) Label shown when product is available (e.g., "In Stock")
- Rating Count: (INPUTBOX) Number of ratings to display
Design Settings
đī¸ Display Options
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Show Ratings: (TOGGLE) Display product ratings (default: ON)
- Show In Stock: (TOGGLE) Display stock status (default: ON)
- Show Sizes: (TOGGLE) Display size options (default: ON)
- Show Colors: (TOGGLE) Display color options (default: ON)
- Add to Cart Button: (BUTTON) Appearance, shape, color (default: OUTLINE, RECTANGLE)
- Background: (BACKGROUND) Section background
đ Featured Products
Promotional section combining editorial content (title, text, image) with a product grid. Supports left/right image layout.
Content Settings
đ Editorial Content
- Title: (INPUTBOX) Main heading
- Subtitle: (INPUTBOX) Secondary heading
- Text: (TEXTAREA) Supporting description
- Button: (BUTTON) Call-to-action with link
- Image: (IMAGE) Editorial/promo image
đī¸ Products
- Product Selector: (PRODUCT_SELECTOR) Choose up to 4 products to display
đ Layout
- Layout: (LAYOUT) Image position â "left_image" or "right_image"
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Title: (TEXT) Font, size (20-60px), color, bold/italic (default: bold, white)
- Subtitle: (TEXT) Font, size (12-20px), color, bold/italic (default: bold, white)
- Text: (TEXT) Font, size (12-20px), color, bold/italic (default: white)
- Button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Background: (BACKGROUND) Section background
đ¯ Interactive
Interactive image with hotspots to highlight product features or details.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading
- Section Subtitle: (INPUTBOX) Secondary heading
- Section Description: (TEXTAREA) Supporting text
đŧī¸ Image
- Section Image: (IMAGE) Main interactive image
đ Hotspots
Type: DECK (Repeatable, max 20)
Each hotspot contains:
- Hotspot Title: (INPUTBOX) Hotspot label
- Hotspot Description: (TEXTAREA) Detailed information
- Hotspot Position X: (INPUTBOX) Horizontal position (percentage, e.g., "30")
- Hotspot Position Y: (INPUTBOX) Vertical position (percentage, e.g., "50")
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Fullscreen: (TOGGLE) Display image in fullscreen mode (default: OFF)
- Section Title: (TEXT) Font, size, color, bold/italic, visibility
- Section Subtitle: (TEXT) Font, size, color, bold/italic, visibility
- Section Description: (TEXT) Font, size, color, bold/italic, visibility
- Section Image: (IMAGE) Overlay style and color
- Background: (BACKGROUND) Section background
đ´ Promo Cards
Image-based promotional cards with hover effects.
Content Settings
đ´ Cards
Type: DECK (Repeatable, max 4)
Each card contains:
- Image: (IMAGE) Card background image
- Title: (INPUTBOX) Card headline
- Description: (TEXTAREA) Card text
- Button: (BUTTON) Call-to-action with link
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Title: (TEXT) Font, size (18-48px), color, bold/italic (default: bold, white)
- Description: (TEXT) Font, size (12-22px), color, bold/italic (default: white)
- Button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Background: (BACKGROUND) Section background
đ Collections
Showcase product collections with images and featured products.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading
- Section Description: (TEXTAREA) Supporting text
đ Collection Cards
Type: DECK (Repeatable, max 8)
Each collection contains:
- Image: (IMAGE) Collection banner image
- Title: (INPUTBOX) Collection name
- Button: (BUTTON) Link to full collection
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Section Title: (TEXT) Font, size (18-60px), color, bold/italic
- Section Description: (TEXT) Font, size (12-20px), color, bold/italic
- Collection Title: (TEXT) Font, size (18-60px), color, bold/italic
- Button: (BUTTON) Appearance, shape, color (default: OUTLINE, PILL)
- Background: (BACKGROUND) Section background
⥠Flash Sale
Full-width promotional banner with background image, headline, description, and an end date display.
Content Settings
đŧī¸ Media & Actions
- Section Image: (IMAGE) Background image for the banner
- Section Button: (BUTTON) Call-to-action with link
đ Text Content
- Limited Offer: (INPUTBOX) Small label badge (e.g., "LIMITED OFFER")
- Title: (INPUTBOX) Main headline
- Description: (TEXTAREA) Sale details
- Until Date: (INPUTBOX) End date text to display (e.g., "Ends December 31")
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Limited Offer: (TEXT) Font, size (10-24px), color, bold/italic (default: bold)
- Title: (TEXT) Font, size (18-60px), color, bold/italic (default: bold, white)
- Description: (TEXT) Font, size (12-30px), color, bold/italic (default: white)
- Until Date: (TEXT) Font, size (18-60px), color, bold/italic (default: bold, white)
- Button: (BUTTON) Appearance, shape, color (default: OUTLINE)
- Background: (BACKGROUND) Section background
đĄ Get Inspired
Looking to create engaging, interactive content for your store? Check out the Interactive Section!
đ What is the Interactive Section?
The Interactive section lets you add clickable hotspots to images, perfect for:
- Showcasing product features and specifications
- Creating "shop the look" lifestyle imagery
- Highlighting details in complex products
- Building engaging storytelling experiences
đˇī¸ Top Categories
Display product categories in a grid with images and labels.
Content Settings
đ Header & Categories
- Section Title: (INPUTBOX) Main heading
- Section Description: (TEXTAREA) Supporting text
- Category Selector: (CATEGORY_SELECTOR) Choose up to 32 categories from your store
Note: Category images and names are pulled automatically from your store's category settings.
đ Layout
- Layout: (LAYOUT) Grid arrangement â layout_1, layout_2, or layout_3
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Section Title: (TEXT) Font, size (18-60px), color, bold/italic
- Section Description: (TEXT) Font, size (12-20px), color, bold/italic (default: italic)
- Category Labels: (TEXT) Font, size (12-20px), color, bold/italic
- Background: (BACKGROUND) Section background
⨠Service Highlights
A row of up to 6 icon + label tiles for showcasing key store benefits (e.g., free shipping, easy returns).
Content Settings
đ Section Header
- Section Title: (INPUTBOX) Optional heading above the highlights
đˇī¸ Highlights
Type: DECK (Repeatable, max 6)
Each highlight contains:
- Title: (INPUTBOX) Label text for the highlight
- Icon: (SELECTBOX) Choose from: truck, rotate-ccw, shield-check, message-square, package, credit-card, heart, star, clock, globe, lock, tag, award, gift, phone, mail
Design Settings
đ¨ Styling
- Section Title: (TEXT) Font, size (14-40px), color, bold/italic (default: bold)
- Highlight Label: (TEXT) Font, size (10-24px), color, bold/italic
- Background: (BACKGROUND) Section background
đŦ Testimonials
Customer reviews carousel with images and quotes.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading (e.g., "Customer Reviews")
â Testimonial Cards
Type: DECK (Repeatable, max 10)
Each testimonial contains:
- Quote: (TEXTAREA) Customer testimonial text
- Author: (INPUTBOX) Customer name
Design Settings
đ¨ Styling
- Quote: (TEXT) Font, size (12-40px), color, bold/italic (default: italic)
- Author: (TEXT) Font, size (12-30px), color, bold/italic
- Background: (BACKGROUND) Section background
đĸ Logo Slider
Display brand logos or partner images in a sliding carousel.
Content Settings
đŧī¸ Slides
Type: DECK (Repeatable, max 20)
Each slide contains:
- Image Content: (IMAGE) Logo or brand image
- Image Link: (BUTTON) Optional link destination
âąī¸ Autoplay Settings
- Autoplay: (TOGGLE) Auto-advance slides (default: ON)
- Autoplay Interval: (INPUTBOX) Time between slides in milliseconds (e.g., "3000" for 3 seconds)
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Inner Background: (BACKGROUND) Slider container background
- Background: (BACKGROUND) Section background
đ Product Carousel
Horizontally scrollable product carousel with a section title.
Content Settings
đ Header & Products
- Section Title: (INPUTBOX) Main heading
- Product Selector: (PRODUCT_SELECTOR) Choose up to 32 products
Design Settings
đ¨ Styling
- Section Title: (TEXT) Font, size (18-40px), color, bold/italic
- Product Name: (TEXT) Font, size (12-20px), color, bold/italic (default: bold)
- Product Price: (TEXT) Font, size (12-20px), color, bold/italic
- Background: (BACKGROUND) Section background
đ Product Columns
Display products in up to 4 vertical columns with titles and links.
Content Settings
đ Column 1
- Column 1 Title: (INPUTBOX) Column heading
- Column 1 Button: (BUTTON) Link to full collection or category
- Column 1 Product Selector: (PRODUCT_SELECTOR) Choose up to 32 products
đ Column 2
- Column 2 Title: (INPUTBOX) Column heading
- Column 2 Button: (BUTTON) Link to full collection or category
- Column 2 Product Selector: (PRODUCT_SELECTOR) Choose up to 32 products
đ Column 3
- Column 3 Title: (INPUTBOX) Column heading
- Column 3 Button: (BUTTON) Link to full collection or category
- Column 3 Product Selector: (PRODUCT_SELECTOR) Choose up to 32 products
đ Column 4
- Column 4 Title: (INPUTBOX) Column heading
- Column 4 Button: (BUTTON) Link to full collection or category
- Column 4 Product Selector: (PRODUCT_SELECTOR) Choose up to 32 products
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Column Title: (TEXT) Font, size, color, bold/italic, visibility
- Button: (BUTTON) Font, size, appearance, shape, color, visibility
- Background: (BACKGROUND) Section background
đ Text Section
Simple centered content block with a title, description, and optional call-to-action button.
Content Settings
đ Content
- Title: (INPUTBOX) Main heading
- Description: (TEXTAREA) Body text
- Section Button: (BUTTON) Optional call-to-action with link
Design Settings
đ¨ Styling
- Title: (TEXT) Font, size (18-48px), color, bold/italic
- Description: (TEXT) Font, size (12-20px), color, bold/italic
- Button: (BUTTON) Appearance, shape, color (default: OUTLINE, RECTANGLE)
- Background: (BACKGROUND) Section background
đ¨ Tiles
Flexible content tiles supporting images, image overlays, videos, and sliders.
Content Settings
đ´ Tiles
Type: DECK (Repeatable, max 4)
Each tile contains:
- Type: (SELECTBOX) Choose tile type: "image", "image-overlay", "video", or "slider"
- Image Content: (IMAGE) Tile image
- Image Badge: (INPUTBOX) Optional badge text
- Image Title: (INPUTBOX) Tile heading
- Image Text: (TEXTAREA) Tile description
- Image Link: (BUTTON) Link destination
- Video Link: (INPUTBOX) URL for video tiles (YouTube, Vimeo, etc.)
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Image Badge: (TEXT) Font, size, color, bold/italic, visibility
- Image Title: (TEXT) Font, size, color, bold/italic, visibility
- Image Text: (TEXT) Font, size, color, bold/italic, visibility
- Image Link: (BUTTON) Font, size, appearance, shape, color
- Background: (BACKGROUND) Section background
đ Property Type Reference
INPUTBOX
Single-line text input for short content like titles, labels, URLs
TEXTAREA
Multi-line text input for descriptions, long content
BUTTON
Button configuration with text and link URL
IMAGE
Image upload supporting multiple resolutions (mobile/desktop, low/hi-res)
TOGGLE
On/off switch for enabling/disabling features
SELECTBOX
Dropdown menu with predefined options
DECK
Repeatable card items for creating lists, carousels, multiple entries
PRODUCT_SELECTOR
Pick products from your store catalog with configurable maximum
CATEGORY_SELECTOR
Pick categories from your store with configurable maximum
BACKGROUND
Background color or gradient picker with preset colors
TEXT
Advanced text styling: font, size, color, bold, italic, visibility
INFO
Information display with description and optional action button
DIVIDER
Visual separator in settings panel