# Theme Configuration

Now, go to **Stores -> Configuration -> MageComp -> Theme Configuration**.

### General Settings

<figure><img src="/files/jqQ6zQL5xDdwH6UQV20B" alt=""><figcaption></figcaption></figure>

* **Scroll Bottom to Top -** Adds an arrow at the bottom right to directly reach the top of the page.
* **Newsletter Popup -** Enable the newsletter popup.
* **Ajax Add To Cart -** Show Ajax add to cart button on all product sliders, product detail pages, and product listing pages.
* **Sidebar Recently Ordered -** Show recently ordered items in the sidebar.
* **Mobile View Sticky Add to Cart -** Include a sticky add to cart button for mobile view.

### Header

<figure><img src="/files/HWMomHUTUEJaZRXKD9ab" alt=""><figcaption></figcaption></figure>

* **Sticky Header -** Keeps the header sticky even if the user scrolls.
* **Show Header Top Notification -** Adds the notification bar at the top. Choose the notification type as text or CMS block.
* **Text Content/CMS Block -** Enter the notification text or select the CMS block.
* **Show Parent Category In Menu Items -** Display parent category in the main menu items.

### Homepage Banner Slider Settings

<figure><img src="/files/8S0OdmHcwqXYQJVkDRKd" alt=""><figcaption></figcaption></figure>

* **Is Autoplay -** Enable homepage slider autoplay.
* **Autoplay Interval -** Set the time interval for autoplay.
* **Show Dots -** Show dots for homepage slider.
* **Show Arrows -** Show arrows for homepage slider.

### Page Layout

<figure><img src="/files/4MUQuai6BVb770YtQglM" alt=""><figcaption></figcaption></figure>

* **Container Width -** Set the width of the container.
* **Container Desktop Padding -** Set the padding for the desktop.
* **Container Mobile Padding -** Set the padding for mobile.
* **Button Radius -** Set the radius of the button.

### Colors

#### Header Colors

<figure><img src="/files/bFppscBTqX1Mw8ZB1p5x" alt=""><figcaption></figcaption></figure>

* **Header Background Color -** Set the background color for the header.
* **Notification Background Color -** Set the background color for the notification.
* **Notification Text Color -** Set the text color for the notification.
* **Main Menu Background Color -** Set the background color for the main menu.
* **Menu Items Hover Background Color -** Set the background color when hovering menu items.
* **Menu Text Color -** Set the text color for the menu.
* **Menu Hover Text Color -** Set the text color when hovering menu items.

#### Theme Colors

<figure><img src="/files/0UnRhOaxqiSKFsOzjsh4" alt=""><figcaption></figcaption></figure>

* **Theme Color -** Set the color of the overall store theme.
* **Theme Secondary Color -** Set the secondary color of the theme.
* **Section Default Background Color -** Set the default background color of the section.
* **Section Light Background Color -** Set the light background color of the section.
* **Section Dark Background Color -** Set the dark background color of the section.
* **Rating Star Filled Color -** Set the filled star color for ratings.
* **Rating Star Empty Color -** Set the empty star color for ratings.

#### Text

<figure><img src="/files/oZvb3CLW61aSdSFEtcLb" alt=""><figcaption></figcaption></figure>

* **Heading Text Color -** Set the text color for headings.
* **Text Default Color -** Set the default text color.
* **Text Light Color -** Set the light text color.
* **Text Dark Color -** Set the dark text color.
* **Rating Text Color -** Set the text color for ratings.

#### Button Primary

<figure><img src="/files/Vru6sMzXsQf7zzHpt8DL" alt=""><figcaption></figcaption></figure>

* **Background Color -** Set the background color of primary buttons.
* **Background Hover Color -** Set the background color when hovering primary buttons.
* **Text Color -** Set the text color of primary buttons.
* **Text Hover Color -** Set the text color when hovering primary buttons.
* **Border Color -** Set the border color of primary buttons.
* **Border Hover Color -** Set the border color when hovering primary buttons.

#### Button Secondary

<figure><img src="/files/EwfvKMthnGi0aCKk4A2W" alt=""><figcaption></figcaption></figure>

* **Background Color -** Set the background color of secondary buttons.
* **Background Hover Color -** Set the background color when hovering secondary buttons.
* **Text Color -** Set the text color of secondary buttons.
* **Text Hover Color -** Set the text color when hovering secondary buttons.
* **Border Color -** Set the border color of secondary buttons.
* **Border Hover Color -** Set the border color when hovering secondary buttons.

#### Borders

<figure><img src="/files/AxCjDJoLBv95OMoERlSv" alt=""><figcaption></figcaption></figure>

* **Border Default Color -** Set the default color of borders.
* **Border Light Color -** Set the light color of borders.
* **Border Dark Color -** Set the dark color of borders.

#### Footer

<figure><img src="/files/Mzt8UYxSIV9qcjAWrSup" alt=""><figcaption></figcaption></figure>

* **Footer Background Color -** Set the background color of the footer.
* **Footer Heading Color -** Set the heading color of the footer.
* **Footer Text Color -** Set the text color of the footer.
* **Happy to Help Block -** Enable Happy to help block in the footer.
* **Footer Usps Block -** Show unique selling points in the footer.

### Customer Account Link Manager

<figure><img src="/files/YWZasGj1olL9Kc8BXeA0" alt=""><figcaption></figcaption></figure>

* **Customer Account Links Manager -** Enable customer account links manager.
* **List Type -** Select your preferred list type, either Inclusive or Exclusive.

Inclusive List: If you select the inclusive list type, then an extension will only display those links that are selected by you from the multi-select box.

Exclusive List: If you select the exclusive list type, then an extension will display links that are not selected by you.

* **Select Links -** Make a selection of links that you want to display under the hood of the customer account section, depending on your list type.

### Product Page

<figure><img src="/files/KETeTaBnUxivLXtdwaDo" alt=""><figcaption></figcaption></figure>

* **Show Product Review -** Display product reviews.
* **Show Stock Info -** Display whether the product is in stock or out of stock.
* **Show Product Sku -** Display product SKU.
* **Show Add To Wishlist -** Display Add to Wishlist icon.
* **Show Add To Compare -** Display Comparison icon.
* **Gallery Layout -** Set the product image gallery layout as horizontal or vertical.

### Custom Styles

<figure><img src="/files/NMHSbgxAHiuF4yOEzZVt" alt=""><figcaption></figcaption></figure>

* **Custom CSS -** Enter your custom CSS styles here.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.magecomp.com/stylifi-hyva-template/theme-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.