Skip to main content
All CollectionsElement TutorialsMedia
How to add images using the Image Element
How to add images using the Image Element

Tips on how to add styles and effects to images within the Shogun editor.

Updated over 2 months ago

Adding images to your Shogun pages is super simple with the Image element. Images can be accessed through the Elements library on the left side of the editor.

How to add your images to your Shogun pages

Uploading a new image to Shogun

Uploading a new image into Shogun is super easy:

Simply drop an Image Element onto your page, click Select Image and choose your image from any of the 3 tabs (Shogun, Shopify or Unsplash) in the Media Library:
​

Dragging the image element onto the screen and selecting an image to show


You can learn more about our Media Library by reviewing the article linked below:
​Leveraging the Media Library


The image element supports the following file formats: JPG, static PNG, WebP, SVG*, and animated GIFs.

*Note: attempting to use the "edit image" option with an SVG will change them into a non-vector format. Images should be adjusted before uploading to avoid this.

Additionally, there is also a Select Image option in the sidebar - for times that you may have elements covering the button on top of the Image Element.

The locations of the Select Image button

It is important to note that, any images larger than 3000px wide will be scaled down as per the documentation here:

If your image thumbnail is broken and it doesn't add to the image element, please note that the upload process can time out if the image is > 5MB. Scaling the image down to a more appropriate size in a third-party image editor before attempting to reupload it should resolve the issue.

Selecting images previously uploaded to Shogun

The ​Leveraging the Media Library article provides step-by-step instructions on how to select images that have already been uploaded.

How to edit your images in Shogun

Shogun has a built-in image editor that can help you do just that!

You can access the image editor by clicking on the Image element, and selecting Edit Image:

The location of the Edit Image button in the right sidebar

Edit Image Details

Each image can now have its name and Alt text updated by clicking Edit Image Details:

The location of the Edit Image Details button in the right sidebar

Once clicked the single page view of the image is opened where these details can be adjusted:

Single page where Image details can be edited

How to crop an image in Shogun

Cropping in the Shogun image editor is really easy! Simply drag the crop box over the area that you would like to crop and click 'save' - done!

Rotating an image

How to resize an image in Shogun

You can use the Shogun image editor to resize the images on your Shogun page. To get started hit 'edit image'.

Resizing an image

Clicking on the lock icon will remove the editors ability to keep the aspect ratio of the image. Disabling this will give you more creative freedom.

How to rotate an image in Shogun

Rotating images is super simple! You can choose to rotate it clockwise, or anticlockwise by 45-degree increments!

Rotating an image.

How to display a different image on hover

Sometimes, you would like to let your customers see an alternative image when they hover over an image, maybe you want to showcase more of your product! This can be done using the 'alternate image' option within Shogun.

The location of the Add Hover Image button in the right sidebar

*Note: Both images need to be the same dimensions in order for this effect to be effective.

How to add alt text to your images

Adding alternate text to your images is important for search engine optimization and screen readers.

Clicking on the "View" button in the Quick Actions Menu opens in the image in a single page.

The Image name and Alt text can be updated in this view:

Single page where Image details can be edited

Note: background images within the Container Element do not have alt tags as they are decorative visuals added through CSS styles. They are not added into the content of the page and therefore are not detected by search engines or screen readers.

Setting an Image's Aspect Ratio

The Aspect ratio field can be used to adjust the height and width of an image uploaded to the Shogun image element.

You can locate this field in the Right sidebar under the Dimensions tab, once the image is clicked in the editor:

The location of the Aspect ratio field.

By default, Shogun will read an image's aspect ratio, and input it in the controls, which when adjusted will change the aspect ratio of the image. Custom values can be reset using the 'auto' button.

Leveraging Responsive Images

You can enable this setting in order to leverage a default responsive image configuration to vary the image size downloaded based on the user's device.

The Responsive image switch is located in the right sidebar under the Main tab:

The location of the Responsive Image button.

This improves performance on mobile devices by only downloading images of a resolution that is perceivable on that screen size.

How to create rounded images

The Border radius style setting can be used to create rounded or circle images within the editor.

How to enable an image lightbox

In the Image element, you can set the image to open in a lightbox. This means that when a user clicks on one of your images on your page, a larger view of the image will display over the content in the form of a popup.

The Image is clickable switch is located in the right sidebar under the Main tab:

Note: Gif files can't be used in conjunction with the 'Open Lightbox' feature.

Did this answer your question?