Tutorial: Adding Icons and Images to Your Showit Website Template

Adding images and icons to your Showit website is a great way to enhance your design and improve user engagement. Whether you want to upload custom images, use stock photos, or add icons for social media or navigation, this guide will show you how to do it.

Step 1: Uploading an Image to Showit

1. Open your Showit website and navigate to the Canvas where you want to add an image.
2. Click the “+” icon in the left toolbar and select Image.
3. In the right-hand panel, click Select Image to upload a new image or choose one from your Showit media library.
4. Adjust the size, position, and opacity of the image using the Design panel.

Tip: Use high-resolution images for a professional look, but optimize file sizes to keep your site loading fast.

Step 2: Adding Icons to Your Showit Website

Option 1: Uploading Custom Icons (PNG or SVG)

1. Click the “+” icon and select Image to upload an icon in PNG or SVG format.
2. Resize and position the icon using the drag handles or enter precise width/height values in the Design panel.
3. If necessary, apply a color overlay in the right-hand panel to match your site’s branding.

Option 2: Using Font-Based Icons (Via Canva or Third-Party SVGs)

1. Download an SVG version of your desired icon from a site like Flaticon or FontAwesome.
2. Upload it to Showit as an image and place it where needed.
3. Some icons may need background transparency—use a tool like Canva to adjust before uploading.

Step 3: Linking Icons and Images

If you want to link an icon or image to another page, a social profile, or an external site:

1. Select the image or icon in the Canvas.
2. In the right-hand panel, go to the Click Actions section.
3. Choose from the following options:
   • Page: Link to another page on your Showit site.
   • URL: Add an external link (e.g., Instagram, YouTube, shop page).
   • Email: Create a mailto: link for email inquiries.
4. Click Save and test the link in Preview Mode.

Step 4: Optimizing Images for Mobile View

1. Switch to Mobile View in Showit.
2. Resize and reposition images to ensure they look great on smaller screens.
3. If needed, hide certain images on mobile by toggling the visibility in the Layout panel.

Tip: Showit allows you to create separate mobile layouts, so take advantage of this feature for the best user experience.