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 Space 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 HTML button to view the page's code
- 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 at the top right side of your Page Studio dashboard.
To start, you will be prompted to choose a name for your page. Upon completing the last step, you will be prompted to select a Space:
Spaces act like canvases for your page. Once you select a space, you will be taken to the Page Editor.
If you'd like to add a new space to your page, click on the New Space button (located at the top right of the page).
Customize Space and Box layouts
If you'd like to edit the vertical position or height of your space, you click on the gear icon that appears at the top left corner of each space when you hover over them, as shown below.
Within your page, you'll see that your space 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 space used has three boxes.
If you'd like to edit the width or background content of your boxes, you would click on the gear icon that appears at the bottom 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 in right-hand corner, then drag the one you want into 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 its own set of buttons. The green icon will allow you to drag and reposition the block, the blue icon will open up the code editor for that specific block, the black icon will let you duplicate a block, and the red icon will delete the block.
Putting It All Together
- Spaces 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 spaces 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 your designing your page, click on the Save button at the top of the screen. If you'd like the see the updatedpage on your storefront, click on the View button.
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*