Get started with Page Studio
Welcome to the Page Studio app!
Page Studio allows you to create fully formatted and customizable content pages on your Shopify Store.
- Page Studio Dashboard
- Edit an existing page
- Create a new page
- Customize Section and Box layouts
- Add content to your page
Page Studio Dashboard
Upon installing the app, you will be directed to the app's dashboard. This is where you will manage your pages. We already bring in your existing Shopify pages, so you can edit them directly from the app.
There will be 5 icons next to each page listed on your dashboard:
- The gear icon will open up your page's settings.
- The pencil icon allows you go to the page editor to customize your page's content.
- The eye icon will let you view your page directly on your live store.
- The page icon will let you duplicate your page.
- The trash icon will let you delete your page. [NOTE: deleting your page on Page Studio will delete it from your Shopify store]
Clicking on the gear icon opens up the page's settings. Here, you can control the various aspects of the page, just like Shopify's native page editor.
Edit an existing page
To start customizing and creating awesome pages, you can either click on the pencil icon next to one of your existing pages, or click on the Add Page button near the top right corner of the page.
If you click on the pencil icon on a page that you've already created on your Shopify store, it will bring you straight to the Page Editor.
At the top of the screen, you'll see:
- an arrow icon that will take you back to the Page Studio Dashboard.
- the Hide Menu button, that hides the sidebar menu on the right hand side of the page so that you can see your page in its entirety.
- the View button to view how your page will look on your live store. This will only appear when the page's changes have been saved.
- the Preview Draft button will let you see how the page will look even if it is not published on your Shopify store.
- the Save button for saving whatever changes you make to your page. Hitting this button will allow you to View your page afterwards.
Create a new page
In this example, we will start off by adding a page. You would do so by clicking on the Add Page button at the top right side of your Page Studio dashboard.
To start your page off, you will be prompted to choose a name for your page.
Next, you can select from some Page Templates that you can work off of or you can select Sections that you can use to start from scratch. My Sections will hold any sections you create and save for use on any other pages.
Sections act like canvases for your page where you can add content to. You can add as many as you need.
Once you select a section or page template, you will be taken to the Page Editor.
If you'd like to add a new section to your page, click on the New Section button (located within the side-bar menu's Page tab).
Customize Section and Box layouts
If you'd like to edit the vertical position or height of your section, you click on the gear icon that appears at the top left corner of each section when you hover over them, as shown below.
Within your page, you'll see that your section may have multiple boxes, which are simply horizontal areas that you can add content to. In the example image below, you'll see that the section used has three boxes.
If you'd like to edit the width or formatting of content within the boxes, you can click on the gear icon that appears at the top of each box when you hover over it.
Add content to your page
Within each of these boxes, you can add content blocks within them. You can select the different block types using the drop down within the Blocks tab on the sidebar menu. Then, you can drag the one you want onto the page.
Many of the content blocks that you can add to your pages will contain a text or button. If you click or highlight any text or buttons on your page editor, you will see a black toolbar appear at the top of your editor:
This toolbar will allow you to edit the block content in various ways, such as changing the font, adding a hyperlink, changing the color of your block, and more.
Each content block will have a series of four buttons. The first will let you drag and reposition the block, the second icon will open up the code editor for that specific block, the third icon will let you duplicate a block, and the fourth icon will delete the block. Certain content blocks will replace the code editor icon with a gear icon, allowing you to access some additional settings for the block.
Putting It All Together
- Sections will act as a canvas where you can organize content from the top to the bottom of your pages
- Boxes will be areas within your sections where you can organize content horizontally
- Blocks will be the actual features that you add to your boxes, such as text, images, videos, buttons, forms, etc.
Once you've completed designing your page, click on the Save button at the top of the screen.
To ensure your page is published, live, and is viewable on your Shopify store, check out our guide here: Click me!
For additional features and assistance, check out the Page Studio help docs, or contact our customer support at firstname.lastname@example.org.
And that's it - you're all set to start creating beautiful pages for your Shopify store! *High Five*