Can I customize the style of the template with CSS?
Yes, you can do so. There are 3 ways:
- 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 %} - 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.
- Add a Custom Liquid or Custom HTML section in the theme editor
- 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> - 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
- Built-in Custom Liquid or Custom CSS section: