Get started with Blog Studio

Welcome to the Blog Studio app!

Blog Studio allows you to create fully formatted and customizable content articles on your Shopify Store.

Contents

Blog Studio Dashboard

Upon installing the app, you will be directed to the app's dashboard. This is where you will manage your articles. We already bring in your existing Shopify articles, so you can edit them directly from the app. 

There will be 5 icons next to each article listed on your dashboard:

  • The gear icon will open up your article's settings.
  • The pencil icon allows you go to the blog editor to customize your article's content.
  • The eye icon will let you view your article directly on your live store.
  • The duplicate icon will let you duplicate your article.
  • The trash icon will let you delete your article.

Note: Deleting your article on Blog Studio will delete it from your Shopify store.

Clicking on the gear icon opens up the article's settings. Here, you can control the various aspects of the article. You can change the author of the article, add a title and description to see how this page might appear in a search engine listing, and change the URL Handle. You can also add an excerpt which is a summary of the article that appears on your home page or blog.

Create a new article

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

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

To start your article off, you will be prompted to add a title, select an author, and choose a blog.

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 articles.

Sections act like canvases for your article 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 Article Editor.

Edit an existing article

Articles already created on your store appear in the Blog Studio dashboard. To edit these articles, click on the pencil icon next to the title of the article.

Using the Article Editor

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

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 article.
  • a button: Change the Typography of your article. You can choose to replace all sections' typography style or keep sections' specific typography style.
  • Left arrow: Undo your most recent change on your article.
  • Right arrow: Redo your most recent change on your article.
  • < > icon: Adjust your article's HTML

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

  • The Back button (←) will let you go back to the Blog Studio dashboard.
  • The View button will let you see how your article will look on your live store. This will only appear after the article has been saved.
  • The Preview Draft button will let you see how the article 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 article.
  • The Save button for saving whatever changes you make to your article. Hitting this button will allow you to view your article 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 article, 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 article

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 article.

Many of the content blocks that you can add to your articles will contain a text or button. If you click or highlight any text or buttons on your article 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 article

After adding all the content for your article, 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 article 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 articles
  • 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 article, click on the Save button at the top of the screen. 

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

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

Related Articles