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.

Shogun is currently rolling out a new version of our Image Element, with adjusted controls. The Image V3 element is currently in beta, but it will be deployed to all our users over the coming months.

You can tell if your site is currently using Image V2 or V3 with the following methods:

The easiest way to tell is by checking the Element Icon - if you see the "New" badge next to your Image Element, it's been switched to V3

The V2 Image element doesn't change appearance if an Image is set in the Image Element, and the Image Position controls are just underneath the Image Details controls.

The V3 Image element displays the Image Source at the top of the Control Panel on the right: If an image is selected it will show its name and dimensions, and the Performance section is included in a sub-box

The instructions below have been split into instructions for the V2 Image Element and the V3 Image element. Please check the relevant section!

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:
​

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.

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

What is the resolution of images uploaded in Shogun?

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.

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

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:

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

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

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!

You can use the Shogun image editor to resize the images on your Shogun page. To get started hit 'edit 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.

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

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.

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

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:

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.

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:

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.

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:

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

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

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.

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:
​

​
The Shogun will display images that have been previously uploaded to your Media Library via Shogun. The Shopify Tab (for Shopify Users only) will display images uploaded via Shopify. The Unsplash tab gives you access to a library of licensed stock images; just enter any query into the Unsplash tab to fetch relevant images.

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.

To change the image that is currently displayed in an Image Element, click the "X" button to the right of the image details and select a new image as per the steps above.

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

What is the resolution of images uploaded in Shogun?

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.

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

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

Clicking on the Image Details button will bring up the Details Editor, where you can update the image's file name, add Alt Text, tag the image to be more easily found in your Media Library and see what pages it appears on.

If your plan has access to automatic Alternative Text generation then this alt-text will be pre-populated for you to review and save - if your plan does not, or if you want to edit this, you can do so by typing in this box.

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.

Certain features, such as tagging or automatic Alt Text generation, may require certain plans to use. Check our Pricing Page for more details.

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!

You can use the Shogun image editor to resize the images on your Shogun page. To get started hit 'edit 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. Note: If you want to edit the aspect ratio of an image, you may also find it useful to use the Aspect Ratio dropdown in the Image Settings.

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

By setting a Hover Image, you can cause the image to change when the user's cursor moves over it. Just click the "Add Hover Image" button and use the same method as setting the main image to select a Hover Image.

If the "Image is clickable" toggle is switched to "On", you will be given the choice between setting the image as a Link or a Lightbox.

If Open Link is selected, you can then set a URL for the image to redirect the user to. You can also choose if this redirects their current tab or opens a new one.

If Open Lightbox is selected, when the image is clicked it will open a version of the image in a "lightbox" popup for the user to view.

Note: Gif files and other animated image types can't be used in conjunction with the 'Open Lightbox' feature.

The Performance controls allow you to adjust how your image is delivered on various devices, to ensure your page always loads and looks its best.

Shogun automatically converts your images into a WebP format and adjusts their compression for optimal load times. If you are familiar with Photoshop's Save for Web feature, the default setting could be compared to "saving for Web" at 80%.

With a plan that offers image quality controls, images can be compared to saving as a standard jpeg at Maximum quality, if you so choose. These images focus on quality over file size, so they are most beneficial and noticeable to users on high-definition/retina displays.

Note that control over Image Quality is only available on certain plans - please check our Pricing page for further details.

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 in the Main tab, in the Performance subcategory.

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

When using the Automatic Loading setting, Images that are within the first 700px of the page will default to Eager Loading. The rest will benefit from the Lazy Loading feature.

Images set to Lazy loading will only be fetched and loaded just before they are brought into the user's viewport. This helps improve page load times, as images are loaded on a case-by-case basis rather than all at the same time.

An image set to Eager Loading will be loaded immediately when the page is opened by a user. Note that having a lot of images set to Eager Loading can negativley impact page load times, and we recommend using Lazy Loading when possible.

Lazy Loading can also be applied to certain other elements: You can find more details about Lazy Loading in our Help Center, here.

In the Dimensions dropdown, the Height, Min Height and Max Width values can be set, as well as the Image Fit and Aspect Ratio. Adjusting the Height, Max Width and Image Fit for an image for different screen sizes using our Responsive Editing feature means you can easily use the same Image element for multiple different views, and customize their dimensions to fit perfectly.

The Height value defaults to blank. If a value is entered, it will set an absolute value for this Image element - for example if you set a Height of 500px this Image will always appear as 500px tall, even if it is smaller or taller than this value. This works well when combined with the Cover Image Fit.

The Min Height value also defaults to blank. If a value is entered, this Image Element will always be at least that tall, but will expand to be taller if space allows.

The Max Width value defaults to the Width dimension of the image you uploaded. You can adjust this to help control the Aspect Ratio of your image or to prevent it from becoming too large on wider screens.

The Image element defaults to Cover, which means that if the image is larger than the container its been place inside of, the image will automatically crop to fit the container. This is ideal for making images responsive on different sized screens and avoiding unwanted "Blank space".

While in Cover mode, you can adjust the Zoom and Image Position of the viewport to make sure that the correct details are always in frame.

If its important that the entire image is always shown, you can switch to Contain, which will resize the image to fit within the boundaries of its current container and center within it.

An image can also be set to Stretch, which means it will deform to match the dimensions of its current container even if they are a different aspect ratio to the current image.

Shogun automatically calculates the Aspect Ratio for your image, but if you want to change this there are several commonly used Aspect Ratios that can be selected in the dropdown box. You can also use the Custom option to set your own custom Aspect Ratio. This pairs well with the Cover Image Fit for making images responsive, ensuring all your images on a page match dimensions, or for making custom banners.

The Border radius style setting found under the Default Style tab can be used to create rounded or circle images within the editor.