Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • The basics
  • Adding a global section
  1. Guides

Adding your first section

PreviousGet started hereNextAdding your first template

Last updated 2 months ago

The basics

Design Packs has many single sections that can be added and integrated right into your existing theme. The sections work with both legacy Shopify themes and Online store 2.0 themes. They can be mixed and match with existing sections in your theme to make engaging pages in your theme.

Adding a global section

Once you've chosen a section you'd like to add to your theme, select the theme you would like to add it to. You can either add it to the published theme or any of your unpublished themes.

Unfortunately you won't be able to add any sections to trial themes until you have paid for the theme.

Now you'll be able to add the Design Pack section to your theme in the customize area. It will show up exactly like all the other sections in your theme. You can add the section on any page if you have an Online store 2.0 theme. If you have an older theme you'll be able to add it to the homepage.

Each section has a lot of options for customizations and they work exactly like the existing sections in your themes.

All of the Design Pack sections come with a standard set of customizations, including image sizing, mobile image options, font selections, section width options and flexible content blocks so that they can be design to fit in perfectly with the existing theme and branding.

Check out out our to get an overview of what is available in Design Packs.

general settings
Page cover image