Can I customize the style of the template with CSS?

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

  1. 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 %}
  2. Custom CSS
    You can add custom css in BYOB Bundle Info section. Hit Change Design in BYOB => Click BYOB Bundle Info => Custom CSS at the bottom. Just paste your CSS, e.g .myClass1 {display: none;} .myClass2 {color: red; } and hit the Save button

    Sometimes the execution order may not be alright. You can use !important to override other rules.
  3. 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. Your own Custom Liquid:
      If your theme doesn't support Custom Liquid or Custom HTML section, you can add your own. Add a new section file - byob-custom-liquid.liquid in the code editor. Copy and paste the following:
      		hello world
      {% schema %}
        {
          "name": "BYOB Custom Liquid",
          "settings": [],
          "presets": [
            {
              "name": "BYOB Custom Liquid",
              "category": "BYOB Bundles APP"
            }
          ]
        }
      {% endschema %}
      
      {% stylesheet %}
      {% endstylesheet %}
      
      {% javascript %}
      {% endjavascript %}
      		

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

Still need help? Contact Us Contact Us