Last active
October 2, 2022 07:14
-
-
Save tjmapes/3614e3805c8d9b3659573fd04fe921e7 to your computer and use it in GitHub Desktop.
This is code for an announcement bar theme section for Shopify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% if section.settings.announcement_visibility %} | |
<style> | |
.announcement { | |
font-size:{{ section.settings.announcement_text_size }}px; | |
background-color: {{ section.settings.announcement_bg_color }}; | |
border-bottom: {{ section.settings.announcement_border_size}}px solid {{ section.settings.announcement_border_color }}; | |
padding: {{ section.settings.announcement_padding}}px; | |
text-align: {{ section.settings.announcement_text_align }}; | |
} | |
.announcement p {color: {{ section.settings.announcement_text_color }};} | |
.announcement a {text-decoration: underline;} | |
.announcement a:hover {text-decoration: none;} | |
</style> | |
<div class="announcement">{{ section.settings.announcement_text }}</div> | |
{% endif %} | |
{% schema %} | |
{ | |
"name": "Announcement Bar", | |
"settings": [ | |
{ | |
"type": "checkbox", | |
"id": "announcement_visibility", | |
"label": "Visibility (On / Off)", | |
"default": true | |
}, | |
{ | |
"type": "richtext", | |
"id": "announcement_text", | |
"label": "Text", | |
"default": "<p>Default <em>richtext</em> <a href=\"https://example.com/\">content</a></p>" | |
}, | |
{ | |
"type": "range", | |
"id": "announcement_text_size", | |
"min": 12, | |
"max": 24, | |
"step": 1, | |
"unit": "px", | |
"label": "Font size", | |
"default": 16 | |
}, | |
{ | |
"type": "color", | |
"id": "announcement_text_color", | |
"label": "Text color", | |
"default": "#000000" | |
}, | |
{ | |
"type": "color", | |
"id": "announcement_bg_color", | |
"label": "Background color", | |
"default": "#aaa" | |
}, | |
{ | |
"type": "range", | |
"id": "announcement_border_size", | |
"min": 0, | |
"max": 10, | |
"step": 1, | |
"unit": "px", | |
"label": "Border size", | |
"default": 4 | |
}, | |
{ | |
"type": "color", | |
"id": "announcement_border_color", | |
"label": "Border color", | |
"default": "#333333" | |
}, | |
{ | |
"type": "range", | |
"id": "announcement_padding", | |
"min": 0, | |
"max": 20, | |
"step": 1, | |
"unit": "px", | |
"label": "Padding", | |
"default": 5 | |
}, | |
{ | |
"type": "select", | |
"id": "announcement_text_align", | |
"label": "Text alignment", | |
"options": [ | |
{ "value": "left", "label": "left"}, | |
{ "value": "center", "label": "center"}, | |
{ "value": "right", "label": "right"} | |
], | |
"default": "center" | |
} | |
] | |
} | |
{% endschema %} |
This looks really cool. I added all the code but not sure where to find the bar after. Please help
Your tutorial is great, and very easy to follow. I am having trouble adding code to theme.liquid file.
**Look for the opening tag and place it right underneath—like this:
{% section ‘announcement_bar’ %}**My theme file doesnt have an opening tag. Which is confusing as there is a at the end of the code.
The first instance of the term body is:
<body class="{{ body_classes }}" {% if template contains 'customers' %}data-account-template="true"{% endif %}>
{% include 'icon-sprite.svg' %}__
If I paste under this I get a syntax error - See attached.
Any help would be much appreciated. And yes, I am a massive noob.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for the article and the code!
Can we have a "Rotating Announcement Bar”? And rotate 4 top bars every 7 seconds?