Skip to main content

Design & Themes

Customize the look and feel of your storefront to match your brand identity.

Theme Appearance​

Configure your store's visual elements and design settings from Design > Appearance.

Theme Appearance

Shop Design​

  • Logo URL - Set your store logo image
  • Logo Width - Adjust logo display size
  • Favicon URL - Set the browser tab icon

Shop Announcement​

Enable an announcement banner at the top of your storefront:

  • Message - The announcement text
  • Title - Banner heading
  • Date - When the announcement expires
  • Image URL - Banner background image
  • CTA Link - Link for the call-to-action button

Configure the homepage hero carousel:

  • Enable/disable the carousel
  • Add multiple carousel items with images and links
  • Set items as mobile-only or desktop-only
  • Add and remove carousel slides

Connect your social media accounts:

  • Facebook, Instagram, LinkedIn, YouTube
  • Twitter/X, Pinterest, TikTok, Snapchat, WhatsApp

Header Menu​

Customize the navigation menu from Design > Header Menu.

Header Menu

Configure navigation items that appear in the storefront header, including:

  • Menu item labels
  • Link URLs
  • Dropdown sub-menus
  • Menu item ordering

Manage footer content from Design > Footer.

Footer

Customize your footer sections:

  • Company information links
  • Support links
  • Contact information
  • Custom link groups

Manage social media links that appear in the storefront from Design > Social Links.

Social Links

Theme Templates​

Choose from multiple theme designs from Design > Theme Templates.

Theme Select

Browse and apply different theme templates to change your storefront's overall look. Each theme provides a unique layout and visual style.

Custom Homepage​

For advanced customization, use the Custom Homepage Editor at Design > Custom Homepage.

Custom Homepage

The custom homepage editor provides:

  • Full file explorer for your custom code
  • HTML, CSS, and JavaScript editing
  • Upload custom files
  • Create new files and folders
  • Enable/disable custom homepage
  • Code editor with syntax highlighting

This allows you to build a completely custom homepage using your own HTML, CSS, and JavaScript, giving you full control over the storefront design.

Storefront Design​

Fine-tune your storefront's visual appearance with granular color and style controls from Design > Appearance > Storefront Design.

Header Customization​

  • Hide Shop Name — Toggle to hide the shop name text from the header (useful when your logo already contains the name)
  • Header Background Color — Set the background color for the storefront header
  • Header Text Color — Set the text and icon color in the header

Primary Color​

  • Primary / Accent Color — The main accent color used across your storefront for buttons, links, highlights, and interactive elements

Button Style​

  • Button Style — Choose the button appearance:
    • Rounded — Buttons with rounded corners (default)
    • Square — Buttons with sharp corners
    • Pill — Fully rounded pill-shaped buttons
  • Footer Background Color — Set the background color for the storefront footer
  • Footer Text Color — Set the text color in the footer

Announcement Bar Colors​

  • Announcement Background Color — Background color for the top announcement bar
  • Announcement Text Color — Text color for the announcement bar content

Custom CSS​

  • Custom CSS — Add your own CSS rules to further customize the storefront appearance. This CSS is injected into every page of your storefront, giving you full control over any element's styling.
tip

Use the browser's developer tools (right-click > Inspect) to identify CSS class names and element selectors for targeting specific components with custom CSS.