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
  • Method 1: Using Color Stops
  • Method 2: Using CSS Color Values
  • Examples
  • Tips
  1. Fundamentals
  2. Section Settings

Setting Solid Background Colors instead of Gradients

PreviousSection SettingsNextUnderstanding Layout Settings: Size & Maximum Width

Last updated 2 months ago

Learn two simple methods to set a solid background color instead of a gradient in Design Packs sections.

Method 1: Using Color Stops

The simplest way to create a solid background:

  1. Open the background color setting

  2. Set both color stops to the same color:

    • Click the first color stop

    • Select your desired color

    • Click the second color stop

    • Select the same color

    • Make sure opacity is set to 100% for both stops (the field next to the Hex code)

This method works well when you want to:

  • Use the color picker

  • Select from your theme colors

  • Save colors for later use

  • Maintain consistency with your theme

Method 2: Using CSS Color Values

For direct color control:

  1. Open the background color setting

  2. Click the dropdown in the top-left corner

  3. Switch from "Gradient" to "CSS"

  4. Enter your color value:

    • Hex code (e.g., #FF5733)

    • RGB (e.g., rgb(255, 87, 51))

    • Color name (e.g., coral)

This method is ideal when you:

  • Have specific hex codes to use

  • Want to copy/paste colors

  • Need to match exact brand colors

  • Prefer working with CSS values

Examples

Using Color Stops

1. First stop: #FF5733
2. Second stop: #FF5733
Result: Solid coral background

Using CSS

1. Switch to CSS mode
2. Enter: #FF5733
Result: Solid coral background

Tips

  • Both methods produce the same result

  • Choose the method that fits your workflow

  • Save commonly used colors in your theme settings

  • Use the method that's most comfortable for you

Need help? Contact our support team at support@design-packs.com for assistance.

Pro Tip: The CSS method is faster when you have specific color codes, while the color stop method is better for exploring and saving theme colors.