Hub/Theme/Set Up a Dark Mode Hero Section
Task IntentTheme

Set Up a Dark Mode Hero Section

Create a striking dark-themed hero section with light text and high contrast elements.

What This Sidekick Query Does

Create a striking dark-themed hero section with light text and high contrast elements.

Prompts

Copy, adapt, and run this directly in Shopify Sidekick.

Add a dark mode hero section to my homepage. Set the background to [DARK_BG_COLOR] (use a very dark shade like #0a0a0a or #1a1a2e). Display the heading [HEADLINE_TEXT] in [LIGHT_TEXT_COLOR] at [HEADING_SIZE] pixels. Add a subheadline [SUBHEADLINE_TEXT] in a muted lighter color like [MUTED_COLOR]. Include an accent-colored CTA button labeled [CTA_TEXT] linking to [CTA_URL] using [ACCENT_COLOR] as the button background with [BUTTON_TEXT_COLOR] text. Optionally add a subtle background image [IMAGE_URL] at very low opacity of [IMAGE_OPACITY] percent. Add a thin [ACCENT_COLOR] colored line or border accent as a decorative element. Set section height to [HEIGHT] pixels. Ensure all text passes contrast accessibility standards.

Expected Output

Create a striking dark-themed hero section with light text and high contrast elements.

Tips to Improve Results

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions