Tutorials

Learn to master website creation with these tutorials

Nick Raushenbush avatar Karl Jones avatar
28 articles in this collection
Written by Nick Raushenbush and Karl Jones
The Basics

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

The Section element is used to structure page sections and create overlays with image and video backgrounds.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

A guide to the Add to Cart button

The Shopify Add to Cart (ATC) Button will add a product to a visitors cart and take the visitor to their cart.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use Columns to align content and create horizontal dropzones

To place elements side by side, simply drag an element next to another one, or use the Columns element to create horizontal drop zones.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Responsiveness: Make your pages great for mobile

Learn responsive design and how to make your pages optimized across devices for mobile, tablet, desktop and widescreen.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

Adding text with the Text Element

The Text Element allows for you to add text content right into your page.
Karl Jones avatar
Written by Karl Jones
Updated this week

How to create a standard page in Shogun

This is how you can create a basic page in Shogun. Try this when you're getting started.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use screen settings to create unique page viewing experiences across devices

Perfect mobile responsiveness by choosing whether an element or section displays on Widescreen, Desktop, Tablet, or Mobile.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

How to make a full width page

If you want to make a page full width, use a Section element and toggle the full width button, or use the landing page style layout.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

How to re-use content using Shogun's Snippets

Snippets allow you to easily re-use an element, section, or even an entire page. You can re-use Snippets across your other Shogun pages.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

Why you should use blocks and how to use them

Blocks are pre-made page sections that you can re-style to taste.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Optimize for SEO: Using Meta Fields

Learn how to use the Meta Title and Meta Description fields for your pages in Shogun, to help optimize for search (SEO).
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How to create custom blog post layouts

This tutorial will teach you how to create and edit custom article content in Shogun.
Karl Jones avatar
Written by Karl Jones
Updated this week
Elements

How to create a text image overlay

The Image element has a great text overlay feature where you can place and style text on top of an image.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How to add a Youtube or Vimeo video to a page

Learn how to use the Video element to embed a Youtube or Vimeo video player into your page.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How to use and style buttons in Shogun

The button element is a great way to drive your CTA's. This video teaches you how to configure, style and position buttons.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Create scrolling sections with the Slider Element

The slider, sometimes known as a carousel, allows you to create scrolling sections on your page.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

De-clutter your pages using Tabs

The tab element allows you to organize your page by placing content on different tabs.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

Create expanding and collapsing sections with Accordions

The accordion element allows you organize your page content with expanding and collapsing sections.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Creating a sense of urgency with the Countdown Timer

The countdown timer is great for ecommerce websites looking to create a sense of urgency with sales.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

Use Social Buttons to link to Facebook, Twitter, Instagram, and more.

The social icon buttons are great for linking to Facebook, Instagram, Twitter, YouTube, Email, and more.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

Use the Map element to Embed a Google Map

Use the power of Google Maps to show your location with the Map element.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use the table element to build perfect boxes

A table can prove useful in a variety of situations, and allow for clean design lines.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

How to add images using the Image Element

The image element can be resized and styled using our Aviary plugin. Click the the Edit Image button after adding the image to the page.
Karl Jones avatar
Written by Karl Jones
Updated this week

Embed your Instagram Feed into a Page

Add your Instagram feed to any page using the Instagram element. Display description and hashtag content or just the images.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

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

Display product data fields like Product Image, Product Title, Product Price, and more.
Karl Jones avatar
Written by Karl Jones
Updated over a week ago

Using the Form Element to receive messages and collect email data from customers

The form element can be used to collect form responses and email addresses from visitors to your Shogun pages.
Karl Jones avatar
Written by Karl Jones
Updated yesterday