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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. Overlay Popup

Overlay_colour are used with alpha value (Opacity) of 60%. Pop-up_bg_colours are usually equal or lighter to the background colour of the website.

• 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.

8. 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.

9. Font

Fonts are important in creating a visually appealing and legible design for written content. Choosing the right font can enhance the overall look and feel of the content and convey the intended message more effectively. Here font option is provided that allows the user to select the font for the website text.

Use the dropdown menu to choose your font.

10. Authentication

An authentication page in a website is a webpage that requires users to provide some form of identification or credentials to gain access to a restricted area of the website or perform a certain action. The purpose of an authentication page is to ensure that only authorised users can access sensitive or private information, such as personal data, financial transactions, or confidential documents.

This option allows you to provide the option of header/footer on authentication pages.

SHOW HEADER:

Select the check mark to make the header available during the login screen.

SHOW FOOTER:

Select the check mark to make the footer available during the login screen.

11. Extension Positions

The extension positions in the extension section of a website refer to the specific locations or areas on a web page where browser extensions or add-ons can be displayed or integrated.

Below are the positions where you can add extension sections:

1. Header Top
2. Header Bottom
3. Footer Top
4. Footer Bottom

Header

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.

note

The following are the limitations of Single-Row Navigation:

Menus with lengthy characters cannot be adjusted, so if a user has such menus, they should either reduce the number of menus or use a 2-row navigation. On desktop, only up to 5 menus are allowed in a single row.

2. 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.

Sections

Sections setting refers to the section margins of the website.

Section margins in a website refer to the amount of empty space or padding that surrounds the content within a specific section or block of a webpage. It is the distance between the edges of the section and the nearest elements on the page, such as the browser window or other content.

Below are the further configurable options in sections setting:

1. Bottom Margins

Bottom margin in a website refers to the space or gap between the bottom edge of a webpage element and the next element below it or the edge of the webpage itself.

Using the slider number line, increase or decrease the bottom margin space around an element's padding and border.

Radius Configuration

Radius configuration in a website refers to the settings that determine the distance from a central point to the edges or boundaries of an element or area, typically used in design or layout. This configuration can be applied to various elements such as buttons, images, containers, or entire sections of a webpage.

Below are the further configurable options in radius configuration setting:

1. Border Radius

Border radius in web design refers to the degree of rounding on the corners of an HTML element's border. It allows designers to create rounded corners for boxes, buttons, images, and other elements, giving them a softer and more modern appearance.

Border Radius has two further configurations:

• IMAGE BORDER RADIUS

Image border radius in web design is a property that allows the user to round the corners of an image. Using the slider number line, increase or decrease the border radius for image and set it in accordance with your configuration.

• BUTTON BORDER RADIUS

Button border radius in web design refers to the curvature of the corners of a button. Using the slider number line, increase or decrease the border radius for button and set it in accordance with your configuration.

Cart

The cart icon appears in the header section of your store page. A cart is a feature on a website that lets visitors see product pages and add items to their shopping basket.

Below are the further configurable options in cart setting:

1. Disable cart

Disabling the cart in a website means preventing customers from adding products to their shopping cart or making purchases on the site. It can be done for various reasons, such as when a website is temporarily closed for maintenance or when a product is out of stock.

If you want to remove the cart icon from the menu items in the header section, check the disable cart tick-box.

Footer

The footer of a website is the bottom section that usually appears on every page of the website. This can include elements such as copyright notices, contact details, links to important pages, legal disclaimers, and social media icons. The footer can also contain additional navigational elements, menu or call-to-action buttons, such as a "subscribe to the newsletter" button or a "back to top" link.

Below are the further configurable options in footer setting:

1. Logo

A logo in a footer of a website is a graphical element that represents the brand or identity of the website or company, typically placed at the bottom of the webpage.

Logo option allows users to upload their logo using the pen click method:

• Ratio of the logo (Desktop): height: 36.75px; width: 123.3px;
• Ratio of the logo (Mobile) height: 26px; width: 87px;

2. Description

In a website, the description in the footer is a brief text that provides information about the website or its content, typically displayed at the bottom of each page.

Use this option to add a brief description and important details about your business.

3. Bottom Bar Image

A bottom bar image in a website footer is a graphical element that is positioned at the bottom of the webpage, below the main content and above the website footer.

Use this option to upload logos of available payment methods on your website. Keep the following specifications in consideration:

1. Accepted image types: png, jpeg, svg+xml, gif
2. Max image size: 2 MB
3. Aspect ratio: Original

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.

2. 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.

Product

Product setting refers to the product cart aspect ratio of the website.

Product cart aspect ratio on a website refers to the proportional relationship between the width and height of the product image displayed in the shopping cart. It determines how the product image will be scaled to fit into the available space in the cart.

Below are the further configurable options in product setting:

1. Width (in px)

The width in product cart aspect ratio on a website refers to the horizontal measurement of the image or video used to represent a product in a shopping cart or checkout page.

Use this option to modify the width in product cart aspect ratio.

note

The default aspect ratio is 0.8 and can be adjusted by users within the range of 0.6 to 1. However, any value above 1 will be automatically set to the default value of 0.8. This feature applies to listing pages, product pages, and featured collection sections.

2. Height (in px)

Height in product cart aspect ratio refers to the vertical dimension of the image or video that represents a product in an e-commerce website's cart or checkout page.

Use this option to modify the height in product cart aspect ratio.

note

The default aspect ratio is 0.8, but users can customize it within a range of 0.6 to 1. However, any ratio greater than 1 will be automatically set to the default 0.8. This feature applies to the listing pages, product page, and the featured collection section.

3. Container Background colour

Container Background colour in product cart aspect ratio on a website refers to the colour of the background of the box or container that displays the product information, such as the image, title, price, and description, in relation to its size and shape.

Use this option to modify the the container background colour of the Product/Collection/Category/Brand images wherever applicable.

note

This colour will be used as the background colour for the container that displays the Product/Collection/Category/Brand images, wherever it is applicable

4. Fit image to the container

"Fit image to container" in product cart aspect ratio on a website refers to the process of automatically adjusting the size of an image to fit the available space within a designated container, while maintaining its original aspect ratio.

Check the Fit image to the container tick-box if you want the aspect of the image to fit in alignment with the container.