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. We will discuss the possible ways by which we will add an image to an existing and custom app page.

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.

Salesforce Lightning Add app page to an 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.

App page to add image in Salesforce Lightning

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.

Add Image to an App page in Salesforce

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.

See also  INITCAP Function in Salesforce | Initial Upper Case Formula in Salesforce

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.

Add Image in a Salesforce Lightning App page

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.

Save Image to add in the Salesforce app page

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.

Adding Image to App page in Salesforce

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.

Save Image to add in the Salesforce lightning app page

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.

See also  How to Restrict Users From Switching Salesforce Lightning to Salesforce Classic

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.

Salesforce Lightning App page adding image

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.

Salesforce Add app page to a lightning application

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

Added image to an app page in Salesforce

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 Custom app page in Salesforce Lightning

To add an image to a Custom 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.

Add Image to a new Salesforce 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.

New App page to add Image in Salesforce

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.

Salesforce Lightning New App page to add Image

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.

Salesforce Lightning App Page Image

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.

Salesforce Adding Image to a New 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.

See also  How to Create Queues in Salesforce

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.

Salesforce Add image to a new lightning app page

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

New App page with Image in Salesforce

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: