CSS Styling (Coding Styling Options) with Bold Discounts

Bold Discounts currently does not have a built-in CSS coding input field, which means all CSS stying needs 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.

Note: 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

1. From the Shopify admin home page, click Online Store > Themes > ... > Edit code.
2. Under Assets, click Add a new asset.
3. Click Create a blank file.
4. Enter the name of the Asset file.

   Note: The name of the Asset file that is used needs to be added into Step 10 for the include code. In this example, we use bold as the name of the file.

5. Click .css from the Asset file type dropdown.
6. Click Add asset.
7. Add your CSS styling for the sales clock using the following class below:

   .sale-clock-container {
    insert CSS code here
   }

   Note: You can find more detailed information on CSS and its styling rules at W3 Schools - CSS.

   

8. Click Save.
9. Under Layout, click theme.liquid.
10. 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 need to change bold.css in the line of code above to match the name that was set for the Asset file.

    

11. Click Save.

Sales icon CSS styling

1. From the Shopify admin home page, click Online Store > Themes > ... > Edit code.
2. Under Assets, click Add a new asset.

   Note: If you have already created an Asset file from the steps sbove, skip to Step 7.

3. Click Create a blank file.
4. Enter the name of the Asset file.

   Note: The name of the Asset file that is used needs to be added into Step 10 for the include code. In this example, we use bold as the name of the file.

5. Click .css from the Asset file type dropdown.
6. Click Add asset.
7. 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.

   

8. Click Save.
9. Under Layout, click theme.liquid.
10. 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 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.

    

11. Click Save.