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 25 days 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

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.

Need help? Contact our support team at for assistance.

support@design-packs.com