> 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2Fk3vPJ1vCCvhSpm7WbkwB%2FGeneral%20Settings.png?alt=media&amp;token=d8e4eacc-89f0-4c10-ac6d-869f4d9c9592" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2F1IIDa8kPQCGtKfvEp7PX%2FHeader.png?alt=media&amp;token=cdd5e697-7064-4986-9a06-6dcc13006251" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FwcHx1NcjW2VBiFiZpLkR%2FHomepage%20Banner%20Slider%20Settings.png?alt=media&amp;token=932e0d90-b5e5-4bd5-b29e-e01f7b43389f" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FGSW3TWkks4kidg7rZQ8d%2FPage%20Layout.png?alt=media&amp;token=bdb78423-578e-4fc7-a2d9-a77d24d49743" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FGpKgcnGgTgaN0ZUNZ5bj%2FHeader%20Colors.png?alt=media&amp;token=0ad0e614-8cdf-44ee-9819-75fd78e7e4e8" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2F3T5rvJEeWDZt6QGtbFRv%2FTheme%20Colors.png?alt=media&amp;token=0f0c9e45-bef1-4a0a-9316-b758a7cf7e01" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FabBEAkPGCe4OBmX8ePiE%2FText%20Colors.png?alt=media&amp;token=74711ef3-44f5-4c72-a7e8-1ba4aa87ed72" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2F7Cedm9DYvPRiY6tX2pva%2FButton%20Primary%20Colors.png?alt=media&amp;token=591f5b25-7c28-4353-b53e-4a212f623734" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2F3ciAHo74VSRIoo8qbhOu%2FButton%20Secondary%20Colors.png?alt=media&amp;token=2e12bfd2-a4d1-4416-a023-d2b1914c2ce5" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FI72fcnbtKZMCuM3AZpdM%2FBorder%20Colors.png?alt=media&amp;token=bb673b8b-ed77-4a83-bc8e-6014a95db9d7" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FshNiX36jsTrGkIaHEslU%2FFooter%20Colors.png?alt=media&amp;token=4d9a43c7-372f-48ba-bdce-1bf852d8eab5" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FGCe9bCd72m7ibBg1ktQX%2FCustomer%20Account%20Link%20Manager.png?alt=media&amp;token=85c1fce6-18d8-4f67-ab7e-de34b937f3ae" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2Fu2OZ1loYBIH0qVHEILmf%2FProduct%20Page.png?alt=media&amp;token=9a474e46-c08e-47ea-ae4f-898ae4923ea3" 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="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FDKGsQoa8xWjcjgXsN9Su%2FCustom%20Styles.png?alt=media&amp;token=235050ec-cfdf-4b0a-ae05-75e9189ffe0e" alt=""><figcaption></figcaption></figure>

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