Back to Documentation

Theme Configuration

Complete guide to customizing your Hype Theme by Shiro (v1.4.2).

Accessing Theme Settings

From your Shopify admin:

  1. Go to Online Store → Themes
  2. Click "Customize" on your active Shiro theme
  3. Click the theme settings icon (gear icon) in the left sidebar
  4. Navigate through the settings categories below

Colors

Accent Color

The main brand color that defines your store's visual identity. This color is used throughout the theme for:

  • • Primary buttons and CTAs
  • • Product badges and labels
  • • Highlight effects and glows
  • • Gradient overlays
  • • Interactive elements on hover

Default: #8b5cf6 (Purple)

Tip: Choose a color that contrasts well with your product images and matches your brand guidelines.

Effects

Button Glow

Adds a subtle glow effect to buttons using your accent color. This creates a modern, eye-catching appearance that draws attention to CTAs.

Enabled by default

Recommended: Keep enabled for a premium, modern look. Disable if you prefer a minimal aesthetic.

Badge Glow

Applies a glow effect to product badges (Sale, New, Limited, etc.). Makes promotional badges stand out and catch customer attention.

Enabled by default

Recommended: Keep enabled to highlight promotions and new arrivals effectively.

Branding

Logo

Upload your store logo to display in the header instead of your store name text.

Logo Requirements:

  • • Format: PNG or SVG (PNG with transparency recommended)
  • • Recommended width: 200-300px
  • • Recommended height: 40-60px
  • • Max file size: 2MB
  • • Use transparent background for best results

Tip: SVG files scale perfectly on all devices and load faster. If using PNG, export at 2x resolution for retina displays.

Social Links

Connect your social media profiles to display icons in your store footer and enable social sharing.

Instagram URL

Example: https://instagram.com/yourstore

TikTok URL

Example: https://tiktok.com/@yourstore

Discord URL

Example: https://discord.gg/yourinvite

Note: Only filled-in social links will appear in your footer. Leave blank to hide specific platforms.

Section-Specific Settings

Beyond theme-wide settings, each section in your theme has its own configuration options:

Header Section

Configure announcement bar, navigation menu, cart icon, and mobile menu behavior.

Product Pages

Customize image gallery layout, variant selectors, product descriptions, and related products.

Collection Pages

Set grid layout, filtering options, sorting methods, and product card styles.

Footer Section

Add footer menus, newsletter signup, payment icons, and legal links.

Access section settings by clicking on any section in the theme editor.

Best Practices

  • ✓

    Preview Before Publishing

    Always use the theme editor preview to test changes across different pages and devices before making them live.

  • ✓

    Maintain Brand Consistency

    Use your accent color consistently throughout the theme. Avoid changing it frequently as it affects brand recognition.

  • ✓

    Optimize Your Logo

    Use SVG format when possible, or PNG with transparent background at 2x resolution for crisp display on all screens.

  • ✓

    Test on Mobile

    Over 70% of Shopify traffic is mobile. Always check how your settings look on phone screens using the device preview.

  • ✓

    Keep Effects Balanced

    Glow effects look great but can be overwhelming if overused. If you have many badges, consider disabling badge glow.

  • ✓

    Update Social Links

    Keep your social media links current. Remove platforms you don't actively use to avoid dead links.

Common Customization Workflows

Setting Up Your Brand Colors

  1. Open theme settings → Colors
  2. Click the accent color picker
  3. Enter your brand's hex color code or use the picker
  4. Preview changes across multiple pages
  5. Save when satisfied

Adding Your Logo

  1. Prepare your logo file (PNG or SVG, transparent background)
  2. Open theme settings → Branding
  3. Click "Select image" under Logo
  4. Upload your logo file
  5. Adjust logo size if needed in header section settings
  6. Save changes

Connecting Social Media

  1. Copy your social media profile URLs
  2. Open theme settings → Branding → Social Links
  3. Paste each URL into the corresponding field
  4. Leave unused platforms blank
  5. Save and check footer for social icons

Troubleshooting

Logo appears too large or small

Go to the Header section settings (not theme settings) and adjust the logo width setting. Recommended range: 120-200px.

Accent color not showing everywhere

Clear your browser cache and hard refresh (Ctrl+Shift+R or Cmd+Shift+R). Some elements may need republishing the theme.

Social icons not appearing in footer

Ensure you've entered complete URLs including https://. Check that the footer section is enabled and visible.

Changes not saving

Make sure you click "Save" in the top right of the theme editor. If issues persist, try a different browser or clear cache.

Need help customizing?

Our support team can help with advanced customizations and troubleshooting.