Default eCommerce theme

This eCommerce theme is the default theme in eCommerce installations. All themes have theme settings used for adapting, for example, the colors, layout and the content for elements such as the header, footer and first page.

Theme previewed in theme settings
Default eCommerce theme shown in theme settings editor

For latest updates, upload from github: eCommerce theme on github

Color themes

The theme has over 30 color themes to choose from.

A clean colortheme with white as main color and blue in headerColortheme with beige as background color and pink in headerA dark colortheme with a darkblue background and pink top-heading
Color themes for eCommerce theme

Header

Header in eCommerce theme

Header including: Logo, navigation, autosearch, language selector, currency selector, account button, and cart button.

theme header
Header in desktop width where autosearch component is shown.
mobile header with the theme
Header shown in mobile width.

Homepage

Hero section

Hero section of the eCommerce theme with large background image
Over the fold or Hero section with large background image or video.

An optional hero section with adjustable height, background image or video and A card with title, description, image, and button.

Banners

  • Title and descriptive text
  • Up to two links
  • Image (displayed next to the text or in full-width beneath)
  • Collection
  • Background color

Collection and links

banner section with heading, description, image and collection

Fullwidth image

Footer

The footer is built to adapt to the provided information.

  • Logo or image
  • Descriptive text
  • Custom button
  • Navigation link lists
  • Social media links
  • Payment methods
Footer in test theme
Footer with two link lists, social media icons, payment methods.

Theme customizations

There is full access to the theme code in the theme editor, but altering the theme makes updates harder to follow.

Include custom script file

Adding content to a custom script file.

Add in scripts, commonly needed when using 3rd party tools, and still be able to use the update function.

  1. Go to theme files editor and add in a file in assets called custom.js
  2. Add the code into the file, remove any <script> tags, remember to look for the closing tag as well </script>.
  3. Go to theme settings > global and tick include custom script file

Include custom meta data

  1. Go to theme files editor and add in a file in assets called customMeta.liquid
  2. Add the meta data into the file.
  3. Go to theme settings > global and tick include custom meta file