# Customize Landing Page

The **Landing Page section** allows you to customize the landing page of the affiliate portal. This page provides important information about the affiliate program and includes links to the signup and login pages.

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FeR4r4cfimVYNid348T2U%2Fimage.png?alt=media&#x26;token=c2120ccb-b219-4990-af56-77c6a6f19205" alt=""><figcaption><p>Landing Page</p></figcaption></figure>

To customize the landing page of the affiliate portal, go to the **Landing page** section of the **Look and Feel** tab in the GoAffPro admin panel.&#x20;

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FEz5ElLpyaPTCyKP9XNr7%2Fimage.png?alt=media&#x26;token=ef0f2a4b-17e7-4a1e-bb03-bd10958ce130" alt=""><figcaption><p>Look and Feel > Landing page</p></figcaption></figure>

### **Top Navigation**

The **Top Navigation** section allows you to customize the navigation bar's background color, logo alignment, and logo link.

Here, you can click on the **color wheel** to set the background color for the navigation bar.&#x20;

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FoW3LqMQMl90yuZoH2gu5%2FScreenshot%202024-10-28%20180520.png?alt=media&#x26;token=d7b1a2f3-df28-407b-8bf3-babf678d279c" alt=""><figcaption><p>Navbar Background Color</p></figcaption></figure>

Next, you can set the logo alignment to the left, right, or center of the navigation bar.

There is also the option to set the logo link. You can change the URL that opens when the logo is clicked.

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FxEFcZt10jhz2chc34QwI%2FScreenshot%202024-10-28%20172811.png?alt=media&#x26;token=6f31e941-62d9-4aeb-97a5-d1d1d4fa4500" alt=""><figcaption><p>Logo Alignment &#x26; Link</p></figcaption></figure>

### Top Banner

The **Top Banner** section can be used to set a banner for the landing page and set the text displayed in this section.&#x20;

The banner option can be used to upload a banner. Here, click on **Choose File** and upload a banner.&#x20;

{% hint style="info" %}
Banner dimensions: 16:9 Ratio (Optimal Results)

The banner has no fixed dimensions, as it adapts to various devices like mobile phones, tablets, and laptops. It should be used as a background image without any text.
{% endhint %}

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FaPCfIQF3oH02AzQ2gm5h%2FScreenshot%202024-10-28%201727492.png?alt=media&#x26;token=8559dc1b-073c-4cb3-a9dd-9de37cc4c2bb" alt=""><figcaption><p>Upload banner</p></figcaption></figure>

You also have the option to use the banner image as the background and set the text color and alignment.&#x20;

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FXPIzPPkLZwDKUyMjIatA%2FScreenshot%202024-10-28%201821593.png?alt=media&#x26;token=c0318f4b-891f-46a9-9abd-27097c13e957" alt=""><figcaption><p>Banner options</p></figcaption></figure>

You can customize the super text, hero text, subtext, and button text that will be displayed on this section of the landing page.

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FyFIzkJFfcXNVpUIOL6IO%2FScreenshot%202024-10-28%201727493.png?alt=media&#x26;token=d052baf2-aa5b-40a1-a677-ab3a2ca54c74" alt=""><figcaption><p>Banner text</p></figcaption></figure>

### Card group

The **Card Group** section is used to display the information about your affiliate program such as the benefits of becoming an affiliate, promoting products to their followers, and earning a commission on every sale made using their referral.

Here, you can customize the card group title, upload the thumbnail, and edit the text displayed in each section.&#x20;

{% hint style="info" %}
The recommended dimensions for the card group icons are 64x64 pixels.
{% endhint %}

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FUcbm29S7iWcShgLM1R5B%2FScreenshot%202024-10-28%20173219.png?alt=media&#x26;token=d7b14fec-c21a-4781-ad4f-07adfff99a65" alt=""><figcaption><p>Card group</p></figcaption></figure>

### Bottom Button

The **Bottom Button** section can be used to edit the bottom button title in the affiliate portal landing page. This button directs the user to the signup page of the affiliate portal.

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2FaeslgNR7CNnz1UvQOmkS%2FScreenshot%202024-10-28%20172829.png?alt=media&#x26;token=b8e504a2-d8a3-443f-9b76-e136b26a2e0c" alt=""><figcaption><p>Button Button</p></figcaption></figure>

### Footer&#x20;

The **Footer** section consists of links that direct to other pages of the affiliate portal. These include the Commissions, Tools, Reporting pages, the Contact Us page, the Terms & Conditions page, and the Privacy Policy page.&#x20;

Here, you can set the heading for the footer columns and edit the links.&#x20;

<figure><img src="https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdPzLtyP46oY7cyXnkw%2Fuploads%2Ft1jrKnapzxdOW2slTKUd%2FScreenshot%202024-10-28%20172925.png?alt=media&#x26;token=41c19f49-469e-4213-b87b-845afa8c030d" alt=""><figcaption><p>Footer</p></figcaption></figure>

Also, if you want to add more links to the footer, you can check the following guide:

{% content-ref url="advanced-customization/add-links-to-footer-of-affiliate-portal" %}
[add-links-to-footer-of-affiliate-portal](https://docs.goaffpro.com/affiliate-portal-customization/advanced-customization/add-links-to-footer-of-affiliate-portal)
{% endcontent-ref %}

{% embed url="<https://youtu.be/Se_0WdbtVeE>" %}
Landing Page
{% endembed %}