CSS Snippets

By adding CSS snippets, you can drastically alter the styling of your storefront outside of the boundaries of the Instant Commerce customizer by overriding CSS values.

Adding a CSS Snippet

1. Open your Instant Commerce store and go to Custom code.
2. Click Add CSS Snippet.
3. The CSS custom code editor will open.
   • In the code panel on the left side, you can write your custom CSS code. In the live preview on the right, you can evaluate the changes you're making.
4. Save your code when you're done.

Publishing your code

After you save your code, you can toggle it from Draft to Published code. You can only set it to Published after you have saved your code first.

Targetting CSS Classes

For ease of use, we’ve added human-readable class names to pages, sections, and components. When targeting CSS classes, you should only use these human-readable classes. These classes can be found by using the “Inspect element” function in your browser.

caution

Do not use the hashed (non-human-readable) classes; these classes can change without notice with every new release of the Instant Commerce platform.

Use	Don't use
page--home	s_z6eci32d
hero	ky73msb
hero__image-wrapper	_1pcg60g0

info

If you’re missing classes on certain elements that you’d like to target, reach out via support@instantcommerce.io explaining your specific use case.

Scoping your CSS

You might want to scope your CSS to specific pages, sections, or elements. We’ve listed some common examples of classes that you can target to scope your CSS.

Targeting specific pages

Each page template has its own class on the main tag that wraps all sections and components except the Top banner, Navigation, and Footer. This class looks like page--{{name}}, where name is the name of the page template. Use this class to target elements on specific pages:

/* Target all titles of all hero sections on the "Home" page */
.page--home .hero--title {
  font-size: 100px; 
}

/* Target all buttons of all "Product detail" page */
.page--product-detail .button {
  border: 4px solid red;
}

Targeting specific sections

Each section type has its own class on the section tag that wraps all components in the section. This class can be anything like hero, product-slider, or social-gallery. Here, name is the name of the page template. Some examples of targeting elements in specific sections:

/* Target all the image containers of the "Social gallery" section */
.social-gallery .social-gallery__image-link {
    box-shadow: rgb(0 0 0 / 20%) 0px 3px 18px;
  border-radius: 50%;
}

/* Target all the hover effect of all buttons in all "Hero" sections */
.hero .button:hover {
    padding-left: 40px;
  padding-right: 40px;
}

Targeting specific variants of a section

When you add multiple “Variants” of the same section to your storefront, two additional properties on the section tag can be used to target the specific variant: variant and name. Although the name is easier to read as a human, we recommend using the variant property instead since this property will not change when the section is renamed. Example syntax in CSS:

/* Target all titles of the hero variant "5e6885b7" */
.hero[variant="5e6885b7"] .hero--title {
    font-size: 100px; 
}

/* Alternative: Target all titles of the hero variant "Hero - Huge title" */
.hero[name="Hero - Huge title"] .hero--title {
    font-size: 100px; 
}

caution

We recommend not using the name to select target variants since it will change when someone renames the section in the Instant Commerce customizer.

Responsive CSS - Media Queries

Sometimes you want to apply different styling based on the screen width of a customer, for example, different styling for the desktop and mobile styling of a specific section. Below we listed the media queries for the default breakpoints of the frontend.

A rule of thumb when mapping the screen widths to device types:

• Extra small: Mobile phones in portrait mode
• Small: Mobile phones in landscape mode
• Medium: Tablets
• Large: Laptops and desktops
• Extra large: Large laptops and desktops

/* Target small, medium, large, and extra large screens */
@media only screen and (min-width: 768px) { ... }

/* Target medium, large, and extra large screens */
@media only screen and (min-width: 1024px) { ... }

/* Target large and extra large screens */
@media only screen and (min-width: 1280px) { ... }

/* Target extra large screens */
@media only screen and (min-width: 1440px) { ... }


/* Target extra small screens */
@media only screen and (max-width: 767px) { ... }

/* Target extra small and small screens */
@media only screen and (max-width: 1023px) { ... }

/* Target extra small, small, and medium screens */
@media only screen and (max-width: 1279px) { ... }

/* Target extra small, small, medium, and large screens */
@media only screen and (max-width: 1439px) { ... }

Hiding sections on specific devices

For some specific use cases, you might want to hide a specific section (variant) based on the device used. With the following snippets, you can realize this.

/* Show a specific variant of a section only on mobile devices */
@media only screen and (min-width: 768px) {
  .hero[name="Hero - Mobile only"] {
    display: none;
  }
}


/* Show a specific variant of a section on all devices except mobile */
@media only screen and (max-width: 767px) {
  .hero[name="Hero - Hide on mobile"] {
    display: none;
  }
}

Loading priority

Under Settings, you can enable the Loading priority function. Loading priority determines whether or not the script is loaded with priority. It impacts your storefront's performance but might be required if business logic depends on loading critical data. Keep this in mind when enabling the loading priority.