Quick Start Guide

This article will help you get started using Shogun. Quickly learn the basics around Containers, Columns, and Responsiveness.

Updated over a week ago

Welcome aboard! Here is how to get started with Shogun.

We are delighted that you have chosen to work with us, and we look forward to working with you. This article contains some helpful information to help you get started.

First, we have demo videos available to get an overview of our app on your eCommerce platform of choice. Please note: these were recorded on an older version of Shogun; the design may differ but the functionality remains the same.

If you prefer to learn by reading, the rest of this article covers the same topics as our quick start videos.

How to Create a Standard Page

Creating pages is the first step in building custom content for your store using Shogun. In just a few clicks you can create a new page using one of our pre-built templates. No design skills are required! You can also import existing pages or build new pages from scratch.

An animation of how to create a page in Shogun Page Builder

Using the Container Element

The Container element helps you lay the foundation for your page. Containers allow you to structure your content vertically and add background styles to your pages. Stack multiple containers on your page to create movable blocks of content.

An image showing how to add a Container element to your Shogun page

Containers are containing elements, which means that you can add other content and elements inside of them. They're also useful for overlaying elements on top of images or videos.

Arranging Your Content Horizontally with the Columns Element

Columns are great for laying out content side-by-side. For example, if you would like to have text next to an image, Columns will do just that.

Just like the Containers, the Columns Element is a containing element, meaning other Shogun elements can be placed inside each individual column. You can have up to 6 columns per element.

An animation showing how to use the Columns element

Adding Margins and Padding to Your Content

Padding and margins are powerful tools for creating spacing in your content. What are the differences? Padding pushes the content more inside of the element, whereas margins create extra space around the element.

Ensuring Your Pages are Mobile-Friendly

In a world with an increasing number of mobile consumers, ensuring that your pages look good on all screen sizes is important. With this in mind, all Shogun elements were created to be responsive by default. Use the device toggles at the top of the editor to preview your content at common device sizes.

An example of the device icons at the top of the Shogun editor

For further control over your device views, the Visibility settings can be used to hide or show elements based on each screen size.

Viewing Older Versions of Your Pages

Trial and error is a great method for experimenting with new designs that comes into your head. We understand this and this is the reason that we offer a Versions feature. This allows you to roll back your page to any previously saved version of your content. Page versions can be accessed by clicking the 3-dot button in the upper-right corner of the editor.

Recommended Browsers

We find that Shogun works best with Chrome, though it can also work on Firefox and Safari. If you notice any issues, please let us know.

Getting More Help

Everyone needs some help from time to time. We are here for you. We have a number of resources that you can use to get the help that you need, from our thorough Help Center to our highly-rated customer support team.

Our global support team can be reached through the Contact Us section of your Shogun dashboard. Live chat is also available on select plans. You can learn more about that on Shogun's pricing page.

  • In your Shogun dashboard, click the "Need help?" button in the left sidebar

  • In the Shogun editor, help can be found in the lower left and lower right corners of the screen through the search icon (lower-left) and "Need help?" button (lower-right)

Did this answer your question?