Hossein A.
October 14, 2020

Design Custom Pages in Shopify Using Shogun (No Coding)

Disclosure: This post includes affiliate links, I earn a commission from referrals.

Shopify is one of the most popular e-commerce platforms that is used by many well-known brands. The platform makes it very easy for the average person to set up their own online store without any technical knowledge, hence why millions of people use it to sell products. However, due to its simplicity, your Shopify store design is based on a fixed template, and anything that is custom can only be done with code. But, thanks to Shogun, the app allows you to design custom pages from scratch using a visual designer meaning no coding required. The company has managed to get $12m in VC funding, and over 10k paying customers, with a team of 71 members.

Please note I'm not going to cover how to use Shogun step by step, this post is to show what shogun is all about. If you like to explore the technical details of using Shogun, then check out Shogun's guide.

What is Shogun

Shogun is a drag and drop website builder for eCommerce websites with complete control over the design of the page. In fact, its been used by multi-million dollar Shopify brands like MVMT Watches and K-Swiss and its been listed one of the most popular Shopify apps, so its safe to say the software does something right.

Case Studies

Based on the list of case studies on their website, some companies saw a 20% all the way to 30% higher conversion rates. As a big brand, this a difference of tens of thousands to even hundreds of thousands of dollars. Additionally, they've also managed to save money that would have been spent on expensive developers.

Getting Started

Installation

Head over to the Shopify App Store or click the link here. The app will install right into your Shopify account, so it makes everything convenient without the hassle of dealing importing and exporting between Shopify and the software hosted on different site. Once installed, you'll be provided with a 10 day free trial, and even if you cancel, Shogun will let you keep the pages!

Shogun works best on Google Chrome, and while it works on other browsers, you may experience issues if you're using Firefox or Safari.

Creating a page

On the dashboard, click on "+ Add page" and you'll be presented with the following options:

  • Standard Page
  • Blog Post
  • Product Pages
  • Collection

What are standard pages?

If you've been using Shopify, you'll likely know what the last three options are. However, you may not be familiar with Standard Pages. Simply we use Standard Pages only for designing the homepage or any pages excluding the other three options. You can also use the Standard Pages to design a custom landing page that doesn't have the same structure of a product page which has the images and buttons on top of the page by default.

Header and footer

Its also very important to include your header and footer for every page, but its optional for a landing page. Speaking of header and footer, Shogun will pull the design of them from your published theme, and they can't be edited on Shogun, at least for now until they bring a new update.

Choose a template or start from blank

Additionally, you have the option to start from a blank page OR use a template and then make tweaks on top. If you're a beginner, I highly recommend using a template as a start, this will familiarize you with the features and the design structure you need to set up when it comes to design a page from blank.

Designing a page

Design features

On the right side of the screen, you'll see a column with list of design blocks you can drag and drop into the page, and they have be implemented in the right order, otherwise your design will not work properly especially on mobile devices. The design features are listed based on the following:

  • Structure (Section, columns, slider, etc)
  • Content (image, text, buttons, etc.)
  • Shopify (Product image, price, variant, etc.)
  • Forms
  • Social media
  • Structural blocks (section templates)

As a start I recommend adding the pre-built sections called "Structural blocks".

However if you're designing from blank, you can't just add an image right into the page. Because you have to follow a proper structure: First you must add a Section, and inside that section you can also have a column, table, slider, tabs, or accordion, and then add your content such as images, text, buttons, forms, etc.. Please note that adding columns, table, slider, tabs and accordion are optional, but you must have a section in order to add  content.

Mobile optimization

Once you finished designing on desktop, its important to check your page looks properly set up on all multiple devices. On the top center of the design page, you'll see 4 device icons ranging from desktop to mobile. After desktop, switch to the next option which is laptop view and start adjusting. Note that everything on desktop will update on all devices, and laptop will affect everything under it like tablet and mobile, and tablet will affect only mobile, see the pattern? In a nutshell, any screen you're editing on will affect all screens that fall under it but NOT over.

Check out Shogun's guide to mobile optimization.

Third party software integration

When designing a page on Shogun, some apps will only work on the default Shopify pages and may not work on Shogun's version. Inside shogun, you have the ability to add custom HTML code on your page simply by adding an HTML block and pasting the code inside it. Almost all apps have documentation when it comes to embedding their app on custom pages. Check out Shogun's guide to custom elements.

Conclusion

Its truly amazing what Shogun has came up with, its going to open a lot of doors to advanced users and designers that want to more control over the design of their Shopify store compared to using fixed templates that don't offer a whole lot of design flexibility. Shopify has already done a great job creating a software that makes starting an online business effortless, but since its made very simple so the average person can use it, designers that wanted to put their creativity wasn't very possible until Shogun happened. I hope you found this post helpful, and let me know if there is anything than I can cover in the upcoming topics through the contact page.

Get your 10 day free trial in Shogun!

Go Back