Skip to main content
Theme Raed provides a wide range of customizable settings and features that can be configured through the Salla theme dashboard. This guide covers all available options organized by section.

​
Overview

Theme Raed supports 17 core features and over 15 customizable settings that control various aspects of your store’s appearance and behavior.

​
Feature flags

These features are automatically enabled when using Theme Raed:
Custom fontsSupport for custom font selection and typography settings.Color customizationFull color scheme customization through the theme dashboard.Unite cards heightAutomatically align product card heights for a uniform grid layout.
Product filtersAdvanced filtering options for product listings (price, brand, attributes).
The following components are available in the page builder:
  • Featured products
  • Fixed banner
  • Fixed products section
  • Products slider
  • Photos slider
  • Parallax background
  • Testimonials
  • Square photos gallery
  • Store features
  • YouTube video embed

​
Header settings

Control the appearance and behavior of your store’s header section.
​
header_is_sticky
boolean
default:true
Fix the main navigation menu at the top of the page when scrolling down.
{
  "id": "header_is_sticky",
  "type": "boolean",
  "value": true
}
It is recommended to disable this setting if you have many items in dropdown menus, as it may affect usability on smaller screens.

​
Top navigation bar

​
topnav_is_dark
boolean
default:false
Enable dark mode for the top navigation bar.When enabled, the top bar will use a dark background with light text.
​
important_links
boolean
default:true
Display important page links in the top navigation bar.Includes links to:
  • Landing pages
  • Blog
  • Info pages (About, Contact, etc.)
​
enable_more_menu
boolean
default:true
Enable the “More” overflow menu in the main navigation.When enabled, navigation items that don’t fit in the available space will automatically move into a dropdown menu labeled “More”. This ensures the navigation remains usable on all screen sizes.
Customize the appearance of your store’s footer.
​
footer_is_dark
boolean
default:false
Enable dark mode for the footer section.
{
  "id": "footer_is_dark",
  "type": "boolean",
  "value": false
}

​
Product page settings

Control how products are displayed and how customers interact with them.

​
Add to cart behavior

​
enable_add_product_toast
boolean
default:true
Enable enhanced add to cart notification.When a product is added to cart, displays an improved toast notification with product details and quick actions.
​
sticky_add_to_cart
boolean
default:true
Fix the add to cart button at the bottom of mobile screens.On mobile devices, the add to cart button and quantity selector will remain visible at the bottom of the screen when scrolling through product details.

​
Product information

​
show_tags
boolean
default:true
Display product tags on product pages.Shows tags associated with products, allowing customers to discover related items.

​
Product image display

​
slider_background_size
dropdown
default:"contain"
Control how images are displayed in the product image slider.Options:
  • cover - Cover the entire area while maintaining the image’s aspect ratio. May crop parts of the image.
  • contain - Show the full image centered within the slider. May show empty space around the image.
{
  "id": "slider_background_size",
  "type": "items",
  "format": "dropdown-list",
  "selected": [{"value": "contain"}],
  "options": [
    {"label": "Cover", "value": "cover"},
    {"label": "Contain", "value": "contain"}
  ]
}
​
imageZoom
boolean
default:false
Enable image zoom functionality in the product slider.When enabled, customers can hover over or tap product images to zoom in and see more details.
This feature enhances the shopping experience by allowing customers to examine product details more closely.

​
Home page settings

Customize the layout and behavior of your store’s home page.
​
vertical_fixed_products
boolean
default:false
Use vertical layout for products in the fixed products section.When enabled, products in the fixed products component will stack vertically instead of displaying in a horizontal grid.
​
is_more_button_enabled
boolean
Show “View All” buttons on the home page.When enabled, product sections will include a “View All” button that links to the full category or product listing.
​
squar_photo_bg_image_size
dropdown
default:"contain"
Control how images are displayed in the square items list section.Options:
  • cover - Cover the entire area while maintaining aspect ratio
  • contain - Show the full image centered

​
Component configuration

Theme Raed includes several page builder components that can be added to your home page:

​
Enhanced animated images

Component ID: home.enhanced-slider Image carousel with animated text overlays and entrance effects. Configuration:
  • Minimum slides: 1
  • Maximum slides: 10
  • Image size: 900×600 pixels (recommended)
Fields per slide:
  • Background image (required)
  • Title with animation
  • Description text
  • Overlay toggle
This component is not suitable for displaying full banners. Use the standard “Animated images” component for full banner display.
Component ID: home.main-links Scrollable quick link cards with icons, titles, and custom destinations. Configuration:
  • Minimum items: 3
  • Maximum items: 100
  • Show navigation arrows (optional)
  • Display category images (optional)
  • Merge with previous component (optional)
Link options:
  • Products
  • Categories
  • Brands
  • Pages
  • Blog articles
  • Blog categories
  • Special pages (Offers, Brands, Blog)
  • External URLs

​
Animated products with background

Component ID: home.slider-products-with-header Product carousel with custom background image, title, and description. Configuration:
  • Background image: 1233×500 pixels (recommended)
  • Minimum products: 1
  • Maximum products: 8
  • Optional title and description
  • Optional “View All” link

​
Enhanced square images

Component ID: home.enhanced-square-banners Square image gallery with text overlays and links. Configuration:
  • Minimum images: 1
  • Maximum images: 5
  • Image size: 640×427 pixels (recommended)
Fields per image:
  • Background image (required)
  • Optional title
  • Optional description
  • Optional link destination
Images are cropped from the edges to fit different screen sizes. Consider the cropped areas when designing to ensure important content remains visible.

​
Brands

Component ID: home.brands Brand logo carousel displaying selected brands from your store. Configuration:
  • Optional section title
  • Select brands from dropdown
  • Automatic logo display from brand settings

​
Custom testimonials

Component ID: home.custom-testimonials Customer testimonials carousel with avatars, ratings, and review text. Configuration:
  • Minimum testimonials: 1
  • Maximum testimonials: 30
  • Avatar size: 68×68 pixels (recommended)
Fields per testimonial:
  • Customer name
  • Customer avatar (required)
  • Star rating (1-5)
  • Review text (multilingual)

​
Setting types reference

​
Boolean settings

Boolean settings appear as toggle switches in the theme dashboard: 
{
  "type": "boolean",
  "format": "switch",
  "id": "header_is_sticky",
  "label": "Fix header when scrolling",
  "value": true
}
Dropdown settings allow selection from predefined options: 
{
  "type": "items",
  "format": "dropdown-list",
  "id": "slider_background_size",
  "options": [
    {"label": "Cover", "value": "cover"},
    {"label": "Contain", "value": "contain"}
  ]
}

​
Text settings

Text settings support single-line or multi-line input: 
{
  "type": "string",
  "format": "text",
  "id": "title",
  "multilanguage": true,
  "maxLength": 100
}

​
Best practices

  1. Test on multiple devices - Always preview changes on mobile, tablet, and desktop
  2. Use high-quality images - Follow recommended image dimensions for optimal display
  3. Enable sticky header carefully - Disable for mega menus with many items
  4. Optimize performance - Limit the number of components on the home page
  5. Maintain consistency - Use similar settings across header and footer (both dark or both light)
  6. Provide multilingual content - Fill in all language fields for international stores
  7. Use descriptive link titles - Make quick links clear and actionable
  8. Test cart notifications - Ensure add to cart notifications work properly with your theme customizations

Build docs developers (and LLMs) love

Get started for freeTalk to us