While Clyde standardizes the layout and branding of the modal offering and the "select" option of the product page prompt, you may end up wanting to add your own styles to the offering.

How to style the prompt

All instances of the simple prompt – on the product page and in the cart – are styled using the CSS class 'clyde-simple-add'. To change the look of the prompt, all one needs to do is add a piece of CSS that styles HTML elements with that class.

Say you wanted to change the default rounded corners of the prompt to no longer be rounded. The following snippet added to you theme will do the trick:

.clyde-simple-add {
  border-radius: 0!important
}

Note: You'll have to ensure you override our style by appending '!important' to all of your styles

Adding CSS to your Shopify theme

To add a snippet of CSS to your theme, the following steps should do the trick. Different Shopify themes have different file structures so the exact file to edit can vary, however.

  1. In your Shopify admin dashboard, click "Online Store" on the left side of the page.
  2. Click "Themes" beneath the "Online Store" link you just clicked.
  3. In the Current Theme section of the page, under the Actions dropdown, select 'Edit code'.
  4. Now we'll add the CSS snippet to an appropriate file. Most themes have master .css or .scss files with a title similar to 'theme.scss'. Use the field in the top left to search for 'css' and you should see an appropriate file.
  5. Add your CSS snippet to the file in an appropriate place, depending on the organization of the file you're editing & hit save 
  6. If you just want to style the prompt on a particular page (just in the cart or just on the product page), you can also locate the theme file for that page and add the CSS snippet wrapped in a <style>  HTML tag (example below):
<style>
.clyde-simple-add {
  border-radius: 0!important
}
</style>
Did this answer your question?