Help Center
Login

App Editor and CSS snippet codes

Last updated:

Import SCSS custom code with the App Editor to improve Eshop experience.


Color Variables

A hex color is a way to describe a specific color using a combination of six letters and numbers. Hex colors are commonly used in web design and digital graphics to ensure precise color selection.

Note: You can also import variables from your color panel, using var(--primary), var(--secondary) and var(--warning).

Snippet codes

Hide filters from Catalogue page

//* Hide filters from Catalogue page *//

#catalogue>.content #filters .filterSection.genres{
display:none
}

In this example, we hide .genres, but we can replace it with any filter from the following list:
​

.showSoldOut
​.categories
​.genres

.styles

.mediums

.formats

.labels

.artists

.years

.countries

Adjust filters order for Catalogue page

//* Filter Order adjustement *//

#catalogue > .content #filters .filterSection.column {
  &.styles {
    order: 2; // Order adjustement for Filter
  }

  &.genres {
    order: 3; // Order adjustement for Filter
  }

  &.categories {
    order: 4; // Order adjustement for Filter
  }

  &.labels {
    order: 5; // Order adjustement for Filter
  }

  &.formatDescriptions {
    order: 6; // Order adjustement for Filter
  }

  &.formats {
    order: 7; // Order adjustement for Filter
  }

  &.years {
    order: 8; // Order adjustement for Filter
  }

  &.countries {
    order: 9; // Order adjustement for Filter
  }

  &.artists {
    order: 10; // Order adjustement for Filter
    font-weight: 400;
  }

  &.manufacturers {
    order: 11; // Order adjustement for Filter
  }

  &.types {
    order: 12; // Order adjustement for Filter
  }
}

Load Catalogue page with opened filters

https://myShopName.common-ground.io/catalogue?filters=open

//* Hide cookie banner during edition *//
#cookies {
  display: none; 
}

#cookies > .content {
  background-color: #rrggbb !important; // set a background color
}

Display Top Header menu for mobile

For responsive reasons, Eshop app hide Top Header navigation on mobile devices. If you want to bypass the feature, use the following snippet code:

//* Display Top Header menu for mobile *//

.menu.topHeader.mobile { 
display: inherit; 
}

Add a hover statut color for action icons

//* Add a hover statut color for action icons *//

[class^="cg-icon-"]:hover{
  color: #rrggbb; // set a color
}

Set mobile menu background color

//* Set mobile menu background color *//

#mobileMenu {
  background-color: #rrggbb !important; // set a background color 
}

Add tracklist animations

//* Add tracklist animations *//

.track.playable {
  transition-duration: 0.6s;
  opacity: 1;
  padding: 10px;
  text-overflow: ellipsis !important;
}

.track.playable:hover {
  background-color: #rrggbb;// set a background color when mouse hover
  transition-duration: 0.2s;
  opacity: 1;
  padding: 10px;
  padding-left: 4%;
  text-overflow: ellipsis !important;
}

.track.playable:active {
  background-color: #rrvvbb; // set a background color when active
  transition-duration: 0.5s;
  opacity: 1;
  padding: 10px;
  padding-left: 5%;
  text-overflow: ellipsis !important;
}

Add styles animations

//* Add Link styles animations *//

.styles {
  padding-top: 10px;
  line-height:30px;
}

.styles > a {
  margin-right: 10px;
  color: #fff;
  padding: 4px;
  background-color: #rrvvbb; // set a background color on styles
  border-radius: 5px;
}

.styles > a:hover {
  margin-right: 10px;
  color: #000;
  padding: 4px;
  background-color: #rrvvbb; // set a background color when mouse hover
  border-radius: 5px;
  transition-duration: 0.5s;
  opacity: 1;
}

Add animations on tiles artworks

.tile img:hover {
  transform: scale(1.02); 
  transition-duration: 0.1s;
}

img {
  border-radius: 30px !important;
  transition-duration: 0.3s;
}

Add gradient colors to header navigation

#header {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0),
    rgba(0, 255, 144, 1)
  );
  position: sticky;
  top: 0;
}

Add animation for items buy/share/wantlist buttons

#item > .content .buttons .buyButton,
#item > .content .buttons .shareButton,
#item > .content .buttons .wantlistButton,
#item > .content .buttons .snippetDownload {
  border-bottom: 1px solid;
  padding: 0px;
  padding-bottom: 10px;
  border-color: #rrggbb; // set a border color on buttons
}

#item > .content .buttons .buyButton:hover,
#item > .content .buttons .shareButton:hover,
#item > .content .buttons .wantlistButton:hover,
#item > .content .buttons .snippetDownload:hover {
  border-bottom: 5px solid;
  transition-duration: 0.5s;
  padding: 0px;
  padding-bottom: 10px;
  border-color: #rrggbb; // set a border color when mouse hover
}

Add text animations (marquee)

<marquee>This text will scroll from right to left</marquee> <marquee direction="up">This text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> This text will bounce </marquee> </marquee>

Force records tiles images ratio 1:1

.tile.releaseItem img { 
aspect-ratio: 1; 
}

.menu.navbar { .dropdown { position: unset; .subMenu { position: unset !important; top: unset !important; } } }

Display top Header on Mobile

.menu.topHeader{
display:block !important;
}

Highlight Active Menu Entry

.menu .link.active {
  text-decoration: underline;
}

Was this article helpful?