All Collections
Shopify FAQ
Create Shopify Theme Sections Using Page Builder
Create Shopify Theme Sections Using Page Builder
Create a section once in Page Builder and add it to multiple pages in your store using Shopify's Theme Editor
E
Written by Edward Savoy
Updated over a week ago

Have you ever wanted to create custom content once in PB and have that content show up on multiple pages of your Shopify store automatically? PB Sections for Shopify are here to take your store to the next level!

Overview

Before creating Sections for your Shopify theme using Page Builder, It's important to understand Shopify's Themes > Page Templates > Sections ecosystem.

  • Page templates are a collection of sections that are configured to give your online store a consistent look and feel.

  • In the Shopify Theme Editor, you control which templates are applied to specific pages and choose the sections displayed in each template.

  • The sections available in your templates have typically depended on the theme you've purchased...but Page Builder gives you section super powers!

Check out this Shopify Help Center article for more information on themes + sections: https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

Using Page Builder To Create Your Own Theme Sections

Here's the workflow:

  1. Create a custom section using Page Builder's drag and drop editor

  2. Publish that section so it's available in your Shopify Theme Editor

  3. Use the Theme Editor to apply the PB Theme Section to any or all of your page templates.

Creating A Section In Page Builder

  • In addition to creating "Pages" in Page Builder, you'll now see a new option to "Create a Section"

  • Use the Page Builder editor to create anything you can think of.

    • It works the same as creating pages.

Publishing A Section In Page Builder

  • When you're happy with the section in the Page Builder editor, you can Publish the section.

  • Publishing the section in the Page Builder UI does not actually change anything with your live Shopify store.

    • It simply makes the section available to you in your Shopify Theme Editor

Applying Sections In The Shopify Theme Editor

  • In the Shopify Theme Editor UI, you can add the section you created in Page Builder to any page templates.

    • While some of your native Theme Sections may be limited to specific Page Template types, sections built in Page Builder can be used in any template.

  • When you're happy with how things look in the Shopify Theme Editor, click "Save" and your site will be updated to now include your new sections!

Updating Sections In Page Builder

  • If you use the Page Builder Editor to make changes to a PB section that is already being used in your live store, the section will update immediately (everywhere it's being used).

  • This also means that if you delete a PB section from your Page Builder UI, the section will immediately be removed from your live store (everywhere it's being used).

  • You can't make any changes to the PB section from within the Shopify Theme Editor, but we provide a link from the Shopify Theme Editor directly to edit that section in Page Builder.

Popular Use Cases For Creating New Sections

Use Case #1: I want to apply the custom content I've created in Page Builder to multiple Products in my store.

Let's say you've used Page Builder to create a beautiful "Value Prop" section for your Product Page. You'd like this section to live on every single one of your product pages, but don't want to manually add it one by one. Now you can create the section once in Page Builder, send it to the Shopify Theme Editor and then add it to your product page template.

Pro Tip: You can create multiple Product Page Templates if you want to change things up between different Product Types. Say you have one section that you want to show up on all of your Shoe product pages but a different section on all of your Hat product pages...just create different Page Templates for Shoes and Hats and apply the corresponding PB Sections to the appropriate templates.

Use Case #2: I want to use sections that came with my theme in combination with sections I build in Page Builder.

By creating a Section in Page Builder and making it available in your Shopify Theme Editor, this allows you to build your homepage with a combination of sections from your theme and from Page Builder.

Frequently Asked Questions

What if my store is not running a 2.0 theme?

You can still use the feature, but it will only be applicable to your home page and not to other page templates.

How many sections can I create?

The number of sections you can create depends on your Shogun subscription plan:

  • Build Plan: 5 Sections

  • Measure Plan: 10 Sections

  • Team Plan: 20 Sections

  • Enterprise Plan: Custom

  • Legacy plans: 5 Sections

What if I have multiple themes?

Shogun Page Builder only ever integrates with your currently published theme. If you change themes, you won't see your previously created PB Theme Sections, but you can republish them and they will appear in your new theme.

Can I use custom fonts in my Section?

Yes. However, custom fonts added through the Shopify theme do not render within the Section editor or preview. They will load correctly on the live page.

If you are using Shogun's Typekit integration to add your custom fonts, the fonts will render in the Section editor, preview, and live page.

Did this answer your question?