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
  • Overview
  • Basic Usage
  • Class Targeting
  • Best Practices
  • Examples
  • Troubleshooting
  1. Fundamentals
  2. Section Settings

Custom Classes Setting

Overview

The Custom Classes setting allows you to add your own CSS classes to the section wrapper for custom styling and functionality. This is an advanced feature intended for developers or users familiar with CSS.

Basic Usage

Adding Classes

  1. Enter class names in the "Custom classes" field

  2. Separate multiple classes with spaces

  3. Classes will be added to the section's main wrapper div

Example:

my-custom-class another-class special-theme

Class Targeting

Your custom classes will be added to the section wrapper with this structure:

<section class="DP--[section-id] dsgn-pck__banner-video dsgn-pck__section your-custom-classes">

CSS Targeting Example

/* Target the section with a custom class */
.my-custom-class {
  /* Your styles here */
}

/* Target specific elements within your custom class */
.my-custom-class .dsgn-pck__content {
  /* Styles for content area */
}

Best Practices

  1. Naming Conventions

    • Use descriptive, meaningful class names

    • Follow a consistent naming pattern

    • Avoid generic names that might conflict

    • Consider using prefixes (e.g., my-theme-)

  2. Specificity

    • Be specific enough to avoid conflicts

    • Use the section's built-in classes as context

    • Don't override core functionality

  3. Documentation

    • Comment your custom CSS

    • Document class purposes

    • Keep track of dependencies

Examples

Theme Variation

/* Add class: theme-variant-1 */
.theme-variant-1 .dsgn-pck__content {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

.theme-variant-1 .dsgn-pck__heading {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

Troubleshooting

  1. Classes Not Applying

    • Verify class names are spelled correctly

    • Check CSS specificity

    • Inspect element to confirm class is added

  2. Styles Conflicting

    • Use more specific selectors

    • Check for duplicate classes

PreviousUnderstanding Inner Padding & Outer Margin SettingsNextShow Individual Variants Setting

Last updated 2 months ago

Need help? Contact our support team at for assistance.

support@design-packs.com