Shogun

Learn to master website creation with these tutorials

Element Tutorials

The Container element is used to structure page sections and create overlays with image and video backgrounds.

How to use the Container Element to style and structure page sections

To place elements side by side, simply drag an element next to another one, or use the Columns element to create horizontal drop zones.

Use Columns to align content and create horizontal dropzones

The accordion element allows you organize your page content with expanding and collapsing sections.

Create expanding and collapsing sections with Accordions

The slider, sometimes known as a carousel, allows you to create scrolling sections on your page.

Create scrolling sections with the Slider Element

The tab element allows you to organize your page by placing content on different tabs.

De-clutter your pages using Tabs

Structure

The Text Element allows for you to add text content right into your page.

Adding text with the Text Element

Introducing Content Animations!  Use our new point-and-click controls to add beautiful interactive animations to your page elements.

Animating your Shogun Content

Learn here how to set up color swatches associated to your product variants in the context of the Shogun Product Box

Setting up Color Swatches

The button element is a great way to drive your CTA's. This video teaches you how to configure, style and position buttons.

How to use and style buttons in Shogun

Use the Container element to create a background, and then overlay text, buttons, and any other elements on top of the background.

How to overlay text, buttons, and other elements on an image or video, using the Container element

Oftentimes might want to round the edges of your buttons to make them 'pill-shaped'.

How do I make rounded buttons?

You can now use Unsplash in order to populate your Shogun image elements!

Adding images using Unsplash

The Add to Cart (ATC) Button lets customers shop your products from any Shogun page.

A Guide to the Add to Cart Button

Display product data fields like Product Image, Product Title, Product Price, and more.

How to display product data on any page using the Product Box

A table can be useful to display data in an organized, structured manner.

Using the Table element

The icon element taps into Font Awesome's open source library of almost 1,000 icons

Use the Icon Element to add icons to your page content

Use the power of Google Maps to show your location with the Map element.

Use the Map element to Embed a Google Map

Drop shadows can give the illusion of elevation to your elements and add depth to your page.

Can I add a shadow to my content?

The countdown timer is great for ecommerce websites looking to create a sense of urgency with sales.

Creating a sense of urgency with the Countdown Timer

Content

The Form Box allows you to build your forms, with form blocks to add the fields that you need.

Building forms with the Form Box Element

Now that you have visitors submitting information on your forms, it's time to export it!

Export Shogun form data

Prevent bot submissions and prevent your forms from fraud or abuse.

Setting up reCAPTCHA for your Shogun forms

Forms

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

How to add images using the Image Element

There are currently two methods of adding a background image to your page, find out more information about which suits you more.

Using an Image Element or a Container Element for a background image

Text, buttons, and other elements can be dragged on top of Images.

How to create a text image overlay

Learn how to use the Video Element to embed a Youtube or Vimeo video into your page.

How to add a Youtube or Vimeo video to a page

Effortlessly organise, manage and edit your images across multiple pages.

Leveraging the Media Library

Media

Add your Instagram feed to any page using the HTML element

Embed your Instagram Feed into a Page

Social

If you are looking to add custom code or integrate a 3rd party app, the HTML element is very useful.

How to embed HTML code in Shogun

Saved styles allow you to create default styles that can be used across your pages to create a consistent style.

Applying Saved Styles to your content

Understanding your Shogun page speed results can help you make informed optimizations for better performance and user experience.

How to Interpret Your Shogun Page Speed Results

Advanced

Shopify

BigCommerce

Partners

Status

Changelog

Find answers and get help from Intercom Support and Community Experts

This site employs cookies and other technologies that we and our third party vendors use to monitor and record personal information about you and your interactions with the site (including content viewed, cursor movements, screen recordings, and chat contents) for the purposes described in our Cookie Policy. By continuing to visit our site, you agree to our {websiteTermsLink}, {privacyPolicyLink} and {cookiePolicyLink}.

This site uses cookies and similar technologies ("cookies") as strictly necessary for site operation. We and our partners also would like to set additional cookies to enable site performance analytics, functionality, advertising and social media features. See our {cookiePolicyLink} for details. You can change your cookie preferences in our Cookie Settings.

We use cookies to make our site work and also for analytics and advertising purposes. You can enable or disable optional cookies as desired. See our {cookiePolicyLink} for more details.

You have the right to opt out of the sale of your personal information. See our {cookiePolicyLink} for more details about how we use your data.

Your Privacy Choices

We use cookies to enhance your experience. You can customize your cookie preferences below. See our {cookiePolicyLink} for more details.

Cookie Settings

Link, Press control-option-right-arrow to exit

Empty Help Center

Uh oh. That page doesn’t exist.

Disappointed

Neutral

Smiley

Thinking...

Searching through sources...

Analyzing...

Tickets submitted through the messenger or by a support agent in your conversation will appear here.