eCommerce theme

The eCommerce theme is the default theme for 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

Colors

The theme has over 30 color themes to choose from.

A clean colortheme with white as main color and blue in header

Colortheme with beige as background color and pink in header

A dark colortheme with a darkblue background and pink top-heading

Header

Header in eCommerce theme

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

theme header

mobile header with the theme

Homepage

Hero section

An optional hero section with adjustable height.

The hero section can contain:

  • Background image
  • 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