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.

Contents

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 duplicate 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. You can add a title and description to see how this page might appear in a search engine listing, and change the URL Handle.

Create a new page

In this section, let's start by creating a new page. You would do so by clicking on the Add Page button at the top right side of your Page Studio dashboard.

If you already have existing pages appearing on the dashboard, please click here to skip to editing an existing page. Otherwise, continue reading the rest of this section.

To start your page off, you will be prompted to add a title to your page.

Next, 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, you will be taken to the Page Editor.

Edit an existing page

Pages already created on your store appear in the Page Studio dashboard. To edit these pages, click on the pencil icon next to the title of the page.

Using the Page Editor

After creating a new page or editing an existing page, the Page Editor opens and you will be able to add and edit content to your page.

Once you click on a section that you'd like to start with, using the image below on the left hand side, you'll see the following tools:

  • + icon: Add new or more sections.
  • Content blocks icon: Drag and drop hundreds of content blocks onto your page.
  • a button: Change the Typography of your page. You can choose to replace all sections' typography style or keep sections' specific typography style.
  • Left arrow: Undo your most recent change on your page.
  • Right arrow: Redo your most recent change on your page.
  • < > icon: Adjust your page's HTML

At the top of the screen, you'll see the following buttons:

  • The Back button (←) will let you go back to the Page Studio dashboard.
  • The View button will let you see how your page will look on your live store. This will only appear after the page has been saved.
  • The Preview Draft button will let you see how the page will look even if it is not published on your store.
  • The Update Theme Layout button will refresh the editor and pull in any latest changes made to the theme layout. Before clicking this button, save any changes you have made to your page.
  • The Save button for saving whatever changes you make to your page. Hitting this button will allow you to view your page afterwards.

Customize Section and Box layouts

If you'd like to edit the vertical position, height of your section, or add a click-to-scroll arrow, you click on the wrench icon (Section Settings) that appears at the right hand side of the section.

Within your page, you'll see that your section may have multiple boxes, which are simply horizontal areas that you can add content to. 

If you'd like to edit the width, change the background color, or formatting of content within the boxes, you can click on the wrench icon (Box Settings) that appears at the bottom of the section.

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 content block icon on the left hand side, under the + icon. 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 text 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 buttons when clicking on it. The + sign icons will add more content blocks, the 3-dot icons will contain more actions, the crossed arrows icon will let you drag and reposition the block, and then there is the x icons which will delete the block.

Format content on your page

After adding all the content for your page, you can now explore some of the formatting tools our app offers.

CSS Formatting Menu

If you are familiar with CSS concepts, then the formatting menu should be very easy to use. This provides an approachable way to apply CSS without writing any code. You will be able to adjust aspects related to the styling of your content.

Clicking on a content block, hitting the 3-dot icon, and selecting settings will open this menu. We provide a more in-depth guide on how to use this menu here: Click here!

Grid Editor

The Grid Editor appears after saving the page and refreshing the dashboard. You can add more rows and columns to content blocks with this feature.

Take a look at this guide with detailed steps on how to use this feature: Click here!

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, 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 here!

For additional features and assistance, check out the Page Studio help docs, or contact our customer support at contact@theshoppad.com.

And that's it - you're all set to start creating beautiful pages for your Shopify store! *High Five* 🙌

Related Articles