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
  • How to select the entire section
  • How to set custom values for the margins on a section
  • How to change the animation speed
  • How to control width of banner sections
  • Global CSS
  1. Fundamentals
  2. Custom CSS

Basic CSS examples

How to select the entire section

All of the styles that you add are scoped to that specific section (which means you can style two Design Packs totally differently and not have to worry about any interfering styles or inheritance issues)

To select the entire section, use empty brackets, instead of using the id selector (eg. #DP--12344789 is not needed). Not sure what that means? Here is an example:

{
  border: 3px solid red;
}

If you copy and paste the above code, you will see a border appear around the section. It will be a solid line, 3 pixels in width and the color red.

How to set custom values for the margins on a section

Sometimes you might want to have margins on the top, but not the bottom of a section, or vice versa. To override the margins in the settings you can use the following code:

{
  margin-top: 0px;
  margin-bottom: 20px;
}

Include both of these lines of code if you want to change both the top and bottom margins. If you only want to change one of the margins, then you can delete the one you don't need.

One "gotcha" is that the margin will show up again on mobile, so in order to make sure that a margin is consistent on all screen sizes, you can add the same code in Mobile CSS OR add !important to the end of each (example below):

{
  margin-top: 0px !important;
  margin-bottom: 20px !important;
}

How to change the animation speed

We have set a default speed of 0.5s for elements to animate in when that section comes into view on page scroll. Sometimes that can seem slow if you have a lot of blocks that are animating in. To adjust this, you can use the following CSS:

[style*=--dsgn-pck-animate] {
  --dsgn-pck-animation-multiplier: 0.2s; 
}

^^ The value can be updated to 0.1s, 0.2s, 0.3s, 0.4s, etc. If you want to apply that animation speed to ALL the animations (instead of one section), you can add the following code to the Global Custom CSS in the app interface.


.dsgn-pck__animation-applied [style*=--dsgn-pck-animate] {
  --dsgn-pck-animation-multiplier: 0.2s;
}

How to control width of banner sections

{
  max-width: 1200px;
  width: 95%;
  margin: auto;
}

Global CSS

  • General custom CSS add globally to theme or all Design Packs

PreviousCustom CSSNextMobile CSS examples

Last updated 1 year ago

Banner sections are full width by default, but if do not want them to stretch across the whole screen, you can use the following CSS snippet to control the width. This snippet doesn't use a class (eg. .dsgn-pck__sizer) because it is applied to the

parent element.