Can I customize the style of the template with CSS?

Yes, you can do so. There are 3 ways:

1. Custom CSS
   1. Hit Change Design in BYOB => Click BYOB Bundle Info => Custom CSS at the bottom. 
   2. For theme app extension, click Change Design in BYOB => App => Custom CSS. Just paste your CSS, e.g .myClass1 {display: none;} .myClass2 {color: red; } and hit the Save button
      
      Sometimes, the runtime may be out of order. You can use !important to override other rules.

      

2. Add a Custom Liquid or Custom HTML section in the theme editor
   1. Built-in Custom Liquid or Custom CSS section:
      Some themes support adding a Custom Liquid or Custom CSS section. You can add the section and wrap your CSS with the style tag, e.g. <style>.myclass {color: red;}</style>

      

   2. Add your Custom Liquid:
      You can add your own if your theme doesn't support a Custom Liquid or Custom HTML section. Add a new section file - byob-custom-liquid.liquid in the code editor. Copy and paste the following:
      

      <style>/* YOUR CSS */</style>
      <p>hello world</p>
      {% schema %}
        {
          "name": "BYOB Custom Liquid",
          "settings": [],
          "presets": [
            {
              "name": "BYOB Custom Liquid",
              "category": "BYOB Bundles APP"
            }
          ]
        }
      {% endschema %}
      		

      After that, you can add this section in the theme editor like step a

3. Your theme.liquid file
   Besides changing the style with theme sections, you can write your custom styles (CSS) in the theme.liquid of your theme. You should NOT change the BYOB section files directly. Otherwise, it will be overwritten by our changes. We update the template files frequently.
   
   For example, you can wrap your code like this:
   {% if template == 'product.byob' %}
   YOUR CODE HERE
   {% endif %}