Welcome to Linea 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 Section
The top navigation bar with your logo, menu, search, and cart.
🎯 Mega Menu Navigation
Create powerful dropdown menus with multiple templates and promotional content.
For each menu item, configure:
📋 Menu Title: The clickable menu label (e.g., "Dogs", "Cats", "Sale")
🎨 Menu Icon: Choose from themed icons:
• Pet icons: Dog, Cat, Fish, Bird, Small Pet, Reptile
• Store icons: Pharmacy, Brand, Sale, Pet Services
• None: No icon displayed
📐 Menu Templates - Choose your dropdown style:
• Columns Template: Multi-column layout perfect for extensive product categories. Shows organized columns with category titles and nested links. Best for stores with many products.
• Simple Template: Clean single-column dropdown with a basic link list. Best for fewer menu items or utility pages (e.g., "About", "Help").
⭐ Menu Highlight: Toggle ON to make a menu item stand out with a pulsing animation (great for "Sale" or "New" categories)
🎁 Promotional Card (Columns Template Only):
Add a promotional card within your mega menu dropdown:
• Promo Title: Eye-catching headline (e.g., "Summer Sale!")
• Promo Image: Visual banner or product image
• Promo Button: Call-to-action linking to a collection or product
This appears alongside your menu columns to drive attention to special offers
📢 Announcements Bar
Display rotating messages at the very top of your site.
How to set up:
1. Toggle "Show Announcements" ON
2. Click "Add Announcement" to create messages (up to 5)
3. For each announcement:
• Text: Your message (e.g., "Free Shipping Over $50!")
• Link: Optional click destination
Autoplay Settings:
• Toggle ON to automatically cycle through announcements
• Messages rotate every few seconds
Styling:
• Background Color: Choose from preset colors or custom
• Text Color: Ensure good contrast for readability
• Font Size: 12-20px available
• Style: Bold or italic options
Popular uses: Sales, free shipping thresholds, holiday hours, new arrivals
📱 Top Bar Links
Quick utility links shown above your main menu (desktop only).
How to set up: Click "Add Link" to create buttons (maximum 3).
Great for "Track Order", "Contact", or "Store Locations".
Tip: Keep it minimal - these are secondary navigation elements
🔍 Search Bar
Enable product search functionality.
Toggle ON/OFF: Show or hide the search bar
Placeholder Text: Customize the search input text (e.g., "Search products...")
The search icon appears in your header and opens a search overlay
👤 Account Button
Customer account access button.
Toggle ON/OFF: Show or hide account icon
Button Text: Customize button label (default: "Account" or "Sign In")
Customers can log in, view orders, and manage their profile
📍 Find Store Button
Link to your store locator or physical location.
Button Settings:
• Button label (e.g., "Find a Store", "Visit Us")
• Link to store locator page or Google Maps
Perfect for businesses with physical locations
🎨 Brand Colors
Set your primary and secondary brand colors used throughout your site.
Primary Color: Used for links, buttons, hover effects, and menu highlights
Secondary Color: Used for accents and alternative elements
Tip: Use colors from your logo for brand consistency. These colors affect the entire theme!
🎨 Background
Choose the header background color.
Best practice: White or light colors work best for readability. Make sure there's good contrast with your text color.
📌 Sticky Header
Makes the header stay visible when scrolling down the page.
Toggle ON: Header stays at top (great for easy navigation)
Toggle OFF: Header scrolls away with page content
Recommended: Keep ON for better user experience
💡 Pro Tips
- Use Columns template for extensive product categories, Simple template for utility pages
- Add promotional cards in mega menus to highlight sales or featured collections
- Use menu highlights sparingly (1-2 items max) for maximum impact
- Test announcements bar messages - cycle between promotions and info
- Keep top bar links minimal (3 max) to avoid overwhelming customers
- Ensure your logo has good contrast with the background
- Test menu navigation on mobile - it automatically converts to a hamburger menu
- The cart icon automatically shows the number of items
Hero Slider
Full-width rotating banner for promotions and featured content.
🖼️ Creating Slides
Add multiple rotating banners (typically 3-5 slides).
For each slide, you'll need:
• Background Image: High-quality photo (recommended size: 1920x800px)
• Badge: Small text like "New Arrival" or "Sale" (optional)
• Headline: Your main message (5-8 words max)
• Description: Supporting details (1-2 sentences)
• Button: Call-to-action like "Shop Now" with link to collection
⏱️ Autoplay
Control automatic slide changes.
Autoplay: Toggle ON to auto-advance slides
Delay: Time each slide shows (default: 5 seconds)
Customers can still use arrows to navigate manually
✏️ Text Styling
Customize how text appears on slides.
For Badge, Headline, and Description you can adjust:
• Font family and size
• Text color
• Bold or italic
Make sure text contrasts well with your image!
💡 Best Practices
- Use high-quality images but optimize file size for fast loading
- Keep headlines short and punchy (5-8 words)
- Ensure text is readable - add a dark overlay if needed
- Always include a clear call-to-action button
- Test on mobile - images may need different cropping
- Don't use more than 5 slides (can be overwhelming)
Hero Mosaic
Combine a slider with static tile images in a mosaic layout.
🎞️ Hero Slider Part
Main rotating carousel on the left side.
Add slider items (up to 10):
For each slide, configure:
• Image: Large promotional image
• Title: Main headline
• Text: Supporting description
• Button: Call-to-action with link
Autoplay: Toggle ON for automatic rotation
🖼️ Mosaic Tiles
Static promotional tiles on the right side (up to 4).
For each tile:
• Image: Promotional or category image
• Title: Tile heading
• Text: Brief description
• Button: Link to collection/product
These tiles stack vertically next to the slider, creating an attractive mosaic layout
📐 Layout
Responsive design that adapts to screen size.
Desktop: Slider takes 2/3 width, tiles stack in remaining 1/3
Mobile: Slider appears first, then tiles stack below
All content remains accessible on any device
💡 Pro Tips
- Use the slider for main promotions, tiles for secondary categories
- Keep 2-4 tiles for best visual balance (not overcrowded)
- Ensure images have consistent style and quality
- This layout is perfect for showcasing multiple promotions simultaneously
- Test image sizes - tiles should be square or portrait oriented
Featured Products
Showcase products with promotional image and product grid.
🖼️ Promotional Area
Large image section with text overlay.
Set up:
• Image: Upload a lifestyle or promotional photo
• Subtitle: Small text like "New Collection"
• Title: Main headline
• Description: A few sentences about the promo
• Button: "Shop Collection" with link
🛍️ Product Selection
Choose which products to display.
How to select: Use the product picker to select up to 4 products. They'll appear in a 2x2 grid next to the promotional image.
📐 Layout
Choose image position.
Left Image: Promo image on left, products on right
Right Image: Products on left, promo image on right
💡 Pro Tips
- Use this section to highlight a collection or seasonal promotion
- Choose products that relate to your promotional message
- Make sure promotional image has good visual appeal
- Update regularly to keep content fresh
Product Columns
Display products in a clean grid layout.
📝 Section Title
Optional heading above products.
Title: e.g., "Bestsellers", "New Arrivals"
Subtitle: Optional supporting text
Leave blank to hide titles
🛍️ Product Selection
Choose products to display.
How many: Select 4-12 products
How to select: Use the product picker to choose from your catalog
📊 Columns
Number of products per row.
2 Columns: Larger products, good for detailed shots
3 Columns: Balanced layout (recommended)
4 Columns: Compact, shows more products
Automatically adjusts for mobile screens
💡 Pro Tips
- Use 3 columns for best balance of detail and quantity
- Group related products together
- Update product selection seasonally
- Product badges (Sale, New) show automatically
Promo Products
Feature products with a promotional headline and description.
📢 Promotional Header
Eye-catching section introduction.
Super Title: Small badge text above (e.g., "Limited Time")
Title: Main headline (e.g., "Winter Sale - Up to 50% Off")
Subtitle: Supporting description (1-2 sentences)
Button: "View All Deals" linking to collection
This creates a strong promotional message above your products
🛍️ Product Selection
Choose products for the promotion.
Product Picker: Select up to 32 products
Best for: Sale items, new arrivals, featured collections
Products display in a responsive grid below the promotional header
🎨 Styling Options
Customize text appearance.
All text elements (super title, title, subtitle) have individual styling controls:
• Font selection
• Size adjustment
• Color picker
• Bold/italic options
💡 Pro Tips
- Perfect for seasonal sales, clearance, or special promotions
- Use urgent language in titles ("Limited Time", "Today Only")
- Update products regularly to keep content fresh
- The button should link to a full collection page
- Combine with Flash Sale section for maximum promotion impact
Promo Cards
Image-based cards for promotions or category highlights.
🎴 Creating Cards
Add 2-4 promotional cards.
For each card:
• Image: Background photo (lifestyle or product)
• Title: Card headline
• Description: Brief text (optional)
• Button: "Shop Now" with link to collection/category
Cards have hover effects automatically
🎨 Styling
Text appearance on cards.
Customize font, size, color, bold, and italic for titles and descriptions. Make sure text is readable against your images!
💡 Pro Tips
- Use for category navigation or seasonal promotions
- Keep titles short and action-oriented
- Use high-quality, visually appealing images
- 3 cards work best for balanced layout
- Ensure good color contrast between text and images
Flash Sale Banner
Time-sensitive promotion with countdown timer and coupon code.
⏰ Sale Details
Set up your flash sale information.
Badge Text: "Limited Time Offer" or "Flash Sale"
Title: Your main sale message
Description: e.g., "Up to 50% off selected items"
End Date: When the sale ends (countdown updates automatically)
🎟️ Coupon Code
Display a promotional code customers can copy.
Code: Enter your coupon code (e.g., "SAVE20")
Label: "Use Code:" or "Enter at checkout:"
Customers can click to copy the code automatically
🎨 Background
Banner appearance.
Use a gradient background for eye-catching effect. Bold colors work best for urgency.
💡 Pro Tips
- Use for limited-time offers to create urgency
- Countdown timer automatically shows days, hours, minutes, seconds
- Make sure coupon code matches your actual discount settings
- Update end date when you want to change or remove the sale
- Test that the coupon code works before going live
Tiles Section
Versatile content blocks supporting images, videos, and sliders.
🎯 Tile Types (4 Options)
Each tile can be one of four different content types.
1. Image Tile:
Static image with optional text overlay
• Upload image
• Add badge, title, description
• Link to any page
2. Image Overlay Tile:
Image with dark/colored overlay for better text readability
• Same as Image but with background overlay
• Better text contrast
3. Video Tile:
Embed YouTube or Vimeo videos
• Enter video URL
• Video plays inline
• Add title and description
4. Slider Tile:
Mini carousel within a tile
• Multiple images rotate automatically
• Perfect for showcasing product variations
🖼️ Content for Each Tile
Configure up to 4 tiles with rich content.
For each tile, add:
• Badge: Small label (e.g., "New", "Trending")
• Title: Main heading
• Description: Supporting text
• Button: Call-to-action with link
• Media: Image, video, or multiple images depending on type
Mix different tile types for dynamic, engaging content
📐 Responsive Layout
Tiles automatically arrange for different screens.
Desktop: Tiles display in a grid (2x2 or horizontal)
Tablet: 2 columns
Mobile: Stack vertically
All tile types remain functional and attractive on any device
💡 Pro Tips
- Mix tile types for variety (e.g., 3 images + 1 video)
- Use Video tiles to showcase product demonstrations or brand stories
- Image Overlay type is best when you have text that needs to stand out
- Slider tiles are great for showing product colors or angles
- Keep 2-4 tiles for clean, focused sections
- Ensure all images are high quality and consistent in style
Top Categories
Display your main product categories with images and links.
📝 Section Header
Introduction for your categories section.
Section Title: e.g., "Shop by Category", "Browse Collections"
Section Description: Optional supporting text (1-2 sentences)
This appears above your category grid
🏷️ Category Selection
Choose which categories to feature.
Category Picker: Select up to 32 categories from your store
What displays automatically:
• Category image (from your category settings)
• Category name
• Product count
• Link to category page
Categories display in a responsive grid with hover effects
🎨 Styling
Customize the appearance.
Customize section title and description styling (font, size, color, bold/italic).
Category cards have automatic styling with your theme colors.
💡 Pro Tips
- Perfect for homepage to help customers navigate your store
- Feature your top 6-12 most popular categories
- Make sure all selected categories have attractive category images
- Order categories by popularity or logical browsing flow
- Update category images seasonally for fresh look
- Cards automatically show product count from your catalog
Testimonials
Customer reviews with image slider.
💬 Adding Reviews
Add 3-5 customer testimonials.
For each testimonial:
• Image: Customer photo or related image
• Quote: The testimonial text
• Name: Customer name
• Location: City or designation (e.g., "NYC" or "Verified Buyer")
📝 Section Title
Heading above testimonials.
Examples: "Customer Reviews", "What Our Customers Say", "Loved by Thousands"
🔄 Autoplay
Automatic testimonial rotation.
Toggle ON to automatically cycle through testimonials. Customers can still use arrows to navigate.
💡 Pro Tips
- Use real customer feedback for authenticity
- Keep quotes concise (2-4 sentences)
- Include customer names for credibility
- Images sync with testimonials for better storytelling
- Include diverse testimonials about different aspects of your business
Blog Preview
Showcase your latest blog posts in a grid.
📰 Section Header
Title above blog posts.
Title: e.g., "From Our Blog", "Latest Articles"
Subtitle: Optional badge text like "Tips & Guides"
📝 Adding Posts
Select blog posts to feature.
How many: Display 3-4 posts
For each post:
• Featured image
• Post title
• Link to full article
🔗 "View All" Button
Link to your blog page.
Add a button linking to your main blog page so customers can explore more articles.
💡 Pro Tips
- Feature your most recent or popular posts
- Use high-quality featured images
- Keep post titles concise and clickable
- Update regularly with new content
- Great for SEO and customer engagement
Logo Slider
Showcase partner brands or certifications.
🏢 Adding Logos
Upload brand or partner logos.
How many: 6-12 logos work best
For each logo:
• Upload logo image (transparent PNG recommended)
• Optional link (where clicking logo goes)
Logos automatically scroll across the screen
🎨 Background
Section appearance.
Outer Background: Main section background
Inner Background: Slider container (usually a lighter shade)
Light gray backgrounds work well with logo displays
🔄 Autoplay
Automatic scrolling.
Autoplay: Toggle ON for automatic scrolling
Delay: Set speed of transitions
💡 Pro Tips
- Use for "As Seen In", "Our Partners", or "Certifications"
- Keep logo sizes consistent for professional look
- Use PNG format with transparent backgrounds
- Logos automatically adjust for mobile screens
- Great for building trust and credibility
Service Highlights
Showcase key benefits and services with icons.
⭐ Adding Services
Create 3-4 service highlights.
For each highlight:
• Icon: Choose from available icons (truck, shield, return, etc.)
• Title: e.g., "Free Shipping", "Secure Payment", "Easy Returns"
• Description: Brief explanation (1 sentence)
Common examples: Free Shipping Over $50, 30-Day Returns, 24/7 Support
🎨 Styling
Customize appearance.
Icons appear in circular containers with your brand colors. Adjust text styling for titles and descriptions.
💡 Pro Tips
- Focus on your top 3-4 value propositions
- Use clear, customer-focused language
- Keep descriptions short (5-10 words)
- Place near top of homepage or before checkout
- These build trust and reduce purchase hesitation