CSS Styling (Coding Styling Options) with Bold Discounts

Laurel

Published: May 25, 2020 21:00

Last Updated: December 13, 2021 14:12

Bold Discounts currently does not have a built-in CSS coding input field, which means all CSS stying will need to be added into an Asset file in your theme's liquid code.

For steps on creating an Asset file and inserting styling changes using CSS coding for the sales clock and sales icon, please follow the steps below under each section.

Pro-Tip

Making adjustments to the sales clock or sales icon requires knowledge of CSS. If you are not comfortable with completing this on your theme, one of our partners could complete this as a paid customization for your store. Please request this through HeyCarson via this form.

Sales Clock CSS Styling

From the Shopify admin home page, select Online Store > Themes > Actions > Edit code.
Under Assets, select Add a new asset.
Select Create a blank file.
Enter the name of the Asset file.
Note: The name of the Asset file that is used will need to be added into Step 10 for the include code. In this example, we use bold as the name of the file.
Select .css from the Asset file type dropdown.
Select Add asset.
Add your CSS styling for the sales clock using the following class below:
```
.sale-clock-container {
 insert CSS code here
}
```
You can find much more detailed information on CSS and its styling rules at W3 Schools - CSS.
Select Save.
Under Layout, select theme.liquid.
Find {{ content_for_header }} and include the following line of code below the this code:
```
{{ 'bold.css' | asset_url | stylesheet_tag }}
```
Note: If you used a different Asset title name, you will need to change bold.css in the line of code above to match the name that was set for the Asset file.
Select Save.

Sales Icon CSS Styling

From the Shopify admin home page, select Online Store > Themes > Actions > Edit code.
Under Assets, select Add a new asset.
Note: If you have already created an Asset file from the steps sbove, skip to Step 7.
Select Create a blank file.
Enter the name of the Asset file.
Note: The name of the Asset file that is used will need to be added into Step 10 for the include code. In this example, we use bold as the name of the file.
Select .css from the Asset file type dropdown.
Select Add asset.
Add your CSS styling for the sales icon using the following class below:
```
.sale-icon-container {
 insert CSS code here
}
```
You can find much more detailed information on CSS and its styling rules at W3 Schools - CSS.
Select Save.
Under Layout, select theme.liquid.
Find {{ content_for_header }} and include the following line of code below the this code:
```
{{ 'bold.css' | asset_url | stylesheet_tag }}
```
Note: If you used a different Asset title name, you will need to change bold.css in the line of code above to match the name that was set for the Asset file. If this line of code is already present, you can skip this step.
Select Save.