> For the complete documentation index, see [llms.txt](https://docs.magecomp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.magecomp.com/stylifi-hyva-template/theme-configuration.md).

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