Learn in a minute

1 Create new page

After you install Shopsta for the first time, you will see similar screen as on screenshot, click “New Theme” to design your first Shopify theme.

Now choose name for your theme and choose if you will import one of premade themes or start with blank. For beginners we recommend to start with premade theme as it’s ready to export or to add more widgets on Front Page and then export. In this guide we will proceed with blank theme

2 Set global styling

Global style can be set anytime and it contains main colors and fonts used sitewide so let’s see how to do it by clicking global theme style cog icon

Pick your colors and fonts and click Save and then click return arrow to go back to design screen. Please note that all those settings are also adjustable in exported theme. When it comes to fonts, we are limited on using Google Fonts while designing in Shopsta, after you export and upload your theme you will be able to use tons of additional fonts offered by Shopify.

3 Add header, sections and footer to the Front Page

Frontpage is main design page and is used to add header, footer and all sections you want on frontpage and reused on other pages. As Shopsta is OS2.0 theme builder, you are able to reuse any section added on Front Page on any other theme page after you export theme and upload to Shopify. Please note that adding more than 5 sections is not recommended as it will drastically decrease conversion rates.

Illustration of adding Header 6 to Front Page:

Now we will add “Hero Left” section under header as shown on image:

Let’s also add “Newsletter 2” section:

Finally, add footer at the bottom of page, I wanted simple footer so i drag and drop “Footer 2” to bottom of page.

To make sure everything is added correctly, click Layers tab and check if header is on top, followed by sections and footer at the bottom. If for example footer is not at the bottom, scroll black layers area to the right and you will see icon for drag which enable you drag and drop reordering of widgets/sections.

As everything is ordered correctly we can click Save and proceed with other pages.

4 Add only required widgets to all other pages

All other pages needs to contain only required widgets, for example:

• Single product page requires Product Page widget
• Collections page requires Collections Page widget
• Blog page requires Blog Page widget
• Follow same logic for all other pages

Example of adding required “Product Page” widget to Product page:

Header and footer will be visible on all pages for presentation purpose but won’t be editable.
To edit header and footer please switch back to Frontpage.