CSS Styling (Coding Styling Options)

Overview

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:

 


 

Sales Clock CSS Styling

  1. From the Shopify admin home page, select Online Store > Themes > Actions > Edit code.
  2. Under Assets, select Add a new asset.
  3. Select Create a blank file.
  4. 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.

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

    Add your CSS styling

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

    Add Asset File Include

  11. Select Save.

 


 

Sales Icon CSS Styling

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

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

  3. Select Create a blank file.
  4. 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.

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

    Add your CSS Styling

  8. Select Save.
  9. Under Layout, select 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 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.

    Add Asset File include

  11. Select Save.


Next Steps:

  • After adding in the CSS code for the sales clock or sales icon, view the storefront and verify that the changes are reflecting correctly.
Was this article helpful?
0 out of 0 found this helpful