Skip to main content

Settings

Settings are the fundamental parameters that govern the foundational configuration of your website. These settings encompass a broad range of options, such as general settings, header settings, footer settings, typography settings, and other fundamental settings that are essential for the establishment of your website. Below are the configurable settings of the Astra theme:

General Setting​

The general settings constitute of the colour palette of the Astra theme. It is a set of colours used consistently in a website's design to create a specific mood or tone. It includes primary and secondary colours as well as accent colours. A well-designed colour palette unifies a website's elements and enhances its visual appeal, reinforcing its brand identity. colour choices are made based on factors such as the target audience, industry, and intended use of the website. Below are the further configurable options in general setting:

  1. Theme
  • PAGE BACKGROUND: The page background colour of an e-commerce website refers to the colour that appears behind the content of the website. This can include the background main content area excluding the header and footer. This option allows for the customisation of background colour of all pages on the website. Use this option to adjust the colour of your e-commerce site's background, including the main area.
  • THEME ACCENT: The theme accent colour of an e-commerce website refers to the colour that is used to highlight important elements of the website, such as the sub-menu of the hero menu or the description background of the product listing page. Use this option to customise accent colour to highlight key elements like hero menu sub-menu or product listing page description.
  1. Text
  • HEADING: The heading text colour of a website refers to the colour of the text used for the main headings and titles on a web page. Use this option to customise main headings and titles on a web page.
  • BODY: The body text colour refers to the colour of the main text content on a website. This includes the text that appears in paragraphs, lists, and other text-based elements throughout the site. Use this option to modify the colour of the main text content on a website, including paragraphs and lists.
  • LABEL: The label text colour refers to the colour of the text used to label different fields and elements on an e-commerce website. This includes the text used for product descriptions, pricing information, product highlights and other details related to the products being sold. Use this option to modify the colour of text used for labelling fields and product details on an e-commerce website.
  • TEXT SECONDARY: The "text secondary" of an e-commerce website refers to the colour of the text that appears on any disabled or inactive buttons, links, or fields. This could include buttons that are greyed out because they are unavailable, links that are not clickable, or form fields that are read-only. Use this option to modify the colour of text that appears on inactive buttons, links, or fields.
  1. Button
  • BUTTON PRIMARY: The primary button colour of an e-commerce website is the main colour used for buttons that represent the most important actions on the site. The call-to-action buttons that can be customised include the hero image button and the checkout button on the product description page or the view more button on the product listing page. Use this option to modify the primary colour used for important website actions/buttons, such as checkout and view more buttons.
  • BUTTON SECONDARY: The secondary button colour of an e-commerce website is usually used for non-primary actions such as “Add to cart”, "Cancel" or "Go Back". This option enables the customisation of the colour of secondary buttons across the entire webpage. Use this option to modify the button colour of non-primary actions such as "Add to Cart", "Cancel" and can be customised site-wide.
  • BUTTON LINK: A standalone text with no background to navigate online content. Use this option to modify the colour of button link.
  1. Discount
  • BADGE BACKGROUND: The discount badge background colour refers to the colour used to display the price of the product before the discount. Ideally- price after discount. Use this option to modify the colour of the discount badge background across the entire webpage.
  • BADGE TEXT: Badge texts are often used to indicate a specific status, such as "new" or "featured," or to indicate a certain action, such as "download" or "subscribe." They can also be used to display awards, certifications, or affiliations of a website or its content. Use this option to modify the badge text colour in the sales section of the website, customisable site-wide.
  • DISCOUNT TEXT: The discount text colour of an e-commerce website refers to the colour used to display the percentage of discount on that product. Use this option enables to modify the the colour of discount badge text across the entire webpage.
  • TIMER: Timers measure specific time intervals, displaying a countdown clock until an offer expires. Use this option to modify the colour of the timer on your website.
  1. Header

In a website, the header typically refers to the top section of a webpage that contains the site's logo, navigation menu, and other key elements such as search bar or social media icons.

  • HEADER BACKGROUND: The header background colour of an e-commerce website refers to the colour of the background behind the header section of the website. This typically includes the logo, navigation menu, and any other elements that appear at the top of the page. Use this option to modify the colour the colour header background across the entire webpage.
  • NAVIGATION TEXT: Navigation text in a footer of a website refers to the links or menu options displayed at the bottom of the webpage, which allow users to access different pages or sections of the website. Use this option to modify the colour of the navigation text in the header section across the entire webpage.
  • ICONS: The header icon colour of an e-commerce website refers to the colour of the icons displayed on the header section of the website, such as the search icon, shopping cart icon, and menu icon. Use this option to modify the colour of the icon in the header section across the entire webpage.
  1. Footer

A footer in a website is a section that appears at the bottom of every page and typically contains information such as copyright notices, contact information, links to important pages, and sometimes a site map or search bar.

  • BACKGROUND: The footer background colour of an e-commerce website refers to the colour of the background behind the footer section of the website. Use this option to modify the colour footer background across the entire webpage.
  • BOTTOM BAR BACKGROUND: The bottom bar background in a footer of a website is the background colour or image that appears at the bottom of the web page, below the main content and above the page footer. It is a design element used to provide visual continuity and enhance the overall aesthetic of the website. Use this option to modify the colour of the bottom bar background of the footer across the entire webpage.
  • HEADING TEXT: Heading text in a footer of a website is a short and concise text that is used to label or identify the content of a specific section in the website's footer. It typically appears in larger and bolder font than the surrounding text to make it stand out and to help users quickly find the information they are looking for. Use this option to modify the colour of the heading text in the footer section across the entire webpage.
  • BODY TEXT: Body text in a footer on a website refers to the written content located at the bottom of a web page, often containing important information such as copyright notices, contact information, links to terms of service and privacy policy pages, and other relevant details about the website or its owners. Use this option to modify the colour of the body text in the footer section across the entire webpage.
  • ICONS: The footer icon colour of an e-commerce website refers to the colour of the icons displayed on the footer section of the website, such as the extension icons, shopping cart icons, and menu icons. Use this option to modify the colour of the icon in the footer section across the entire webpage.
  1. Overlay Popup
  • DIALOG BACKGROUND: The dialogue background in an overlay popup on a website is the translucent or opaque layer that appears behind the popup box, serving to dim or blur the background content and bring focus to the popup. Use this option to create contrast and focus attention on the content within a dialog box or pop-up.
  • OVERLAY: An overlay in an overlay popup in a website refers to a semi-transparent layer that is displayed on top of the existing webpage content to highlight or emphasise specific information or functionality. Use this option to add visual interest and depth by darkening or lightening an area of the website.
  • DIVIDER STROKE: A divider stroke in an overlay popup on a website is a line or border that separates or divides different sections of content within the popup. Use this option to separate different sections or elements on a website, making it easier to navigate.
  • HIGHLIGHT COLOUR: Highlight colour in an overlay popup on a website is a visually distinct colour that is used to draw attention to a specific element or message within the popup. It is typically a bright or contrasting colour that stands out from the rest of the popup's design, making it more noticeable to the user. Use this option to draw attention to specific elements or actions on a website, encouraging user engagement.
  1. User Alert

A user alert in a website is a notification or message that is displayed to a user to inform them about important events, actions, or errors on the website. It is used to grab the user's attention and provide them with relevant information to enhance their user experience.

  • SUCCESS BACKGROUND/SUCCESS TEXT: SUCCESS BACKGROUND and SUCCESS TEXT are colours used to indicate successful actions or operations on a website. They create a positive and optimistic impression for the user. Use this option to modify the colours of success background and success text in your website.
  • ERROR BACKGROUND/ERROR TEXT: ERROR BACKGROUND and ERROR TEXT are colours used to indicate errors or warnings on a website. They create a sense of urgency and caution for the user.Use this option to modify the colours of error background and error text in your website.
  • INFO BACKGROUND/INFO TEXT: INFO BACKGROUND and INFO TEXT are colours used to indicate general information or notifications on a website. They create a neutral and informative impression for the user. Use this option to modify the colours of info background and info text in your website.

The header of a website is the top section that typically appears on every page of the website. It usually contains important information and navigational elements, such as the website logo, main menu, search bar, and social media icons. The purpose of the header is to provide visitors with a quick overview of the website's identity, purpose, and content, as well as to facilitate easy access to different sections of the website. Below are the further configurable options in header setting:

  1. Layout

The header layout consists of two options:

  • SINGLE ROW NAVIGATION: Single row navigation is a type of website navigation where all the menu items are placed in a single horizontal row, typically at the top of the webpage.
  • DOUBLE ROW NAVIGATION: Double row navigation in a website refers to a menu system that uses two rows of navigation items to provide users with more options and easier access to different sections of the website.
  1. Desktop Logo & Menu Alignment
  • LOGO LEFT MENU CENTRE
  • LOGO LEFT MENU LEFT
  • LOGO LEFT MENU RIGHT
  • LOGO CENTRE

Recommended settings:

  • Single row layout: Keep the menu items in the header section upto 6.
  • Double row layout: Keep the menu items in the header section upto 9.
  • Limitation: Exceeding the recommended number of menu items may cause overflow in navigation bar.

The footer of a website is the bottom section that typically appears on every page of the website. The purpose of the footer is to provide visitors with additional resources, reinforce brand credibility, and offer quick access to key sections of the website.

Below are the further configurable options in footer settings:

  1. Logo - The logo to be displayed on the footer
  2. Description - Description to be displayed on the footer
  3. Bottom Bar Image - Image to be displayed on the bottom bar
  4. Enable Footer Image - Select whether you want to display footer image
  5. Desktop Image - Image to be displayed on desktop screens
  6. Mobile/Tablet Image - Image to be displayed on mobile and tablet screens

Typography​

Typography in a website refers to the visual arrangement and design of the text on a webpage, including its style, size, colour, spacing, and font selection. It is an important aspect of web design as it can significantly impact the readability, accessibility, and aesthetic appeal of the content displayed on a webpage. It includes options to customise the font family, weight, line height, and other elements. Typography affects how easy it is to read and use your website, so it's important to configure these settings carefully. Below are the further configurable options in typography setting:

  1. Font Header

A font header in the typography section of a website refers to the typeface used for the main heading or title on a webpage. From the drop-down menu, choose the base font header.

  1. Font Body

The font body in typography refers to the primary typeface used for the main content on a website, such as paragraphs, articles, and blog posts. It is typically a legible and easy-to-read font that is selected to improve the readability of the website content. From the drop-down menu, choose the base font body.