Global Theme Settings Guide

This guide covers all global theme settings available in your Shopify theme. These settings control the overall appearance, behavior, and functionality of your entire store. You can access these settings by going to Online Store → Themes → Customize → Theme settings (gear icon in the left sidebar).

Typography
Color Schemes
Layout
Buttons & Inputs
Header
Footer
Product Cards
Collection Cards
Pagination
Carousel & Sliders
Cart & Checkout
Blog & Articles
Social Media
Animations
Floating Menu

Typography

Typography settings control fonts and text appearance across your entire store. These settings affect how all text is displayed, from headings to body content.

Fonts

Heading Font

Setting ID: type_heading_font
Type: Font picker
Default: Work Sans
Description: Font used for all headings (h1, h2, h3, h4, h5, h6) throughout the store.
Tip: Choose a bold, readable font that reflects your brand personality. Sans-serif fonts like Work Sans, Poppins, or Montserrat work well for modern stores. Serif fonts like Playfair Display or Merriweather add elegance for luxury brands.

Body Font

Setting ID: type_body_font
Type: Font picker
Default: Work Sans
Description: Font used for paragraphs, body text, and general content.
Tip: Choose a highly readable font for body text. Consider using the same font as your heading font for consistency, or pair complementary fonts (e.g., serif heading with sans-serif body for contrast). Ensure the font is legible at small sizes.

Font Weights

Normal Weight

Setting ID: font_weight_normal
Type: Select
Options:
- Light (300)
- Normal (400) - Default
- Medium (500)
Description: Controls the weight of regular text throughout the store.
Tip:
- 400 (Normal): Standard, most readable, recommended for body text.
- 300 (Light): Elegant, modern, but may be harder to read on small screens or low-resolution displays.
- 500 (Medium): Slightly heavier, provides subtle emphasis while maintaining readability.

Bold Weight

Setting ID: font_weight_bold
Type: Select
Options:
- Semi-bold (600)
- Bold (700) - Default
- Extra bold (800)
Description: Controls the weight of bold text and emphasized elements.
Tip:
- 700 (Bold): Standard bold weight, provides good emphasis without being overwhelming. Recommended for most stores.
- 600 (Semi-bold): Subtler emphasis, good for a softer, more refined look.
- 800 (Extra bold): Maximum impact, use sparingly for hero text or strong call-to-actions.

Font Sizes

Base Font Size

Setting ID: base_font_size
Type: Range
Range: 10-28px
Default: 16px
Description: Base font size for all text elements except headings (h1-h5). Applies to body text, paragraphs, links, and other content.
Tip:
- 16px: Web standard, provides optimal readability and prevents automatic zoom on iOS devices. Recommended for most stores.
- 14px: Compact, good for dense content or minimalist designs. May trigger zoom on mobile devices.
- 18-20px: Larger, more accessible, modern aesthetic. Great for readability-focused stores.
- 22px+: Very large, use for specific design purposes or accessibility needs.

Accessing Typography Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Typography from the settings categories.
Adjust your font selections, weights, and base font size.
Click Save in the top right to apply changes.

Typography Best Practices

Font Pairing

Match fonts: Use the same font family for headings and body for a cohesive, minimalist look.
Complementary pairing: Pair a serif heading font with a sans-serif body font (or vice versa) for visual interest.
Limit font families: Use 1-2 font families maximum to maintain consistency and performance.

Readability

Contrast: Ensure sufficient contrast between text and background colors (WCAG AA requires 4.5:1 for normal text).
Line height: Adequate line spacing improves readability (typically 1.5-1.8x the font size).
Line length: Optimal reading line length is 50-75 characters.

Performance

Font loading: Choose fonts that load quickly. Google Fonts and Shopify's font library are optimized.
Font weights: Only use the font weights you need. Each additional weight increases load time.

Color Schemes

Color schemes provide a centralized way to manage colors throughout your theme. You can create multiple color schemes and apply them to different sections, ensuring consistent branding and easy theme-wide color updates.

About Color Schemes

Setting ID: color_schemes
Type: Color scheme group
Description: Create and manage color schemes that can be used throughout your theme. Each scheme defines a complete set of colors for backgrounds, text, buttons, and accents.

How It Works: Color schemes are reusable color palettes. Once created, you can select a color scheme for any section in your theme. This allows you to:

Create different color themes (e.g., light mode, dark mode, seasonal themes)
Maintain brand consistency across sections
Quickly update colors site-wide by modifying a single scheme

Color Definitions

Each color scheme includes the following color tokens organized into categories:

General Colors

Background

Setting ID: background
Type: Color
Default: #FFFFFF (white)
Description: Main background color for sections using this scheme.
Tip:
- Light backgrounds (#FFFFFF, #F5F5F5) work well for most content and provide good contrast with dark text.
- Dark backgrounds (#1F2937, #000000) create dramatic contrast and modern aesthetics.
- Ensure sufficient contrast with text colors for accessibility.

Elevated Background

Setting ID: elevated_background
Type: Color
Default: #F5F5F5 (light gray)
Description: Background for elements that need subtle elevation (e.g., cards on white backgrounds, input fields).
Tip: Should be slightly different from the main background to create visual depth. Typically 5-10% darker or lighter than the main background.

Surface (Cards)

Setting ID: surface
Type: Color
Default: #FFFFFF (white)
Description: Background color for cards, panels, and elevated surfaces.
Tip:
- Often matches the main background for seamless integration.
- Can be slightly different to create card-like separation.
- In dark themes, use a lighter shade for contrast.

Border

Setting ID: border
Type: Color
Default: #E0E0E0 (light gray)
Description: Color for borders, dividers, and outlines.
Tip:
- Should be subtle but visible. Use lighter colors for minimal designs.
- Darker borders create more defined boundaries.
- Typically 20-30% opacity of the text color for subtle borders.

Text

Setting ID: text
Type: Color
Default: #000000 (black)
Description: Primary text color for body content.
Tip:
- Ensure sufficient contrast with the background (WCAG AA requires 4.5:1 for normal text).
- Pure black (#000000) can be harsh; consider dark gray (#333333) for softer appearance.
- On dark backgrounds, use light colors (#FFFFFF, #F5F5F5).

Text (Muted)

Setting ID: text_muted
Type: Color
Default: #666666 (gray)
Description: Color for secondary or less important text (captions, metadata, supplementary information).
Tip:
- Should be 40-60% of the primary text color's opacity.
- Use for less critical information that shouldn't compete with main content.
- Maintains readability while de-emphasizing content.

Primary Button

Primary Button Color

Setting ID: primary
Type: Color
Default: #000000 (black)
Description: Background color for primary buttons (main call-to-action buttons).
Tip:
- Use your brand's primary color for consistency.
- Should stand out and encourage clicks.
- High contrast colors work best (black, dark blue, brand colors).

On Primary Button

Setting ID: on_primary
Type: Color
Default: #FFFFFF (white)
Description: Text color used on primary buttons.
Tip:
- Must have strong contrast with the primary button background (minimum 4.5:1).
- White or very light colors work best on dark button backgrounds.
- Test contrast ratios using tools like WebAIM Contrast Checker.

Primary Button Hover

Setting ID: primary_hover
Type: Color
Default: #333333 (dark gray)
Description: Background color when hovering over primary buttons.
Tip:
- Should be a darker or lighter variant of the primary color (typically 10-20% difference).
- Indicates interactivity and provides visual feedback.
- Darker for light buttons, lighter for dark buttons.

Secondary Button

Secondary Button Color

Setting ID: secondary
Type: Color
Default: #666666 (gray)
Description: Background color for secondary buttons (less prominent actions).
Tip:
- Should be visually distinct from primary buttons but still recognizable as clickable.
- Typically less saturated or lighter than primary buttons.
- Gray tones work well for secondary actions.

On Secondary Button

Setting ID: on_secondary
Type: Color
Default: #FFFFFF (white)
Description: Text color used on secondary buttons.
Tip:
- Ensure good contrast with the secondary button background.
- Often matches the "on primary" color for consistency.

Outline Button

Outline Button Border Color

Setting ID: outline_button_border
Type: Color
Default: #000000 (black)
Description: Border color for outline-style buttons (buttons with transparent fill and visible border).
Tip:
- Often matches the primary button color or primary text color.
- Creates a less prominent but still visible call-to-action.

Outline Button Text Color

Setting ID: outline_button_text
Type: Color
Default: #000000 (black)
Description: Text color for outline-style buttons.
Tip:
- Should match or complement the border color.
- Creates a cohesive, minimal button style.

Outline Button Hover

Setting ID: outline_button_hover
Type: Color
Default: #333333 (dark gray)
Description: Border and text color when hovering over outline buttons.
Tip:
- Slightly darker or more vibrant than the default state.
- Provides clear hover feedback.

Accent

Accent Color

Setting ID: accent
Type: Color
Default: #FF6B6B (coral red)
Description: Accent color for highlights, badges, decorative elements, and special emphasis.
Tip:
- Use sparingly for drawing attention to special elements (sale badges, highlights, icons).
- Should complement your primary color scheme.
- Bright, saturated colors work well for accents.
- Consider your brand colors for consistency.

Color Scheme Roles

Color schemes automatically map to theme elements through role assignments:

Background → Section backgrounds
Text → Primary text content
Primary Button → Main call-to-action buttons
Secondary Button → Secondary action buttons
Primary Button Border → Primary button borders
Secondary Button Border → Secondary button borders
On Primary Button → Text on primary buttons
On Secondary Button → Text on secondary buttons
Links → Text links
Icons → Icon colors

These roles ensure consistent color application throughout your theme.

Accessing Color Scheme Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Color Schemes from the settings categories.
Click Add color scheme to create a new scheme, or edit an existing one.
Configure all color tokens for your scheme.
Click Save in the top right to apply changes.

Color Scheme Best Practices

Creating Multiple Schemes

Light Mode: Traditional light background with dark text (default).
Dark Mode: Dark background with light text for modern aesthetics.
Seasonal Themes: Create schemes for holidays or special promotions.
Brand Variations: Different color combinations for different product lines.

Color Contrast

Text on Background: Minimum 4.5:1 contrast ratio for normal text (WCAG AA).
Large Text: Minimum 3:1 contrast ratio for text 18px+ or 14px+ bold.
Interactive Elements: Buttons and links need clear contrast for visibility.
Test Your Colors: Use tools like WebAIM Contrast Checker to verify accessibility.

Brand Consistency

Use Brand Colors: Incorporate your brand's primary and secondary colors.
Maintain Harmony: Ensure all colors in a scheme work together cohesively.
Limit Palette: Use 3-5 main colors per scheme for clarity.
Test Across Sections: Apply schemes to different sections to ensure they work universally.

Accessibility

Color Blindness: Don't rely solely on color to convey information (use icons, text, or patterns).
High Contrast: Ensure sufficient contrast for all text and interactive elements.
Test in Different Conditions: View your colors in various lighting conditions and on different devices.

Layout

Layout settings control the overall structure, spacing, and dimensions of your store. These settings affect how content is positioned and spaced throughout your entire site.

Site Colors

Site Background Color

Setting ID: background_color
Type: Color
Default: #FFFFFF (white)
Description: The main background color for the entire site.
Tip:
- Light backgrounds (#FFFFFF, #F9F9F9) are most common and provide good contrast with text.
- Ensure good contrast with your site text color for readability.
- This color appears behind all content and sections.

Site Text Color

Setting ID: foreground_color
Type: Color
Default: #333333 (dark gray)
Description: The default text color for the site.
Tip:
- Should have strong contrast with the background color (WCAG AA requires 4.5:1 for normal text).
- Dark gray (#333333) is softer than pure black (#000000) and easier on the eyes.
- On dark backgrounds, use light colors (#FFFFFF, #F5F5F5).

Page Width

Setting ID: max_page_width
Type: Range
Range: 800-2000px
Step: 50px
Default: 1200px
Description: Maximum width of the page content.
Tip:
- 1200px: Standard width, works well for most stores, balanced for desktop and tablet.
- 1400-1600px: Wider, modern aesthetic, great for showcasing large product images or editorial content.
- 800-1000px: Narrow, focused layout, good for text-heavy content or minimalist designs.
- 1800-2000px: Very wide, best for large displays, may feel too wide on standard monitors.

Site Padding

Setting ID: site_padding
Type: Range
Range: 0-100px
Step: 4px
Default: 20px
Description: Horizontal padding for the site content (space on left and right edges).
Tip:
- 20px: Standard padding, prevents content from touching screen edges.
- 0px: Edge-to-edge content, modern but may feel cramped on mobile.
- 40-60px: More breathing room, creates a more spacious feel.
- 80-100px: Very spacious, editorial style, best for large screens only.

Spacing

Space Between Sections

Setting ID: section_spacing
Type: Range
Range: 0-200px
Step: 5px
Default: 40px
Description: Vertical spacing between different sections on a page.
Tip:
- 40-60px: Standard spacing, balanced and professional.
- 80-120px: Spacious, modern, editorial feel, great for storytelling layouts.
- 20-30px: Compact, more content visible, good for product-heavy pages.
- 0px: No spacing, sections touch each other (use with caution).

Gap Between Blocks

Setting ID: block_gap
Type: Range
Range: 0-100px
Step: 5px
Default: 20px
Description: Spacing between blocks within sections (e.g., between products in a grid, between text blocks).
Tip:
- Should be less than section spacing for visual hierarchy.
- 20px: Standard, provides good separation without excessive whitespace.
- 10-15px: Tighter, more compact grids.
- 30-40px: More spacious, good for featured content.
- 0px: Blocks touch each other, creates a seamless grid.

Page Margin

Setting ID: min_page_margin
Type: Range
Range: 10-100px
Step: 1px
Default: 20px
Description: Minimum margin around the page content (provides breathing room on all sides).
Tip:
- 20px: Standard, provides adequate spacing.
- 10px: Minimal, maximizes content area.
- 40-60px: More spacious, creates a framed effect.
- 80-100px: Very spacious, editorial style, best for large displays.

Section Styling

Section Border Radius

Setting ID: section_border_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 0px
Description: Rounded corners for sections (applies to all sections globally).
Tip:
- 0px: Sharp corners, traditional, clean look.
- 8-16px: Modern, soft edges, contemporary aesthetic.
- 24-32px: Very rounded, playful, friendly feel.
- 40-50px: Extremely rounded, unique, bold design choice.

Accessing Layout Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Layout from the settings categories.
Adjust your site colors, page width, spacing, and section styling.
Click Save in the top right to apply changes.

Layout Best Practices

Responsive Design

Test on Multiple Devices: Always preview your layout changes on desktop, tablet, and mobile.
Mobile-First: Consider how spacing and widths translate to smaller screens.
Flexible Widths: Page width should work well across different screen sizes.

Visual Hierarchy

Section Spacing > Block Gap: Maintain clear hierarchy with larger spacing between sections than blocks.
Consistent Spacing: Use consistent spacing values throughout for a cohesive look.
Whitespace: Don't be afraid of whitespace - it improves readability and visual appeal.

Content Width

Readability: Optimal reading width is typically 600-800px for text content.
Product Grids: Wider pages (1400px+) work well for product grids with many columns.
Balance: Find a balance between showcasing content and maintaining readability.

Spacing Guidelines

Small Spacing (10-20px): Between related elements (product cards in a grid, form fields).
Medium Spacing (40-60px): Between sections, between major content blocks.
Large Spacing (80-120px): For hero sections, major page breaks, editorial layouts.

Buttons & Inputs

These settings control the appearance and behavior of buttons and input fields throughout your store. These interactive elements are crucial for user experience, so careful customization can significantly improve usability and brand consistency.

Button Appearance

Button Border Radius

Setting ID: button_border_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 8px
Description: Border radius for all buttons (controls corner roundness).
Tip:
- 0px: Square corners, bold, modern, architectural feel.
- 4-8px: Slightly rounded, balanced, professional (recommended).
- 24-50px: Pill-shaped, friendly, playful, very rounded aesthetic.
- Match your input border radius for visual consistency.

Button Animations

Enable Button Animations

Setting ID: button_animation_enabled
Type: Checkbox
Default: Enabled
Description: Add hover animations to buttons (scale effect, shadow).
Tip:
- Animations make buttons feel more interactive and provide visual feedback.
- Disable for a simpler, static appearance or if you prefer minimal interactions.
- Consider accessibility - some users prefer reduced motion.

Button Animation Type

Setting ID: button_animation_type
Type: Select
Options:
- Scale (slight scale on hover) - Default
- Draw Border (animated border outline)
- Animated Border (moving border lines)
- None
Description: Animation effect when hovering over buttons.
Tip:
- Scale: Subtle, universally appealing, professional.
- Draw Border: More dramatic, draws attention, good for call-to-action buttons.
- Animated Border: Eye-catching, modern, works well for featured buttons.
- None: No animation, static appearance.

Button Shadows

Enable Button Shadows

Setting ID: button_shadow_enabled
Type: Checkbox
Default: Enabled
Description: Add shadow effects to buttons on hover.
Tip:
- Shadows add depth and make buttons feel more "clickable" and elevated.
- Disable for a flat, minimalist design aesthetic.
- Shadows work particularly well with rounded buttons.

Button Shadow Intensity

Setting ID: button_shadow_intensity
Type: Select
Options: Small, Medium (default), Large
Visible When: Button shadows are enabled
Description: Shadow intensity on button hover.
Tip:
- Small: Subtle elevation, professional, doesn't distract.
- Medium: Good balance, provides clear depth without being overwhelming (recommended).
- Large: Dramatic effect, very noticeable, use sparingly.

Input Appearance

Input Border Radius

Setting ID: input_border_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 8px
Description: Border radius for all input fields (text boxes, dropdowns, textareas, etc.).
Tip:
- Should match or complement your button border radius for consistency.
- 8px: Standard, modern, works well for most designs.
- 0px: Square, sharp, minimalist.
- 24px+: Very rounded, friendly, playful.

Input Border Width

Setting ID: input_border_width
Type: Range
Range: 0-5px
Step: 1px
Default: 1px
Description: Border width for input fields.
Tip:
- 1px: Standard, subtle, professional.
- 2px: More defined, clearer boundaries.
- 0px: Borderless, modern, minimalist (use with background color for definition).

Input Vertical Padding

Setting ID: input_padding_vertical
Type: Range
Range: 8-24px
Step: 2px
Default: 12px
Description: Top and bottom padding for input fields.
Tip:
- More padding makes inputs feel more spacious and easier to tap on mobile devices.
- 12px: Standard, comfortable.
- 16-20px: More spacious, better for mobile usability.
- 8px: Compact, maximizes space.

Input Horizontal Padding

Setting ID: input_padding_horizontal
Type: Range
Range: 12-32px
Step: 2px
Default: 16px
Description: Left and right padding for input fields.
Tip:
- Should be slightly larger than vertical padding for comfortable text entry.
- 16px: Standard, good balance.
- 20-24px: More spacious, comfortable for longer text.
- 12px: Compact, efficient use of space.

Input Focus States

Input Focus Border Color

Setting ID: input_focus_border_color
Type: Color
Default: #111111 (near black)
Description: Border color when an input is focused (actively selected).
Tip:
- Use a bright or distinct color to clearly indicate focus (important for accessibility).
- Often matches your primary button color or accent color.
- Should contrast well with the input background.

Enable Input Focus Shadow

Setting ID: input_focus_shadow_enabled
Type: Checkbox
Default: Enabled
Description: Add shadow effect when input is focused.
Tip:
- Focus shadows improve accessibility by making it clear which field is active.
- Provides visual feedback for keyboard navigation users.
- Disable for a flatter design aesthetic.

Input Focus Shadow Intensity

Setting ID: input_focus_shadow_intensity
Type: Select
Options: Small (default), Medium, Large
Visible When: Focus shadow is enabled
Description: Shadow intensity when input is focused.
Tip:
- Small: Subtle, professional, doesn't distract.
- Medium: More noticeable, good for accessibility.
- Large: Very prominent, use when you need strong focus indication.

Input Typography

Input Font Size

Setting ID: input_font_size
Type: Range
Range: 12-20px
Step: 1px
Default: 16px
Description: Font size for input fields.
Tip:
- 16px: Prevents automatic zoom on iOS devices, standard web size, recommended.
- 14px: Compact, may trigger zoom on mobile.
- 18-20px: Larger, more accessible, easier to read.

Input Font Weight

Setting ID: input_font_weight
Type: Select
Options: Light (300), Regular (400, default), Medium (500), Semi-bold (600), Bold (700)
Description: Font weight for input fields.
Tip:
- 400 (Regular): Standard, most readable, recommended.
- 500 (Medium): Slightly heavier, provides subtle emphasis.
- 300 (Light): Elegant but may be harder to read.
- 600-700: Heavy, use sparingly for emphasis.

Input Error States

Input Error Border Color

Setting ID: input_error_border_color
Type: Color
Default: #d32f2f (red)
Description: Border color for input fields with errors.
Tip:
- Use a distinct color (usually red) that clearly indicates a problem.
- Should stand out from normal and focus states.
- Red (#d32f2f, #dc2626) is the standard for errors.

Input Error Text Color

Setting ID: input_error_text_color
Type: Color
Default: #d32f2f (red)
Description: Text color for error messages.
Tip:
- Should match or complement the error border color for consistency.
- Must have sufficient contrast with the background for readability.
- Use the same red tone as error borders for cohesive error messaging.

Accessing Buttons & Inputs Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Buttons & Inputs from the settings categories.
Adjust your button and input styling options.
Click Save in the top right to apply changes.

Buttons & Inputs Best Practices

Consistency

Match Border Radius: Keep button and input border radius similar for visual harmony.
Consistent Padding: Use consistent padding values across similar input types.
Color Harmony: Ensure button and input colors work together with your color scheme.

Accessibility

Focus States: Always provide clear focus indicators (border color, shadow) for keyboard navigation.
Font Size: Use at least 16px for inputs to prevent mobile zoom and ensure readability.
Contrast: Ensure sufficient contrast between text and backgrounds in all states (normal, focus, error).
Error States: Make error states clearly visible and distinguishable from normal states.

User Experience

Button Size: Ensure buttons are large enough to tap easily on mobile (minimum 44x44px recommended).
Input Spacing: Adequate padding makes inputs easier to use, especially on touch devices.
Visual Feedback: Animations and shadows provide important feedback for user interactions.
Error Clarity: Clear error states help users correct mistakes quickly.

Performance

Animations: Consider performance impact of animations on slower devices.
Shadows: Multiple shadow effects can impact rendering performance.
Balance: Find balance between visual appeal and performance.

Header

Header settings control your store's logo and browser icons. These elements are crucial for brand recognition and user experience across all devices.

Logo Settings

Logo Max Width

Setting ID: logo_max_width
Type: Range
Range: 50-300px
Step: 10px
Default: 150px
Description: Maximum width of the logo on desktop devices.
Tip:
- 150px: Standard size, works well for most logos.
- 100-120px: Smaller, more compact header, good for horizontal logos.
- 200-250px: Larger, more prominent branding, good for square or vertical logos.
- 300px: Maximum size, use for very wide logos or when logo is the primary header element.
- Adjust based on your logo's proportions and header layout.

Logo Mobile Width

Setting ID: logo_mobile_width
Type: Range
Range: 50-200px
Step: 10px
Default: 120px
Description: Logo width on mobile devices.
Tip:
- Should be smaller than desktop to save space on mobile screens.
- 100-120px: Standard mobile size, good balance.
- 80-100px: Compact, maximizes header space for navigation.
- 140-160px: Larger, more prominent on mobile.
- 200px: Maximum, use only for very wide mobile layouts.

Logo Image

Setting ID: logo
Type: Image picker
Description: Upload your logo image. If no logo is uploaded, the shop name will be displayed as text.
Tip:
- Format: PNG with transparency is recommended for best results.
- Resolution: Upload at 2x resolution (e.g., 300px wide for 150px display) for retina displays.
- Aspect Ratio: Consider your logo's proportions when setting max width.
- File Size: Optimize images to keep file size small (under 100KB recommended).
- Background: Use transparent background for logos that work on any background color.

Mobile Logo Image

Setting ID: logo_mobile
Type: Image picker
Description: Optional: Upload a different logo for mobile devices. If not provided, the main logo will be used.
Tip:
- Use a simplified or abbreviated version of your logo for mobile if your main logo is complex.
- Consider a horizontal version if your main logo is vertical.
- Can use a text-only version or icon-only version for mobile.
- Same optimization guidelines apply (PNG, 2x resolution, optimized file size).

Favicon Settings

Favicon

Setting ID: favicon
Type: Image picker
Description: Upload a favicon image (16x16 or 32x32 pixels recommended). This appears in browser tabs and bookmarks.
Tip:
- Size: 16x16px (standard) or 32x32px (high-resolution) for best clarity.
- Format: ICO, PNG, or SVG formats work best. ICO is traditional, PNG is modern, SVG is scalable.
- Design: Use a simple, recognizable icon that represents your brand (often a simplified version of your logo).
- Visibility: Ensure the icon is clear and recognizable at small sizes.
- Colors: Use high contrast colors for visibility in browser tabs.

Apple Touch Icon

Setting ID: apple_touch_icon
Type: Image picker
Description: Upload an Apple touch icon (180x180 pixels). This appears when users add your site to their home screen on iOS devices.
Tip:
- Size: Exactly 180x180 pixels for best results on all iOS devices.
- Format: PNG format is required.
- Design: Should include adequate padding (about 20px on all sides) as iOS adds rounded corners automatically.
- Content: Can be the same as your favicon or a more detailed version.
- Background: Use a solid background color as iOS doesn't support transparency for home screen icons.

Accessing Header Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Header from the settings categories.
Upload your logo images and configure logo widths.
Upload your favicon and Apple touch icon.
Click Save in the top right to apply changes.

Header Best Practices

Logo Optimization

File Format: Use PNG with transparency for logos that need to work on different backgrounds.
Resolution: Upload at 2x resolution (double the display size) for crisp rendering on retina displays.
File Size: Keep logo files under 100KB for fast loading. Use image compression tools if needed.
Aspect Ratio: Consider your logo's natural proportions when setting max width.

Responsive Design

Mobile Optimization: Use a mobile-specific logo if your main logo doesn't work well at small sizes.
Proportional Scaling: Ensure logos look good at both desktop and mobile sizes.
Testing: Always preview your logo on actual devices to ensure proper sizing.

Brand Consistency

Color Variations: Consider creating light and dark versions of your logo for different backgrounds.
Simplified Versions: Have simplified versions ready for mobile or favicon use.
Brand Guidelines: Follow your brand guidelines for logo usage, spacing, and sizing.

Browser Icons

Favicon: Essential for brand recognition in browser tabs and bookmarks.
Apple Touch Icon: Important for iOS users who add your site to their home screen.
Consistency: Keep favicon and Apple touch icon consistent with your brand identity.
Testing: Test icons in different browsers and devices to ensure proper display.

Performance

Image Optimization: Compress all logo and icon images to minimize file size.
Lazy Loading: Logos typically load immediately, so ensure they're optimized.
Caching: Browser caching helps with repeat visits, but initial load should be fast.

Product Cards

Product cards appear throughout your store (collections, featured products, search results, related products). These settings control their global appearance, ensuring consistent styling across all product listings.

Card Appearance

Background Color

Setting ID: product_card_background
Type: Color
Default: #FFFFFF (white)
Description: Background color for product cards.
Tip:
- White is standard and provides good contrast with product images.
- Consider off-white (#F9F9F9) for subtle contrast on white backgrounds.
- Dark backgrounds can create dramatic contrast but ensure text remains readable.

Shadow

Setting ID: product_card_shadow
Type: Select
Options: None, Small (default), Medium, Large, Extra Large
Description: Default shadow for product cards.
Tip:
- None: Flat, minimalist design, no elevation.
- Small: Subtle elevation, professional, recommended.
- Medium: More pronounced depth, modern aesthetic.
- Large/Extra Large: Dramatic effect, use sparingly.

Shadow on Hover

Setting ID: product_card_shadow_hover
Type: Select
Options: None, Small, Medium, Large (default), Extra Large, 2X Large
Description: Shadow when hovering over product cards.
Tip:
- Should be stronger than the default shadow to indicate interactivity.
- Large: Good balance, clearly shows hover state.
- 2X Large: Maximum effect, very dramatic.

Lift Card on Hover

Setting ID: product_card_hover_lift
Type: Checkbox
Default: Enabled
Description: Slightly elevate the card when hovering.
Tip:
- Combined with shadow increase, creates an engaging hover effect.
- Disable for a static, flat design aesthetic.

Card Border

Show Border

Setting ID: product_card_border_enabled
Type: Checkbox
Default: Disabled
Description: Display a border around product cards.
Tip:
- Borders define cards more clearly, especially on colored backgrounds.
- Useful for creating separation between cards in tight grids.

Border Color

Setting ID: product_card_border_color
Type: Color
Default: #E5E5E5 (light gray)
Visible When: Border is enabled
Description: Color for the card border.
Tip:
- Use a subtle color that doesn't overpower the content.
- Light gray works well on white backgrounds.

Border Width

Setting ID: product_card_border_width
Type: Range
Range: 0-10px
Step: 1px
Default: 1px
Visible When: Border is enabled
Description: Width of the card border.
Tip:
- 1px: Standard, subtle definition.
- 2-3px: More defined, bolder look.

Border Radius

Setting ID: product_card_border_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 8px
Visible When: Border is enabled
Description: Rounded corners for cards.
Tip:
- Should match your overall theme's border radius for consistency.
- 8px: Modern, soft edges.
- 0px: Sharp, architectural.
- 24px+: Very rounded, playful.

Card Spacing

Inner Padding

Setting ID: product_card_padding
Type: Range
Range: 0-50px
Step: 2px
Default: 16px
Description: Internal padding inside product cards (space around content).
Tip:
- More padding creates a spacious feel.
- Less padding maximizes image size.
- 16px: Standard, balanced.

Title Bottom Spacing

Setting ID: product_card_title_spacing
Type: Range
Range: 0-30px
Step: 2px
Default: 8px
Description: Space below the product title.
Tip:
- Adjust to control tightness between title and price.
- 8px: Standard, compact.
- 12-16px: More breathing room.

Price Bottom Spacing

Setting ID: product_card_price_spacing
Type: Range
Range: 0-30px
Step: 2px
Default: 12px
Description: Space below the product price.
Tip:
- More space separates price from buttons or other elements.
- 12px: Standard spacing.

Product Title

Title Color

Setting ID: product_card_title_color
Type: Color
Default: #333333 (dark gray)
Description: Color for product titles on cards.
Tip:
- Should have strong contrast with the card background.
- Dark gray is softer than pure black.

Title Font Size

Setting ID: product_card_title_size
Type: Range
Range: 12-32px
Step: 1px
Default: 16px
Description: Font size for product titles.
Tip:
- 14-18px: Works well for most layouts.
- 16px: Standard, balanced.
- Larger for hero products or featured sections.

Title Font Weight

Setting ID: product_card_title_weight
Type: Select
Options: Normal (400), Medium (500, default), Semi-bold (600), Bold (700)
Description: Font weight for product titles.
Tip:
- Medium (500): Good emphasis without being too heavy, recommended.
- Semi-bold (600): Stronger emphasis.
- Bold (700): Maximum emphasis, use for featured products.

Maximum Title Lines

Setting ID: product_card_title_lines
Type: Range
Range: 1-5 lines
Default: 2 lines
Description: Number of lines before text is truncated with ellipsis.
Tip:
- 2 lines: Standard, good balance.
- 1 line: Minimal, ensures uniform card heights.
- 3-5 lines: More descriptive, good for detailed product names.

Product Price

Price Color

Setting ID: product_card_price_color
Type: Color
Default: #000000 (black)
Description: Color for regular product prices.
Tip:
- Should be prominent and easy to read.
- Often matches or complements the title color.

Price Font Size

Setting ID: product_card_price_size
Type: Range
Range: 12-32px
Step: 1px
Default: 16px
Description: Font size for product prices.
Tip:
- Often slightly larger or the same as the title for emphasis.
- 16px: Standard, matches title size.

Price Font Weight

Setting ID: product_card_price_weight
Type: Select
Options: Normal (400), Medium (500, default), Semi-bold (600), Bold (700)
Description: Font weight for product prices.
Tip:
- Medium or Semi-bold: Makes prices stand out.
- Bold: Maximum emphasis, use sparingly.

Sale Price

Sale Price Color

Setting ID: product_card_sale_price_color
Type: Color
Default: #DC2626 (red)
Description: Color for sale prices.
Tip:
- Red is traditional for sales.
- Use your brand's accent color as an alternative.

Sale Price Font Size

Setting ID: product_card_sale_price_size
Type: Range
Range: 12-32px
Step: 1px
Default: 18px
Description: Font size for sale prices.
Tip:
- Should be larger than regular price to draw attention to the discount.
- 18px: Good emphasis, typically 2px larger than regular price.

Compare At Price Color

Setting ID: product_card_compare_price_color
Type: Color
Default: #6B7280 (gray)
Description: Strikethrough price shown when product is on sale (original price).
Tip:
- Should be muted to de-emphasize the old price.
- Gray tones work well for strikethrough prices.

Sale Badge

Show Sale Badge

Setting ID: product_card_show_sale_badge
Type: Checkbox
Default: Enabled
Description: Display a "Sale" badge on discounted products.
Tip:
- Badges draw attention to promotions.
- Disable for a cleaner, more minimal look.

Badge Background

Setting ID: product_card_sale_badge_bg
Type: Color
Default: #DC2626 (red)
Description: Background color for sale badges.
Tip:
- Should be bright and eye-catching.
- Often matches the sale price color.

Badge Text Color

Setting ID: product_card_sale_badge_text
Type: Color
Default: #FFFFFF (white)
Description: Text color for sale badges.
Tip:
- Must contrast strongly with badge background.
- White works on most colored backgrounds.

Badge Font Size

Setting ID: product_card_sale_badge_size
Type: Range
Range: 10-20px
Step: 1px
Default: 14px
Description: Font size for sale badge text.
Tip:
- Small enough to not dominate, large enough to read clearly.
- 14px: Standard, balanced.

Badge Border Radius

Setting ID: product_card_sale_badge_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 50px
Description: Border radius for sale badges (0 for square, 50 for fully rounded).
Tip:
- 50px: Creates pill-shaped badges, modern and friendly.
- 4-8px: Subtle rounding.
- 0px: Square, bold.

Add to Cart Button

Button Background

Setting ID: product_card_button_bg
Type: Color
Default: #000000 (black)
Description: Background color for "Add to Cart" buttons on product cards.
Tip:
- Should be prominent and match your primary button color.
- High contrast colors encourage clicks.

Button Text Color

Setting ID: product_card_button_text
Type: Color
Default: #FFFFFF (white)
Description: Text color for "Add to Cart" buttons.
Tip:
- Must contrast strongly with button background.
- White or very light colors work best on dark buttons.

Button Hover Background

Setting ID: product_card_button_hover_bg
Type: Color
Default: #1F2937 (dark gray)
Description: Background color when hovering over the button.
Tip:
- Slightly darker or lighter than default to show interactivity.
- Darker for light buttons, lighter for dark buttons.

Button Font Size

Setting ID: product_card_button_size
Type: Range
Range: 12-20px
Step: 1px
Default: 14px
Description: Font size for button text.
Tip:
- Should be readable but not overwhelming.
- 14px: Standard, good balance.

Button Border Radius

Setting ID: product_card_button_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 4px
Description: Border radius for the button.
Tip:
- Match your global button styling for consistency.
- 4px: Slight rounding, modern.

Button Padding

Setting ID: product_card_button_padding
Type: Range
Range: 8-24px
Step: 2px
Default: 12px
Description: Padding applied to all sides of the button.
Tip:
- More padding makes buttons larger and easier to click.
- 12px: Standard, comfortable.

Product Image

Image Aspect Ratio

Setting ID: product_card_image_ratio
Type: Select
Options: Square (1:1, default), Portrait (3:4), Landscape (4:3), Wide (16:9), Original
Description: Aspect ratio for product images on cards.
Tip:
- Square: Most versatile, works for all products, creates uniform grid.
- Portrait: Fashion, apparel, bottles, vertical products.
- Landscape: Horizontal products, accessories.
- Wide: Very wide products, banners.
- Original: Preserves natural proportions but creates varied card heights.

Zoom Image on Hover

Setting ID: product_card_image_hover_zoom
Type: Checkbox
Default: Enabled
Description: Slightly zoom the image when hovering.
Tip:
- Adds polish and indicates interactivity.
- Disable for static images.

View Icon Overlay

Show View Icon on Hover

Setting ID: product_card_show_view_icon
Type: Checkbox
Default: Enabled
Description: Display a "view" icon overlay when hovering over the image.
Tip:
- Indicates the card is clickable.
- Disable for a cleaner hover effect.

View Icon Background

Setting ID: product_card_view_icon_bg
Type: Color
Default: #000000 (black)
Description: Background color behind the view icon.
Tip:
- Should be semi-transparent for subtle effect.
- Dark colors work well over light images.

View Icon Background Opacity

Setting ID: product_card_view_icon_opacity
Type: Range
Range: 0-100%
Step: 5%
Default: 20%
Description: Opacity of the view icon background.
Tip:
- 20-30%: Subtle overlay without obscuring the image.
- 40-50%: More visible, better contrast for icon.

View Icon Size

Setting ID: product_card_view_icon_size
Type: Range
Range: 16-48px
Step: 2px
Default: 24px
Description: Size of the view icon.
Tip:
- Should be noticeable but not overwhelming.
- 24px: Standard, good visibility.

Accessing Product Cards Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Product Cards from the settings categories.
Adjust your card appearance, typography, pricing, buttons, and image settings.
Click Save in the top right to apply changes.

Product Cards Best Practices

Visual Hierarchy

Title > Price: Ensure title is prominent, price is secondary but clear.
Sale Elements: Make sale prices and badges stand out to draw attention.
Consistent Spacing: Use consistent spacing values for a cohesive grid.

User Experience

Hover Effects: Clear hover states (shadow, lift, zoom) indicate interactivity.
Button Visibility: Ensure "Add to Cart" buttons are clearly visible and easy to click.
Image Quality: Use high-quality product images that look good at card sizes.

Brand Consistency

Color Harmony: Match card colors with your overall color scheme.
Typography: Use consistent font sizes and weights across all cards.
Border Radius: Match card border radius with your theme's overall styling.

Performance

Image Optimization: Optimize product images for fast loading.
Shadow Effects: Consider performance impact of multiple shadow effects.
Hover Animations: Smooth animations enhance UX but test on slower devices.

Collection Cards

Collection cards appear on your homepage, collection list page, and search results. These settings control their global appearance, ensuring consistent styling across all collection listings.

Card Appearance

Background Color

Setting ID: collection_card_background
Type: Color
Default: #FFFFFF (white)
Description: Background color for collection cards.
Tip:
- White is standard and provides good contrast with collection images.
- Consider off-white (#F9F9F9) for subtle contrast on white backgrounds.
- Dark backgrounds can create dramatic contrast but ensure text remains readable.

Shadow

Setting ID: collection_card_shadow
Type: Select
Options: None, Small (default), Medium, Large, Extra Large
Description: Default shadow for collection cards.
Tip:
- None: Flat, minimalist design, no elevation.
- Small: Subtle elevation, professional, recommended.
- Medium: More pronounced depth, modern aesthetic.
- Large/Extra Large: Dramatic effect, use sparingly.

Shadow on Hover

Setting ID: collection_card_shadow_hover
Type: Select
Options: None, Small, Medium, Large (default), Extra Large, 2X Large
Description: Shadow when hovering over collection cards.
Tip:
- Should be stronger than the default shadow to indicate interactivity.
- Large: Good balance, clearly shows hover state.
- 2X Large: Maximum effect, very dramatic.

Lift Card on Hover

Setting ID: collection_card_hover_lift
Type: Checkbox
Default: Enabled
Description: Slightly elevate the card when hovering.
Tip:
- Combined with shadow increase, creates an engaging hover effect.
- Disable for a static, flat design aesthetic.

Card Border

Show Border

Setting ID: collection_card_border_enabled
Type: Checkbox
Default: Disabled
Description: Display a border around collection cards.
Tip:
- Borders define cards more clearly, especially on colored backgrounds.
- Useful for creating separation between cards in tight grids.

Border Color

Setting ID: collection_card_border_color
Type: Color
Default: #E5E5E5 (light gray)
Visible When: Border is enabled
Description: Color for the card border.
Tip:
- Use a subtle color that doesn't overpower the content.
- Light gray works well on white backgrounds.

Border Width

Setting ID: collection_card_border_width
Type: Range
Range: 0-10px
Step: 1px
Default: 1px
Visible When: Border is enabled
Description: Width of the card border.
Tip:
- 1px: Standard, subtle definition.
- 2-3px: More defined, bolder look.

Border Radius

Setting ID: collection_card_border_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 8px
Visible When: Border is enabled
Description: Rounded corners for cards.
Tip:
- Should match your overall theme's border radius for consistency.
- 8px: Modern, soft edges.
- 0px: Sharp, architectural.
- 24px+: Very rounded, playful.

Card Spacing

Inner Padding

Setting ID: collection_card_padding
Type: Range
Range: 0-50px
Step: 2px
Default: 16px
Description: Internal padding inside collection cards (space around content).
Tip:
- More padding creates a spacious feel.
- Less padding maximizes image size.
- 16px: Standard, balanced.

Title Bottom Spacing

Setting ID: collection_card_title_spacing
Type: Range
Range: 0-30px
Step: 2px
Default: 8px
Description: Space below the collection title.
Tip:
- Adjust to control tightness between title and number of products.
- 8px: Standard, compact.
- 12-16px: More breathing room.

Product Count Bottom Spacing

Setting ID: collection_card_product_count_spacing
Type: Range
Range: 0-30px
Step: 2px
Default: 12px
Description: Space below the product count.
Tip:
- More space separates product count from other elements.
- 12px: Standard spacing.

Collection Title

Title Color

Setting ID: collection_card_title_color
Type: Color
Default: #333333 (dark gray)
Description: Color for collection titles on cards.
Tip:
- Should have strong contrast with the card background.
- Dark gray is softer than pure black.

Title Font Size

Setting ID: collection_card_title_size
Type: Range
Range: 12-32px
Step: 1px
Default: 18px
Description: Font size for collection titles.
Tip:
- 18-22px: Works well for most layouts, slightly larger than body text.
- Larger for hero collections or featured sections.

Title Font Weight

Setting ID: collection_card_title_weight
Type: Select
Options: Normal (400), Medium (500), Semi-bold (600, default), Bold (700)
Description: Font weight for collection titles.
Tip:
- Semi-bold (600): Good emphasis, clearly distinguishes titles.
- Bold (700): Maximum emphasis, use for featured collections.

Product Count

Product Count Color

Setting ID: collection_card_product_count_color
Type: Color
Default: #6B7280 (gray)
Description: Color for the product count on collection cards.
Tip:
- Should be muted to de-emphasize the count, making titles more prominent.
- Gray tones work well for supplementary information.

Product Count Font Size

Setting ID: collection_card_product_count_size
Type: Range
Range: 10-20px
Step: 1px
Default: 14px
Description: Font size for product count.
Tip:
- Smaller than the title to maintain hierarchy.
- 14px: Standard, readable.

Product Count Font Weight

Setting ID: collection_card_product_count_weight
Type: Select
Options: Normal (400, default), Medium (500), Semi-bold (600)
Description: Font weight for product count.
Tip:
- Normal (400): Standard, easy to read without being too heavy.

Collection Image

Image Aspect Ratio

Setting ID: collection_card_image_ratio
Type: Select
Options: Square (1:1, default), Portrait (3:4), Landscape (4:3), Wide (16:9), Original
Description: Aspect ratio for collection images on cards.
Tip:
- Square: Most versatile, creates uniform grid.
- Portrait: For collections featuring vertical products.
- Landscape: For collections featuring horizontal products.
- Original: Preserves natural proportions but creates varied card heights.

Zoom Image on Hover

Setting ID: collection_card_image_hover_zoom
Type: Checkbox
Default: Enabled
Description: Slightly zoom the image when hovering.
Tip:
- Adds polish and indicates interactivity.
- Disable for static images.

Show View Icon on Hover

Setting ID: collection_card_show_view_icon
Type: Checkbox
Default: Enabled
Description: Display a "view" icon overlay when hovering over the image.
Tip:
- Indicates the card is clickable.
- Disable for a cleaner hover effect.

View Icon Background

Setting ID: collection_card_view_icon_bg
Type: Color
Default: #000000 (black)
Description: Background color behind the view icon.
Tip:
- Should be semi-transparent for subtle effect.
- Dark colors work well over light images.

View Icon Background Opacity

Setting ID: collection_card_view_icon_opacity
Type: Range
Range: 0-100%
Step: 5%
Default: 20%
Description: Opacity of the view icon background.
Tip:
- 20-30%: Subtle overlay without obscuring the image.
- 40-50%: More visible, better contrast for icon.

View Icon Size

Setting ID: collection_card_view_icon_size
Type: Range
Range: 16-48px
Step: 2px
Default: 24px
Description: Size of the view icon.
Tip:
- Should be noticeable but not overwhelming.
- 24px: Standard, good visibility.

Accessing Collection Cards Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Collection Cards from the settings categories.
Adjust your card appearance, typography, product count, and image settings.
Click Save in the top right to apply changes.

Collection Cards Best Practices

Visual Hierarchy

Title > Product Count: Ensure title is prominent, product count is secondary but clear.
Consistent Spacing: Use consistent spacing values for a cohesive grid.

User Experience

Hover Effects: Clear hover states (shadow, lift, zoom) indicate interactivity.
Image Quality: Use high-quality collection images that look good at card sizes.

Brand Consistency

Color Harmony: Match card colors with your overall color scheme.
Typography: Use consistent font sizes and weights across all cards.
Border Radius: Match card border radius with your theme's overall styling.

Performance

Image Optimization: Optimize collection images for fast loading.
Shadow Effects: Consider performance impact of multiple shadow effects.
Hover Animations: Smooth animations enhance UX but test on slower devices.

Pagination

Pagination settings control how page navigation appears throughout your store (collections, search results, blog pages). These settings ensure consistent navigation styling and behavior across all paginated content.

Pagination Style

Setting ID: pagination_style
Type: Select
Options:
- Numbers (default)
- Arrows only
- Dots
- Minimal
Description: Visual style for pagination controls.
Tip:
- Numbers: Traditional page numbers (1, 2, 3...), most informative, recommended for most stores.
- Arrows only: Simple previous/next arrows, minimal design, good for mobile-first stores.
- Dots: Visual indicator dots, modern aesthetic, best for carousels or limited page counts.
- Minimal: Very simple design, clean and unobtrusive.

Alignment

Setting ID: pagination_alignment
Type: Select
Options: Left, Center (default), Right
Description: Horizontal alignment of pagination controls.
Tip:
- Center: Standard, balanced, works well for most layouts.
- Left: Aligns with left-aligned content, good for text-heavy pages.
- Right: Aligns with right-aligned content, less common but can work for specific designs.

Show Page Information

Setting ID: pagination_show_info
Type: Checkbox
Default: Enabled
Description: Display "Page X of Y" text alongside pagination controls.
Tip:
- Provides context about current position and total pages.
- Disable for a cleaner, more minimal appearance.
- Useful for users navigating large result sets.

Pagination Colors

Active Page Background

Setting ID: pagination_active_bg
Type: Color
Default: #000000 (black)
Description: Background color for the current page number.
Tip:
- Should stand out clearly from inactive page numbers.
- Often matches your primary button color for consistency.
- High contrast colors work best for visibility.

Active Page Text

Setting ID: pagination_active_text
Type: Color
Default: #FFFFFF (white)
Description: Text color for the current page number.
Tip:
- Must have strong contrast with the active page background (minimum 4.5:1).
- White or very light colors work best on dark backgrounds.
- Test contrast ratios for accessibility.

Hover Background

Setting ID: pagination_hover_bg
Type: Color
Default: #F5F5F5 (light gray)
Description: Background color when hovering over pagination links.
Tip:
- Should be subtle but noticeable to indicate interactivity.
- Light gray works well on white backgrounds.
- Darker shades work better on light backgrounds.

Border Color

Setting ID: pagination_border_color
Type: Color
Default: #E5E5E5 (light gray)
Description: Border color for pagination links.
Tip:
- Should be subtle and not overpower the content.
- Light gray provides gentle definition without being harsh.
- Can match your theme's border color for consistency.

Pagination Behavior

Show Ellipsis for Large Page Counts

Setting ID: pagination_show_ellipsis
Type: Checkbox
Default: Enabled
Description: Show "..." when there are many pages to indicate skipped pages.
Tip:
- Prevents pagination from becoming too long with many pages.
- Example: "1 ... 5 6 7 ... 20" instead of showing all numbers.
- Disable to show all page numbers (may become cluttered with many pages).

Maximum Visible Page Numbers

Setting ID: pagination_max_visible_pages
Type: Range
Range: 3-10
Step: 1
Default: 5
Description: How many page numbers to show around the current page.
Tip:
- 5: Standard, shows 2 pages before and after current (e.g., "3 4 [5] 6 7").
- 3: Minimal, shows only 1 page on each side.
- 7-10: More pages visible, better for users who want to see more context.
- Balance between showing enough context and keeping pagination compact.

Always Show First and Last Page

Setting ID: pagination_show_first_last
Type: Checkbox
Default: Enabled
Description: Show page 1 and last page even when far from the current page.
Tip:
- Provides quick access to first and last pages.
- Example: "1 ... 5 6 7 ... 20" even when on page 6.
- Disable to only show pages near the current page.

Mobile Settings

Hide Text Labels on Mobile

Setting ID: pagination_hide_text_mobile
Type: Checkbox
Default: Enabled
Description: Show only icons on mobile devices (hide "Previous" and "Next" text).
Tip:
- Saves space on small screens.
- Icons are universally understood (arrows).
- Disable if you prefer text labels for clarity.

Mobile Button Size

Setting ID: pagination_mobile_size
Type: Range
Range: 0.8-2rem
Step: 0.1rem
Default: 1rem
Description: Size multiplier for mobile pagination buttons.
Tip:
- 1rem: Standard size, matches desktop.
- 1.2-1.5rem: Larger buttons, easier to tap on mobile devices (recommended).
- 0.8rem: Smaller, more compact, saves space.
- 1.8-2rem: Very large, maximum touch target size.

Accessing Pagination Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Pagination from the settings categories.
Adjust your pagination style, colors, behavior, and mobile settings.
Click Save in the top right to apply changes.

Pagination Best Practices

User Experience

Clear Active State: Make the current page clearly distinguishable from other pages.
Hover Feedback: Provide visual feedback when hovering over pagination links.
Mobile Optimization: Ensure pagination is easy to use on touch devices with appropriately sized buttons.
Context Information: Show page information ("Page X of Y") to help users understand their position.

Visual Design

Consistent Styling: Match pagination colors with your overall color scheme.
Alignment: Center alignment is standard, but match your content layout.
Spacing: Ensure adequate spacing between pagination elements for easy clicking/tapping.

Performance

Ellipsis for Large Sets: Use ellipsis to prevent pagination from becoming too long with many pages.
Reasonable Page Count: Limit visible page numbers to keep pagination manageable and fast to render.

Accessibility

Color Contrast: Ensure sufficient contrast between text and backgrounds (WCAG AA requires 4.5:1).
Touch Targets: Mobile buttons should be at least 44x44px for easy tapping.
Clear Labels: Text labels help users understand pagination controls, especially on desktop.

Carousel & Sliders

Carousel and slider settings control the appearance and behavior of all carousels and sliders throughout your store (product carousels, image galleries, featured collections, slideshows). These settings ensure consistent navigation and styling across all carousel components.

Arrow Style

Setting ID: swiper_arrow_style
Type: Select
Options:
- Minimal (default)
- Bold
- Circular
- Square
Description: Visual style for carousel navigation arrows.
Tip:
- Minimal: Simple, clean arrows, unobtrusive, recommended for most stores.
- Bold: Thicker, more prominent arrows, good for high-contrast designs.
- Circular: Rounded background, modern, friendly aesthetic.
- Square: Angular, geometric, bold design choice.

Arrow Background

Setting ID: swiper_arrow_bg
Type: Color
Default: #000000 (black)
Description: Background color for carousel arrows.
Tip:
- Should contrast with the carousel content for visibility.
- Black provides good contrast on light images.
- Consider semi-transparent backgrounds (adjust opacity) for subtle effect.

Arrow Background Opacity

Setting ID: swiper_arrow_opacity
Type: Range
Range: 0-100%
Step: 1%
Default: 50%
Description: Opacity of the arrow background.
Tip:
- 50%: Balanced, visible but not overpowering.
- 30-40%: Subtle, allows more of the image to show through.
- 70-100%: More opaque, better contrast for icon visibility.

Arrow Icon Color

Setting ID: swiper_arrow_icon
Type: Color
Default: #FFFFFF (white)
Description: Color of the arrow icon itself.
Tip:
- Must contrast strongly with the arrow background.
- White works well on dark backgrounds.
- Light colors ensure visibility on semi-transparent backgrounds.

Arrow Icon Hover Color

Setting ID: swiper_arrow_hover_icon
Type: Color
Default: #FFFFFF (white)
Description: Arrow icon color when hovering.
Tip:
- Can match the default icon color or use a different color for hover feedback.
- Slightly brighter or different color indicates interactivity.

Arrow Hover Background

Setting ID: swiper_arrow_hover_bg
Type: Color
Default: #000000 (black)
Description: Background color when hovering over arrows.
Tip:
- Often matches the default background but with higher opacity.
- Can use a different color for more dramatic hover effect.

Arrow Hover Background Opacity

Setting ID: swiper_arrow_hover_opacity
Type: Range
Range: 0-100%
Step: 5%
Default: 80%
Description: Opacity of arrow background on hover.
Tip:
- Should be higher than default opacity to show hover state.
- 80%: Good balance, clearly indicates interactivity.
- 100%: Fully opaque, maximum contrast.

Arrow Size

Setting ID: swiper_arrow_size
Type: Range
Range: 24-80px
Step: 4px
Default: 48px
Description: Size of carousel arrows.
Tip:
- 48px: Standard size, good balance between visibility and subtlety.
- 32-40px: Smaller, more minimal, less intrusive.
- 56-64px: Larger, more prominent, easier to click/tap.
- 72-80px: Very large, maximum visibility, best for touch devices.

Arrow Border Radius

Setting ID: swiper_arrow_border_radius
Type: Range
Range: 0-50px
Step: 2px
Default: 4px
Description: Border radius for arrow buttons (roundness of corners).
Tip:
- 4px: Slight rounding, modern, subtle.
- 0px: Square corners, sharp, geometric.
- 24-50px: Very rounded, pill-shaped, friendly aesthetic.
- Should match your overall button styling for consistency.

Arrow Visibility

Setting ID: swiper_arrow_visibility
Type: Select
Options:
- Always visible
- Show on hover (default)
- Hide on mobile
Description: When carousel arrows are visible.
Tip:
- Show on hover: Clean, minimal, arrows appear when needed, recommended.
- Always visible: More discoverable, but can be distracting on images.
- Hide on mobile: Saves space on small screens, users can swipe instead.

Arrow Position

Setting ID: swiper_arrow_position
Type: Select
Options:
- Inside carousel (default)
- Outside carousel
- Overlay on content
Description: Position of arrows relative to the carousel content.
Tip:
- Inside carousel: Arrows within the carousel boundaries, clean layout.
- Outside carousel: Arrows outside the content area, more space for content.
- Overlay on content: Arrows float over images, modern, space-efficient.

Arrow Offset from Edge

Setting ID: swiper_arrow_offset
Type: Range
Range: 0-50px
Step: 2px
Default: 16px
Description: Distance of arrows from the carousel edge.
Tip:
- 16px: Standard spacing, balanced.
- 0px: Arrows at the very edge, maximum space for content.
- 24-32px: More spacing, creates breathing room.
- 40-50px: Very spaced, dramatic positioning.

Pagination Style

Setting ID: swiper_pagination_style
Type: Select
Options:
- Dots (default)
- Line
- Fraction
Description: Visual style for carousel pagination indicators.
Tip:
- Dots: Traditional, universally understood, recommended for most stores.
- Line: Modern, minimal, horizontal line indicator.
- Fraction: Shows "1 / 5" format, informative, good for limited slides.

Pagination Color

Setting ID: swiper_pagination_color
Type: Color
Default: #000000 (black)
Description: Color for inactive pagination indicators.
Tip:
- Should be visible but not overpowering.
- Often semi-transparent or muted to not distract from content.
- Dark colors work well on light backgrounds.

Active Pagination Color

Setting ID: swiper_pagination_active
Type: Color
Default: #FFFFFF (white)
Description: Color for the active/current pagination indicator.
Tip:
- Should stand out clearly from inactive indicators.
- High contrast ensures users can see current position.
- Often opposite of inactive color (white on dark, dark on light).

Global Carousel Settings

Enable Autoplay by Default

Setting ID: swiper_autoplay_default
Type: Checkbox
Default: Disabled
Description: Automatically advance carousels by default (sections can override this).
Tip:
- Autoplay can improve engagement but may be distracting.
- Disable for better accessibility and user control.
- Individual sections can enable autoplay if needed.
- Consider users who prefer to control navigation themselves.

Default Autoplay Speed

Setting ID: swiper_autoplay_speed
Type: Range
Range: 2-10 seconds
Step: 1 second
Default: 5 seconds
Description: How long each slide displays before auto-advancing.
Tip:
- 5 seconds: Standard, gives users time to read/view content.
- 3-4 seconds: Faster, more dynamic, good for simple images.
- 6-8 seconds: Slower, better for text-heavy slides or detailed images.
- 9-10 seconds: Very slow, maximum time for users to engage.

Enable Loop by Default

Setting ID: swiper_loop_default
Type: Checkbox
Default: Enabled
Description: Allow carousels to loop continuously (return to first slide after last).
Tip:
- Enabled: Seamless experience, users can navigate infinitely, recommended.
- Disabled: Carousel stops at first/last slide, more traditional navigation.
- Looping is especially useful for product carousels and image galleries.

Transition Speed

Setting ID: swiper_speed
Type: Range
Range: 300-1000ms
Step: 100ms
Default: 600ms
Description: Speed of slide transitions (how fast slides change).
Tip:
- 600ms: Standard, smooth, balanced speed.
- 300-400ms: Fast, snappy, modern feel.
- 700-800ms: Slower, more deliberate, elegant.
- 900-1000ms: Very slow, dramatic transitions.

Arrow Animation

Enable Arrow Animations

Setting ID: swiper_arrow_animation
Type: Checkbox
Default: Enabled
Description: Add smooth transitions and hover effects to arrows.
Tip:
- Animations make arrows feel more interactive and polished.
- Disable for a simpler, static appearance.
- Consider accessibility - some users prefer reduced motion.

Animation Type

Setting ID: swiper_arrow_animation_type
Type: Select
Options:
- Fade in/out
- Slide in/out
- Scale on hover (default)
- No animation
Description: Type of animation effect for arrows.
Tip:
- Scale on hover: Subtle, professional, universally appealing, recommended.
- Fade in/out: Smooth appearance/disappearance, elegant.
- Slide in/out: Arrows slide into view, dynamic effect.
- No animation: Static appearance, minimal design.

Animation Duration

Setting ID: swiper_arrow_animation_duration
Type: Range
Range: 100-500ms
Step: 50ms
Default: 200ms
Description: How long arrow animations take to complete.
Tip:
- 200ms: Standard, feels responsive and smooth.
- 100-150ms: Fast, snappy, immediate feedback.
- 300-400ms: Slower, more noticeable, deliberate.
- 500ms: Very slow, dramatic, may feel sluggish.

Accessing Carousel & Sliders Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Carousel & Sliders from the settings categories.
Adjust your arrow style, visibility, pagination, global settings, and animations.
Click Save in the top right to apply changes.

Carousel & Sliders Best Practices

User Experience

Clear Navigation: Ensure arrows and pagination are clearly visible and indicate interactivity.
Hover Feedback: Provide visual feedback when hovering over navigation elements.
Mobile Optimization: Consider hiding arrows on mobile where swipe gestures are natural.
Autoplay Considerations: Use autoplay sparingly and ensure users can pause/control it.

Visual Design

Consistent Styling: Match arrow and pagination colors with your overall color scheme.
Subtle but Visible: Arrows should be noticeable without overpowering content.
Positioning: Choose arrow position based on your content type (overlay works well for images).

Performance

Animation Duration: Keep animations fast (200-300ms) for responsive feel.
Transition Speed: Balance between smooth transitions and performance (600ms is standard).
Reduced Motion: Respect user preferences for reduced motion when possible.

Accessibility

Touch Targets: Ensure arrows are large enough for easy tapping on mobile (minimum 44x44px).
Keyboard Navigation: Carousels should be navigable with keyboard controls.
Screen Readers: Ensure pagination indicators are accessible to screen readers.
Autoplay Control: Provide pause/play controls for autoplaying carousels.

Blog & Articles

Blog and article settings control how your blog posts are displayed throughout your store. These settings affect the blog listing page, individual article pages, and article metadata, ensuring a consistent and readable blog experience.

Blog Layout

Setting ID: blog_layout
Type: Select
Options:
- Grid (default)
- List
Description: Layout style for the blog listing page.
Tip:
- Grid: Articles displayed in a grid format, modern, showcases featured images well, recommended for visual content.
- List: Articles displayed in a vertical list, traditional, better for text-heavy blogs, easier to scan.
- Grid works well for lifestyle, fashion, and visual brands.
- List works well for news, educational, and text-focused content.

Articles Per Page

Setting ID: articles_per_page
Type: Range
Range: 6-24
Step: 2
Default: 12
Description: Number of articles displayed per page on the blog listing.
Tip:
- 12: Standard, good balance between content and page load.
- 6-8: Fewer articles, faster loading, more focused.
- 16-20: More articles, less pagination, good for active blogs.
- 24: Maximum, shows many articles but may slow page load.

Article Display

Show Author

Setting ID: show_author
Type: Checkbox
Default: Enabled
Description: Display the article author name on blog listings and article pages.
Tip:
- Builds trust and personalizes content.
- Useful for multi-author blogs.
- Disable if you have a single author or prefer minimal metadata.

Show Publish Date

Setting ID: show_date
Type: Checkbox
Default: Enabled
Description: Display the article publication date.
Tip:
- Helps readers understand content freshness.
- Important for time-sensitive content.
- Disable for evergreen content where date is less relevant.

Show Reading Time

Setting ID: show_reading_time
Type: Checkbox
Default: Enabled
Description: Display estimated reading time for articles.
Tip:
- Helps readers plan their time.
- Improves user experience by setting expectations.
- Useful for longer-form content.
- Disable if you prefer a cleaner, simpler display.

Show Tags

Setting ID: show_tags
Type: Checkbox
Default: Enabled
Description: Display article tags on blog listings and article pages.
Tip:
- Helps readers find related content.
- Improves SEO and content discoverability.
- Useful for organizing content by topics.
- Disable if you don't use tags or prefer minimal metadata.

Show Categories

Setting ID: show_categories
Type: Checkbox
Default: Enabled
Description: Display article categories on blog listings and article pages.
Tip:
- Helps organize and navigate blog content.
- Useful for blogs with multiple topics or themes.
- Improves content structure and discoverability.
- Disable if you don't use categories.

Featured Images

Article Image Ratio

Setting ID: article_image_ratio
Type: Select
Options:
- Square (1:1)
- Portrait (3:4)
- Landscape (4:3, default)
- Wide (16:9)
Description: Aspect ratio for featured images on blog listings and article pages.
Tip:
- Landscape (4:3): Standard, works well for most content, recommended.
- Square (1:1): Creates uniform grid, modern aesthetic, good for Instagram-style content.
- Portrait (3:4): Vertical format, good for fashion, lifestyle, portrait-oriented images.
- Wide (16:9): Cinematic, good for video thumbnails or wide hero images.

Article Styles

Article Content Width

Setting ID: article_content_width
Type: Range
Range: 600-1100px
Step: 10px
Default: 760px
Description: Maximum width of article content for optimal readability.
Tip:
- 760px: Standard reading width, optimal for readability, recommended.
- 600-700px: Narrower, focused reading, good for mobile-first designs.
- 800-900px: Wider, more spacious, good for articles with images or code blocks.
- 1000-1100px: Very wide, best for content with wide images or tables.

Content Spacing

Setting ID: article_content_spacing
Type: Range
Range: 16-64px
Step: 4px
Default: 32px
Description: Vertical spacing between content elements (paragraphs, headings, images).
Tip:
- 32px: Standard spacing, good balance, recommended.
- 16-24px: Tighter spacing, more content visible, compact.
- 40-48px: More spacious, easier to read, modern editorial feel.
- 56-64px: Very spacious, maximum breathing room, best for long-form content.

Featured Image Corner Radius

Setting ID: article_image_radius
Type: Range
Range: 0-40px
Step: 2px
Default: 16px
Description: Border radius for featured images (rounded corners).
Tip:
- 16px: Modern, soft edges, recommended.
- 0px: Sharp corners, clean, architectural.
- 8px: Subtle rounding.
- 24-40px: Very rounded, playful, friendly aesthetic.

Heading Alignment

Setting ID: article_heading_alignment
Type: Select
Options: Left (default), Center, Right
Description: Text alignment for article headings.
Tip:
- Left: Standard, traditional, easy to read, recommended for most content.
- Center: More dramatic, good for hero articles or featured posts.
- Right: Less common, use for specific design purposes.

Comments

Enable Comments

Setting ID: enable_comments
Type: Checkbox
Default: Enabled
Description: Allow readers to comment on blog articles.
Tip:
- Encourages engagement and community building.
- Can improve SEO through user-generated content.
- Disable if you don't want to moderate comments or prefer a simpler blog.
- Consider moderation requirements before enabling.

Moderate Comments

Setting ID: moderate_comments
Type: Checkbox
Default: Enabled
Description: Require approval before comments are published.
Tip:
- Enabled: Recommended, prevents spam and inappropriate content.
- Disabled: Comments publish immediately, requires active monitoring.
- Always enable moderation for brand safety and quality control.

Accessing Blog & Articles Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Blog & Articles from the settings categories.
Configure your blog layout, article display, featured images, article styles, and comments.
Click Save in the top right to apply changes.

Blog & Articles Best Practices

Content Organization

Layout Choice: Choose grid for visual content, list for text-heavy blogs.
Articles Per Page: Balance between showing enough content and page load speed (12 is standard).
Metadata Display: Show relevant metadata (author, date, tags) to help readers find and understand content.

Readability

Content Width: Use 600-800px for optimal reading experience (760px is standard).
Content Spacing: Adequate spacing (32px+) improves readability and reduces eye strain.
Heading Alignment: Left alignment is most readable for longer articles.

Visual Design

Image Ratio: Choose aspect ratio based on your content type (landscape works well for most).
Image Radius: Match border radius with your overall theme styling for consistency.
Consistent Styling: Ensure article styles match your overall brand aesthetic.

Engagement

Comments: Enable comments to build community, but always moderate for quality.
Tags & Categories: Use tags and categories to help readers discover related content.
Reading Time: Show reading time to set expectations and improve user experience.

Performance

Articles Per Page: Don't overload pages with too many articles (12-16 is optimal).
Image Optimization: Optimize featured images for fast loading.
Content Width: Appropriate width improves rendering performance.

Social Media

Social media settings allow you to add links to your social media profiles throughout your store. These links typically appear in the footer, header, or dedicated social media sections, helping customers connect with your brand across different platforms.

Social Media Links

YouTube

Setting ID: social_youtube_link
Type: Text
Description: Full URL to your YouTube channel or profile.
Tip:
- Include the full URL (e.g., https://www.youtube.com/@yourchannel or https://www.youtube.com/c/yourchannel).
- Use your channel's custom URL if available for a cleaner link.
- Leave empty if you don't have a YouTube presence.

Facebook

Setting ID: social_facebook_link
Type: Text
Description: Full URL to your Facebook page or profile.
Tip:
- Include the full URL (e.g., https://www.facebook.com/yourpage).
- Use your page's custom username for a cleaner URL.
- Leave empty if you don't have a Facebook presence.

Instagram

Setting ID: social_instagram_link
Type: Text
Description: Full URL to your Instagram profile.
Tip:
- Include the full URL (e.g., https://www.instagram.com/yourusername).
- Instagram URLs are typically simple: instagram.com/username.
- Leave empty if you don't have an Instagram presence.

TikTok

Setting ID: social_tiktok_link
Type: Text
Description: Full URL to your TikTok profile.
Tip:
- Include the full URL (e.g., https://www.tiktok.com/@yourusername).
- TikTok URLs use the format: tiktok.com/@username.
- Leave empty if you don't have a TikTok presence.

Snapchat

Setting ID: social_snapchat_link
Type: Text
Description: Full URL to your Snapchat profile or Snapcode.
Tip:
- Include the full URL (e.g., https://www.snapchat.com/add/yourusername).
- Snapchat URLs use the format: snapchat.com/add/username.
- Leave empty if you don't have a Snapchat presence.

Setting ID: social_pinterest_link
Type: Text
Description: Full URL to your Pinterest profile or board.
Tip:
- Include the full URL (e.g., https://www.pinterest.com/yourusername).
- Pinterest URLs use the format: pinterest.com/username.
- Leave empty if you don't have a Pinterest presence.

X (formerly Twitter)

Setting ID: social_x_link
Type: Text
Description: Full URL to your X (Twitter) profile.
Tip:
- Include the full URL (e.g., https://www.x.com/yourusername or https://twitter.com/yourusername).
- Both x.com and twitter.com URLs work.
- Leave empty if you don't have an X/Twitter presence.

Setting ID: social_linkedin_link
Type: Text
Description: Full URL to your LinkedIn company page or personal profile.
Tip:
- Include the full URL (e.g., https://www.linkedin.com/company/yourcompany or https://www.linkedin.com/in/yourprofile).
- Use company page for businesses, personal profile for individuals.
- Leave empty if you don't have a LinkedIn presence.

Setting ID: social_telegram_link
Type: Text
Description: Full URL to your Telegram channel or group.
Tip:
- Include the full URL (e.g., https://t.me/yourchannel).
- Telegram URLs use the format: t.me/username or t.me/channelname.
- Leave empty if you don't have a Telegram presence.

Setting ID: social_reddit_link
Type: Text
Description: Full URL to your Reddit profile or subreddit.
Tip:
- Include the full URL (e.g., https://www.reddit.com/user/yourusername or https://www.reddit.com/r/yoursubreddit).
- Use user profile for personal accounts, subreddit for communities.
- Leave empty if you don't have a Reddit presence.

Setting ID: social_whatsapp_link
Type: Text
Description: Full URL to your WhatsApp business profile or chat link.
Tip:
- Include the full URL (e.g., https://wa.me/1234567890 or https://api.whatsapp.com/send?phone=1234567890).
- WhatsApp links use the format: wa.me/phonenumber (numbers only, no spaces or dashes).
- Leave empty if you don't have a WhatsApp business presence.

Accessing Social Media Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Social Media from the settings categories.
Enter the full URLs for each social media platform you want to link to.
Click Save in the top right to apply changes.

Social Media Best Practices

Link Format

Full URLs: Always include the complete URL starting with https:// for all social media links.
Custom URLs: Use custom usernames/URLs when available for cleaner, more professional links.
Test Links: Always test your social media links after adding them to ensure they work correctly.

Platform Selection

Relevant Platforms: Only add links to platforms where you have an active presence.
Quality Over Quantity: It's better to have a few active social profiles than many inactive ones.
Brand Consistency: Ensure your social media profiles match your brand identity and messaging.

User Experience

Footer Placement: Social media links are commonly placed in the footer for easy access.
Icon Design: Ensure social media icons are clearly recognizable and match your design aesthetic.
Mobile Optimization: Social media links should be easily tappable on mobile devices.

Marketing

Cross-Promotion: Use social media links to drive traffic between your store and social profiles.
Community Building: Active social media presence helps build brand community and loyalty.
Customer Support: Some platforms (like WhatsApp) can be used for customer support.

Privacy & Security

Valid Links: Only add links to official social media platforms to avoid security issues.
Regular Updates: Keep social media links updated if you change usernames or close accounts.
Professional Accounts: Use business/company accounts when available for a more professional appearance.

Animations

Animation settings control scroll-triggered animations throughout your store. These settings allow you to enable or disable animations and configure accessibility preferences, ensuring a polished user experience while respecting user preferences.

Scroll Animations

Enable Scroll Animations

Setting ID: animations_enabled
Type: Checkbox
Default: Enabled
Description: Add scroll-triggered animations to elements as they come into view.
Tip:
- Animations add polish and visual interest to your store.
- Creates a modern, dynamic feel as users scroll.
- Disable for a simpler, static appearance or if you prefer minimal interactions.
- Consider performance impact on slower devices.

Accessibility

Respect Reduced Motion Preference

Setting ID: respect_reduced_motion
Type: Checkbox
Default: Enabled
Description: Disable animations for users who prefer reduced motion (respects prefers-reduced-motion CSS media query).
Tip:
- Enabled: Recommended, improves accessibility and respects user preferences.
- Some users experience motion sickness or prefer minimal animations.
- Modern browsers support the prefers-reduced-motion media query.
- Always enable this setting for better accessibility compliance.

Enable Animations in Theme Editor

Setting ID: animation_design_mode
Type: Checkbox
Default: Disabled
Description: Show animations while editing in the theme customizer.
Tip:
- Disabled: Animations are hidden in the editor for better editing experience (default).
- Enabled: Animations play in the editor, useful for previewing animation effects.
- Enable when you need to see how animations look while customizing.
- May slow down the editor if many animated elements are present.

Accessing Animations Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Animations from the settings categories.
Enable or disable scroll animations and configure accessibility preferences.
Click Save in the top right to apply changes.

Animations Best Practices

User Experience

Subtle Effects: Use animations sparingly and keep them subtle for professional results.
Performance: Test animations on slower devices to ensure smooth performance.
Purpose: Use animations to guide attention or enhance content, not just for decoration.
Timing: Keep animation durations short (200-400ms) for responsive feel.

Accessibility

Respect Preferences: Always enable "Respect reduced motion preference" for accessibility compliance.
Keyboard Navigation: Ensure animated elements don't interfere with keyboard navigation.
Screen Readers: Animations should enhance, not replace, important content.
Motion Sensitivity: Some users are sensitive to motion - respect their preferences.

Performance

Limit Animations: Don't animate too many elements at once to avoid performance issues.
GPU Acceleration: Modern browsers handle transform-based animations (like zoom) efficiently.
Test on Devices: Test animations on various devices to ensure smooth performance.
Reduce Complexity: Simple animations perform better than complex ones.

Design

Consistency: Use consistent animation styles throughout your store.
Brand Alignment: Ensure animations match your brand's personality (playful vs. professional).
Content First: Animations should enhance content, not distract from it.
Cascade Effects: Use staggered animations for lists or grids to create visual flow.

Implementation

CSS Classes: Use the provided animation classes rather than creating custom animations when possible.
Cascade Delays: Use appropriate delay values (100-300ms) for cascading effects.
Testing: Test animations in different browsers and devices.
Editor Mode: Enable animations in editor only when needed for previewing.

Floating Menu

Floating menu settings control the appearance of the floating menu button and panel that appears on your store. The floating menu provides quick access to navigation or important links and can be styled in two ways: as a button or integrated with the header. These settings allow you to customize colors for both the menu trigger and the menu panel.

Floating Menu Button

The button style displays a floating button that opens a menu panel when clicked. This is useful for quick navigation access without taking up header space.

Button Background

Setting ID: floating_menu_button_bg
Type: Color
Default: #000000 (black)
Description: Background color for the floating menu button.
Tip:
- Should be prominent and visible against your page backgrounds.
- Often matches your primary button color for consistency.
- High contrast colors work best (black, dark blue, brand colors).
- Consider using your brand's primary color.

Button Text/Icon Color

Setting ID: floating_menu_button_text
Type: Color
Default: #FFFFFF (white)
Description: Text and icon color for the floating menu button.
Tip:
- Must have strong contrast with the button background (minimum 4.5:1).
- White or very light colors work best on dark button backgrounds.
- Test contrast ratios for accessibility compliance.

Menu Panel Background (Button Style)

Setting ID: floating_menu_button_panel_bg
Type: Color
Default: #FFFFFF (white)
Description: Background color for the floating menu panel when using button style.
Tip:
- Should contrast with the button color to create clear separation.
- White or light colors provide good contrast with dark buttons.
- Consider your overall color scheme for consistency.

Menu Panel Text Color (Button Style)

Setting ID: floating_menu_button_panel_text
Type: Color
Default: #000000 (black)
Description: Text color for the floating menu panel when using button style.
Tip:
- Must have sufficient contrast with the panel background (WCAG AA requires 4.5:1).
- Dark colors work well on light backgrounds.
- Ensure readability for all menu items.

Floating Menu Header

The header style integrates the floating menu with your site header, providing a cohesive navigation experience that matches your header design.

Header Background

Setting ID: floating_menu_header_bg
Type: Color
Default: #FFFFFF (white)
Description: Background color for the floating menu header.
Tip:
- Should match or complement your main header background.
- Creates seamless integration with your header design.
- Consider your header's color scheme for consistency.

Header Text Color

Setting ID: floating_menu_header_text
Type: Color
Default: #000000 (black)
Description: Text color for the floating menu header.
Tip:
- Must contrast well with the header background.
- Should match your header text color for consistency.
- Ensure readability for all header elements.

Menu Panel Background (Header Style)

Setting ID: floating_menu_header_panel_bg
Type: Color
Default: #FFFFFF (white)
Description: Background color for the floating menu panel when using header style.
Tip:
- Should complement the header background.
- White or light colors provide good contrast and readability.
- Consider your overall design aesthetic.

Menu Panel Text Color (Header Style)

Setting ID: floating_menu_header_panel_text
Type: Color
Default: #000000 (black)
Description: Text color for the floating menu panel when using header style.
Tip:
- Must have sufficient contrast with the panel background.
- Should be readable and match your overall text color scheme.
- Dark colors work well on light backgrounds.

Accessing Floating Menu Settings

Go to Online Store → Themes → Customize.
Click the Theme settings icon (gear icon) in the left sidebar.
Select Floating Menu from the settings categories.
Configure colors for the floating menu button or header style.
Adjust menu panel colors to match your design.
Click Save in the top right to apply changes.

Floating Menu Best Practices

Design Consistency

Color Harmony: Match floating menu colors with your overall color scheme and header design.
Button vs Header: Choose the style that best fits your design - button for standalone navigation, header for integrated experience.
Panel Contrast: Ensure menu panel has sufficient contrast with the trigger element for clear separation.

User Experience

Visibility: Ensure the floating menu button is clearly visible and recognizable as a navigation element.
Accessibility: Maintain high contrast ratios for all text and backgrounds (WCAG AA requires 4.5:1).
Touch Targets: Ensure the floating menu button is large enough for easy tapping on mobile devices (minimum 44x44px).

Visual Hierarchy

Button Prominence: The floating menu button should be noticeable but not overpowering.
Panel Readability: Menu panel text should be easily readable with sufficient contrast.
Integration: Header style should seamlessly integrate with your header design.

Brand Consistency

Color Matching: Use colors from your brand palette for consistency.
Style Alignment: Match the floating menu style with your overall design aesthetic.
Professional Appearance: Ensure colors create a polished, professional look.

Accessibility

Color Contrast: All text must meet WCAG AA contrast requirements (4.5:1 for normal text).
Clear Indicators: Ensure the floating menu is clearly identifiable as a navigation element.
Keyboard Navigation: Floating menu should be accessible via keyboard navigation.

Custom CSS

Custom CSS allows you to add your own styles to override or extend the theme's default styling. While there may not be a dedicated "Custom CSS" field in global theme settings, you can add custom CSS through the Custom Code section or by creating a custom CSS asset file.

Adding Custom CSS

There are several ways to add custom CSS to your theme:

Method 1: Custom Code Section

The theme includes a "Custom code" section that allows you to add HTML, Liquid, CSS, and JavaScript. This is the recommended method for adding custom CSS.

Go to Online Store → Themes → Customize.
Click Add section and select Custom code.
In the section settings, find the CSS field.
Add your custom CSS code.
Click Save to apply changes.

Note: CSS added through the Custom Code section is applied globally to your theme.

Method 2: Custom CSS Asset File

For more advanced customization, you can create a custom CSS file in the assets folder:

Create a new file in your theme's assets folder (e.g., custom.css).
Add your CSS code to the file.
Reference it in your theme's layout file (layout/theme.liquid):
```
{{ 'custom.css' | asset_url | stylesheet_tag }}
```

Method 3: Inline Styles in Sections

You can add CSS directly in section schema using the {%- style -%} tag:

{%- style -%}
  .custom-class {
    color: #000000;
  }
{%- endstyle -%}

CSS Best Practices

Specificity and Overrides

Use Specific Selectors: Target elements with specific classes or IDs to avoid unintended style conflicts.
Theme Classes: Familiarize yourself with the theme's CSS class structure before overriding.
!important: Use !important sparingly - prefer more specific selectors when possible.

Example:

/* Good - Specific selector */
.product-card .product-title {
  color: #ff0000;
}

/* Avoid - Too generic */
.title {
  color: #ff0000;
}

Organization

Group Related Styles: Organize CSS by component or page type.
Comments: Add comments to explain complex styles or overrides.
Consistent Formatting: Maintain consistent indentation and formatting.

Example:

/* ============================================
   Product Card Overrides
   ============================================ */

.product-card {
  /* Card styling */
  border-radius: 12px;
}

.product-card__title {
  /* Title styling */
  font-size: 18px;
}

Responsive Design

Mobile-First: Write mobile styles first, then use media queries for larger screens.
Breakpoints: Use the theme's existing breakpoints for consistency.
Test on Devices: Always test custom CSS on multiple devices and screen sizes.

Example:

/* Mobile first */
.custom-element {
  padding: 16px;
}

/* Tablet and up */
@media screen and (min-width: 768px) {
  .custom-element {
    padding: 24px;
  }
}

/* Desktop */
@media screen and (min-width: 1024px) {
  .custom-element {
    padding: 32px;
  }
}

Performance

Minimize CSS: Only add CSS that's necessary - avoid duplicating existing styles.
Avoid Deep Nesting: Keep CSS selectors relatively flat for better performance.
Use CSS Variables: Leverage the theme's CSS variables when possible for consistency.

Example:

/* Use theme variables */
.custom-button {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

Browser Compatibility

Vendor Prefixes: Add vendor prefixes for experimental features if needed.
Fallbacks: Provide fallback values for newer CSS features.
Test Across Browsers: Test custom CSS in major browsers (Chrome, Firefox, Safari, Edge).

Common Custom CSS Use Cases

Color Overrides

/* Override primary button color */
.button--primary {
  background-color: #your-brand-color;
}

Typography Adjustments

/* Adjust heading font size */
h1 {
  font-size: 2.5rem;
}

/* Custom font weight */
.body-text {
  font-weight: 500;
}

Spacing Modifications

/* Adjust section spacing */
.section {
  margin-bottom: 60px;
}

/* Custom padding */
.custom-container {
  padding: 40px 20px;
}

Layout Changes

/* Change grid columns */
.product-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Hide/Show Elements

/* Hide element */
.hide-on-mobile {
  display: none;
}

@media screen and (min-width: 768px) {
  .hide-on-mobile {
    display: block;
  }
}

Troubleshooting Custom CSS

Styles Not Applying

Check Specificity: Your selector might not be specific enough.
Inspect Element: Use browser DevTools to see which styles are being applied.
Clear Cache: Clear browser cache and Shopify theme cache.
Check Syntax: Ensure CSS syntax is correct (no missing semicolons, brackets, etc.).

Conflicts with Theme Styles

Use More Specific Selectors: Increase selector specificity.
Check Load Order: Ensure your CSS loads after theme CSS.
Use CSS Variables: Override CSS variables instead of individual properties when possible.

Performance Issues

Minimize CSS: Remove unused CSS rules.
Avoid Complex Selectors: Keep selectors simple and efficient.
Use Transform/Opacity: For animations, prefer transform and opacity for better performance.

Accessibility Considerations

Color Contrast: Ensure custom colors meet WCAG AA contrast requirements (4.5:1 for normal text).
Focus States: Maintain visible focus indicators for keyboard navigation.
Text Sizing: Don't make text too small (minimum 16px recommended).
Reduced Motion: Respect prefers-reduced-motion when adding animations.

Accessing Custom CSS

Via Custom Code Section

Go to Online Store → Themes → Customize.
Click Add section → Custom code.
Scroll to the CSS field in the section settings.
Add your custom CSS code.
Click Save in the top right to apply changes.

Via Theme Files (Advanced)

Access your theme files via Online Store → Themes → Actions → Edit code.
Navigate to the assets folder.
Create or edit a CSS file (e.g., custom.css).
Add your CSS code and save.
Reference the file in layout/theme.liquid if needed.

Custom CSS Best Practices Summary

Do's

✅ Use specific selectors to target elements
✅ Organize CSS with comments and grouping
✅ Test on multiple devices and browsers
✅ Use theme CSS variables when possible
✅ Write mobile-first responsive CSS
✅ Maintain accessibility standards
✅ Keep CSS organized and documented

Don'ts

❌ Don't use !important unnecessarily
❌ Don't duplicate existing theme styles
❌ Don't use overly generic selectors
❌ Don't ignore responsive design
❌ Don't break accessibility guidelines
❌ Don't add CSS without testing
❌ Don't forget to document complex styles

End of Guide

Global Theme Settings Guide

Table of Contents

Typography

Fonts

Heading Font

Body Font

Font Weights

Normal Weight

Bold Weight

Font Sizes

Base Font Size

Accessing Typography Settings

Typography Best Practices

Font Pairing

Readability

Performance

Color Schemes

About Color Schemes

Color Definitions

General Colors

Background

Elevated Background

Surface (Cards)

Border

Text

Text (Muted)

Primary Button

Primary Button Color

On Primary Button

Primary Button Hover

Secondary Button

Secondary Button Color

On Secondary Button

Outline Button

Outline Button Border Color

Outline Button Text Color

Outline Button Hover

Links

Link Color

Link Hover

Accent

Accent Color

Color Scheme Roles

Accessing Color Scheme Settings

Color Scheme Best Practices

Creating Multiple Schemes

Color Contrast

Brand Consistency

Accessibility

Layout

Site Colors

Site Background Color

Site Text Color

Page Width

Page Width

Site Padding

Spacing

Space Between Sections

Gap Between Blocks

Page Margin

Section Styling

Section Border Radius

Accessing Layout Settings

Layout Best Practices

Responsive Design

Visual Hierarchy

Content Width

Spacing Guidelines

Buttons & Inputs

Button Appearance

Button Border Radius

Button Animations

Enable Button Animations

Button Animation Type

Button Shadows

Enable Button Shadows

Button Shadow Intensity

Input Appearance

Input Border Radius

Input Border Width