‍Note: We try our best to keep changes to minimum, but we can't guarantee that the gallery HTML code will stay the same. If we change the code, it's possible that any custom CSS you have will stop working. We also can only write custom CSS for paid users.

Covet.pics galleries are enclosed in shadow DOM. To apply custom CSS to ashadow DOM, you'll need to write a Javascript code.

Here is a an example of custom css that hides sidebar in Covet.pics popup:

// triggers when gallery is ready
document.addEventListener('galleryReady:covetPics', function(e) {
 // prepare CSS styles to inject
 const stylesPopup = document.createElement( 'style' )
 stylesPopup.innerHTML = `
   .popup .popup-body {
     display: none;
   }
 `
 // get Covet gallery elements where you want to inject CSS (for eg. covet-pics-widget, covet-pics-popup, covet-pics-upload)
 const popup = document.querySelector("covet-pics-popup");

 // now inject CSS code into shadow DOM
 popup.shadowRoot.appendChild(stylesPopup);
});

How to add CSS to your gallery:
This is a Javascript code that injects the CSS code to your gallery. This piece of Javascript code can be added:
1. directly in the liquid template - next to gallery embed code
2.  in the main theme's Javascript file - themes come with a general Javascript file(s)
3. directly into the Page HTML/CSS - if a gallery is getting embedded to a Page, same as the liquid template, the code can be added directly to the page - next to gallery embed code
‍