Welcome to Atria 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 for promotional banners.
Content Settings
đŧī¸ Slides
Type: DECK (Repeatable, max 10)
Each slide contains:
- Image: (IMAGE) Background image (recommended: 1920x800px)
- Title: (INPUTBOX) Main headline
- Description: (TEXTAREA) Supporting text
- Button: (BUTTON) Call-to-action with link
âąī¸ Autoplay Settings
- Autoplay: (TOGGLE) Auto-advance slides (default: ON)
Design Settings
đ¨ Round Corners
- Round Corners: (TOGGLE) Enable rounded corners for elements (default: ON)
đ¯ Hero
Simple hero section with title, subtitle, description, buttons, and image.
Content Settings
- Section Title: (INPUTBOX) Main headline
- Section Subtitle: (INPUTBOX) Secondary heading
- Section Description: (TEXTAREA) Supporting text
- Button 1: (BUTTON) Primary CTA with link
- Button 2: (BUTTON) Secondary CTA with link
- Section Image: (IMAGE) Hero image
Design Settings
đī¸ Feature Toggles
- Fullscreen: (TOGGLE) Make hero full viewport height (default: ON)
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
đ¨ Typography & Colors
- Section Title: (TEXT) Font, size (18-60px), color, bold/italic (default: 48px, bold)
- Section Subtitle: (TEXT) Font, size (12-24px), color, bold/italic (default: 12px, bold)
- Section Description: (TEXT) Font, size (12-20px), color, bold/italic (default: 16px, italic)
- Button 1: (BUTTON) Size, appearance, shape, color
- Button 2: (BUTTON) Size, appearance, shape, color
- Background: (BACKGROUND) Section background color/gradient
đ¨ 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, and links.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading
- Section Subtitle: (INPUTBOX) Subtitle text
đ° Blog Posts
Type: DECK (Repeatable)
Each post contains:
- Image: (IMAGE) Post featured image
- Title: (INPUTBOX) Post title
- Link: (BUTTON) Read more button
đ View All Button
- Button: (BUTTON) Link to all blog posts
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Section Title: (TEXT) Font, size, color, bold/italic
- Section Subtitle: (TEXT) Font, size, color, bold/italic
- Post Title: (TEXT) Font, size, color, bold/italic
- Button: (BUTTON) Styling options
- Background: (BACKGROUND) Section background
â FAQ
Frequently asked questions with expandable answers.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading
- Section Subtitle: (INPUTBOX) Subtitle text
â 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, color, bold/italic
- Section Subtitle: (TEXT) Font, size, color, bold/italic
- Question: (TEXT) Font, size, color, bold/italic
- Answer: (TEXT) Font, size, color, bold/italic
- Background: (BACKGROUND) Section background
â Featured Product
Showcase a single product with details and purchase options.
Content Settings
đī¸ Product Selection
- Product Selector: (PRODUCT_SELECTOR) Choose 1 product to feature
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)
đ Featured Products
Display a curated selection of products in a grid.
Content Settings
đ Header
- Title: (INPUTBOX) Section heading
đī¸ Products
- Product Selector: (PRODUCT_SELECTOR) Choose products to display
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
- Title: (TEXT) Font, size, color, bold/italic
- 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 Text: (INPUTBOX) CTA button label
- Discount: (INPUTBOX) Discount percentage/amount
- Discount Text: (INPUTBOX) Discount label text
- Link URL: (INPUTBOX) Destination URL
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
đī¸ Promo Products
Tabbed product display with promotional images.
Content Settings
đ Header
- Section Title: (INPUTBOX) Main heading
- Section Description: (TEXTAREA) Supporting text
- Tab 1 Label: (INPUTBOX) First tab name
- Tab 2 Label: (INPUTBOX) Second tab name
đ Tab 1 Content
- Promo Image: (DECK, max 1) Image with label, text, and button link
- Product Selector: (PRODUCT_SELECTOR) Choose up to 32 products
đ Tab 2 Content
- Promo Image: (DECK, max 1) Image with label, text, and button link
- Product Selector: (PRODUCT_SELECTOR) Choose up to 32 products
đ Button Text
- Add to Cart Text: (INPUTBOX) Custom button label
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
đ 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
- Subtitle: (TEXTAREA) Collection tagline
- Title: (INPUTBOX) Collection name
- Product Selector: (PRODUCT_SELECTOR) Choose 1 featured product
- Button: (BUTTON) Link to full collection
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
⥠Flash Sale
Promotional banner with countdown timer and coupon code.
Content Settings
- Title: (INPUTBOX) Sale headline
- Description: (TEXTAREA) Sale details
- End Date: (INPUTBOX) When sale expires (format: YYYY-MM-DD HH:MM)
- Coupon Code: (INPUTBOX) Discount code to display
- Use Coupon Text: (INPUTBOX) Label for coupon (e.g., "Use code:")
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
đĄ 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 product counts.
Content Settings
- 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, names, and product counts are pulled automatically from your store's category settings.
Design Settings
đ¨ Styling
- Round Corners: (TOGGLE) Enable rounded corners (default: ON)
đŦ 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 5)
Each testimonial contains:
- Image: (IMAGE) Customer photo or related image
- Quote: (TEXTAREA) Customer testimonial text
- Author: (INPUTBOX) Customer name
- Location: (INPUTBOX) City or designation
- Background Color: (INPUTBOX) Custom card background color
- Product Selector: (PRODUCT_SELECTOR) Optional: link 1 product to testimonial
- Button: (BUTTON) Optional: link to full review or product
âąī¸ Autoplay
- Autoplay: (TOGGLE) Auto-advance testimonials (default: ON)
đĸ 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 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
đ¨ 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