CSS Instructions

css-examples.md

Custom Popup Styles

We provide an interface to change popup styles with custom code using an editor in the app. If you know how to write CSS you can flexibly enhance the styles of your popup. Even if you aren't a developer or have never written code before, there are some simple changes you can make to start customizing your popup. The two we will cover are adding a custom font and changing the size of the headline.

[provide loom to interface]

Make sure to preview any live changes in your browser, since our preview is an approximation!

Custom Font

We provide a selection of font options that work well with a variety of shopify themes, but you might use a different font. Here's how you can include a custom google font.

[Gavin Loom so Shannon can create better loom] https://www.loom.com/share/e444f93720c541b4b60abf006a8b28a2

Choose Google Font

• Navigate to https://fonts.google.com/
  • Search for a font and weight
  • "View your selected families" (top right)
  • Change radio from to @import
  • Copy import code and CSS rules

Code Snippet

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300&display=swap');


body, h1, h2, h3, h4, p, span, div, button {  
  font-family: 'Cormorant', serif;
  font-weight: 300;
}

Tips

• Make sure to include the correct font weight.

Headline Font Size

Sometimes you want the headline of your popup to be smaller so you can include more text. [provide screenshot] Use font-size style to update the size of your headline text.

Code Snippet

#ps-desktop-widget__headline {  
  font-size: 5vw;
}

Tips

• Use a responsive font size like 5vw (five view width) as opposed to 22px which is unresponsive.

Resources

Anyone can learn to code! All it takes is some practice and resources.

HTML Basics

HTML is the content of a webpage (title, link, button etc.).

• https://developer.mozilla.org/en-US/docs/Learn/HTML

CSS Basics

CSS is how we style the content, or html, of a webpage.

• https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps

Developer Tool Basics

Developer tools help you get insight into the HTML and CSS of a wepage.

• https://developers.google.com/web/tools/chrome-devtools

Best Practices

There are many different ways to write code that does the same thing, but not all are equal. Here we will outline some basic best practices when it comes to writing custom code.

Using an id selector

Using an id as a selector for styles provides a high degree of specificity which is ideal for these types of changes. Obviously you can write any valid CSS so for example using an h4 selector would also work but would also be prone to getting overwritten (since it is less specific). Of course, sometimes using general styles is much better when you want to make more general changes like adding a custom font.

headline: #ps-desktop-widget__headline instead of h4