How to add Image to an App page in Salesforce

This Salesforce tutorial will teach us how to add an image to a Salesforce App page. We will discuss the method of adding an image and GIF to the app page in both editions of Salesforce i.e. Lightning and Classic.

Adding Image to an App page in Salesforce

When adding an image to an app page in Salesforce, we embed an image from the web to the app page with the help of a Rich text editor. Images embedded in the app page are helpful to represent products or labels on the lighting app page.

While working for an organization that uses Salesforce as its CRM tool, I was asked to find a solution by which we can display images on the lighting app page. The company wants to enhance user experience and provide valuable product information to their sales representatives and customers, so they decided to add images to a custom app page within Salesforce.

Add Image to an App page in Salesforce Lightning

To add an image to an app page in Salesforce Lightning, log in to your Salesforce developer account and follow the steps below.

Step-1: On the Setup page of Salesforce Lightning, click on the App launcher, and from there, go to the Sales app.

Step-2: In the Sales app, I have a custom app page. I will add an image to this app page, and for that, I will click on the tab Sales app page.

Step-3: In the Sales app page, click on the Gear icon at the top of the screen, and in the dropdown, select the option Edit Page.

Step-4: As we click on Edit Page, the page will open in the edit mode in the Lightning App Builder, and from here, we will add an image to the app page. To add the image to the app page, we will first add the standard component Rich Text Editor to the App page.

To add the standard component Rich Text Editor to the app page, we will select the rich text editor from the list of standard components and drag it to the region of the app page as shown in the picture below.

Step-5: Now we have added a Rich text editor to the app page, but we can see that there is no option in the rich text editor to add an image. Now, to add an image, we will copy an image link to the rich text editor.

Go to the web search, and from there, copy the web address link of the image.

Step-6: After copying the image from the web, go back to the page, select the rich text editor in the left sidebar, select the rich text editor in the right sidebar, and then right on the text area of the rich text editor and paste the image.

As we paste the image in the rich text editor on the sidebar, the image is also added to the app page as shown in the picture below. To apply this change to the App page, click on the Save button.

Now, we have successfully added an image to a Salesforce Lightning app page.

Read How to Attach Files to the Records in Salesforce

Add an Image to an App page through Lightning App Builder

To add an image to an app page with the help of Lightning App Builder, go to the setup page and follow the steps below.

Step-1: On the Setup page of Salesforce Lightning, go to the Quick Find box, search for App Builder, and from the options in the dropdown, select Lighting App Builder.

Step-2: In the Lightning app builder, we can see a list of app pages, and from here, select the app page to which you have to add an image. In this case, I have selected the Lightning app page named Custom User app page. Click the Edit button on the left side of the app page name.

Step-3: As we click on the Edit button, the selected page will open in the lightning app builder, and here in this step, we will add the image to the chosen app page.

To add an image to the app page, go to the left sidebar in the app builder, and there from the list of standard components, select rich text editor and drag it to the template region of the app page.

Step-4: Till now, we have added rich text to the app page, but there is no option for adding images in the rich text editor. To add the image, go to the web and search for the image you to add on the app page and then right-click on the image and select the option copy image.

Step-5: Now return to the app page, select the rich text editor in the right sidebar, right-click on the text area of a rich text editor, and select the option paste.

Step-6: As we paste the image in the rich text editor, we can see the image is also reflected in the app page. In last, click on the Save button on the upper right side of the screen to apply changes to the Salesforce lightning app page.

Now, we have successfully added an image to an app page in Salesforce with the help of a lightning app builder.

Add Image to a new app page in Salesforce Lightning

To add an image to a new Lightning app page in Salesforce, first go to the setup page of Salesforce Lightning and follow the steps below.

Step-1: On the Setup page of Salesforce Lightning, search for App Builder in the Quick Find box, and from the options in the dropdown, select Lightning App Builder.

Step-2: In the Lighting App Builder, click on the New button to create a new app page.

Step-3: As we click on the New button, we can see we have options to create the lightning pages in the next window. Since creating an app page, we will select the option App Page and click the Next button.

Step-4: In this step, we will enter the name of the new app page under the Label tag. In this case, I have named it Sales Support. After naming the app page, click on the Next button.

Step-5: In this step, we will select the template format for the app page. In this case, I have selected the template format Header and Left Sidebar.

Step-6: In the template region of the app page, we will add standard components from the left-hand sidebar, and we have to simply drag and drop these standard components to the template region. Make sure that you add a Rich Text Editor to the app page because, with the help of it, we will add an image to this app page.

Step-6: In the Rich Text Editor, there is no option to add an image. Now go to the browser and search for the image you want, then right-click on that image and select the option Copy Image.

Step-7: On the App Page, select the Rich Text Editor and on the right side of the screen, right-click on the text area of Rich Text Editor and paste the image you have copied from the web.

Step-8: Now we have added the image to the app page, and to save this page, click the Save button.

As we click on the Save button, the newly created page will be saved in the list of pages in Lightning App builder, and with this, we have successfully created a new app page with an image in Salesforce Lightning.

If you have to activate this, activate this app page, and then you can activate it through the pop-up window that appears after clicking the Save button.

Conclusion

In this tutorial, we have learned about adding an image to an app page in Salesforce Lighting. We came to know about two possible ways by which we can add an image to the Lightning app page in Salesforce Lightning. Later, we learned about adding Images to the new Lightning app page in Salesforce.

You may like to read:

• How to add a Dashboard to an app page in Salesforce
• How to remove App Page from App in Salesforce Lightning