Instantly share code, notes, and snippets.
Last active
August 4, 2022 22:31
-
Save anthonator/57c243485539b0f25dddbf632a590606 to your computer and use it in GitHub Desktop.
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
| {%- style -%} | |
| {% assign header_font = section.settings.header_font %} | |
| {{ header_font | font_face }} | |
| {% assign header_font_bold = header_font | font_modify: 'weight', 'bolder' %} | |
| {% assign header_font_italic = header_font | font_modify: 'style', 'italic' %} | |
| {% assign header_font_bold_and_italic = header_font_bold | font_modify: 'style', 'italic' %} | |
| {{ header_font_bold | font_face }} | |
| {{ header_font_italic | font_face }} | |
| {{ header_font_bold_and_italic | font_face }} | |
| .malomo-banner { | |
| background-color: {{ section.settings.background_color }}; | |
| {%- if section.settings.background_image != blank -%} | |
| background-image: url('{{ section.settings.background_image | image_url }}'); | |
| background-position: center; | |
| background-repeat: {{ section.settings.background_repeat }}; | |
| background-size: {{ section.settings.background_size }}; | |
| {%- endif -%} | |
| min-height: {{ section.settings.height }}px; | |
| padding: {{ section.settings.padding }}px; | |
| } | |
| .malomo-banner-align--center { | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| .malomo-banner-align--left { | |
| justify-content: flex-start; | |
| text-align: left; | |
| } | |
| .malomo-banner-align--right { | |
| justify-content: flex-end; | |
| text-align: right; | |
| } | |
| .malomo-banner-col { | |
| align-items: center; | |
| display: flex; | |
| flex: 1; | |
| justify-content: center; | |
| } | |
| .malomo-banner-col-img { | |
| max-height: {{ section.settings.height }}px; | |
| } | |
| .malomo-banner-header { | |
| font-family: {{ section.settings.header_font.family }}; | |
| font-size: {{ section.settings.header_font_size }}px; | |
| font-style: {{ section.settings.header_font.style }}; | |
| font-weight: {{ section.settings.header_font.weight }}; | |
| margin: 0; | |
| padding-bottom: {{ section.settings.header_padding_bottom }}px; | |
| padding-top: {{ section.settings.header_padding_top }}px; | |
| width: 100%; | |
| } | |
| .malomo-banner-header-row { | |
| background-color: {{ section.settings.header_background_color }}; | |
| } | |
| .malomo-banner-img { | |
| display: block; | |
| max-height: {{ section.settings.height }}px; | |
| } | |
| .malomo-banner .malomo-order-lookup, | |
| .malomo-banner .malomo-shipment-tracker { | |
| background-color: {{ section.settings.malomo_background_color }}; | |
| border-color: {{ section.settings.malomo_border_color }}; | |
| border-radius: {{ section.settings.malomo_border_radius }}px; | |
| border-style: {{ section.settings.malomo_border_style }}; | |
| border-width: {{ section.settings.malomo_border_width }}px; | |
| padding: {{ section.settings.malomo_padding }}px; | |
| } | |
| .malomo-banner-row { | |
| display: flex; | |
| } | |
| @media only screen and (min-width : 320px) and (max-width : 480px) { | |
| .malomo-banner-col { | |
| flex-basis: auto; | |
| width: 100%; | |
| } | |
| .malomo-banner-col-img, | |
| .malomo-banner-img { | |
| display: none; | |
| } | |
| } | |
| {%- endstyle -%} | |
| <div class="malomo-banner"> | |
| {%- if section.settings.header_text != blank -%} | |
| <div class="malomo-banner-row malomo-banner-align--{{ section.settings.header_horizontal_alignment }} malomo-banner-header-row"> | |
| <{{section.settings.header_level}} class="malomo-banner-header"> | |
| {{section.settings.header_text}} | |
| </{{section.settings.header_level}}> | |
| </div> | |
| {%- endif -%} | |
| {%- if section.blocks.size > 0 -%} | |
| <div class="malomo-banner-row"> | |
| {%- endif -%} | |
| {%- for block in section.blocks -%} | |
| {%- case block.type -%} | |
| {%- when 'image' -%} | |
| {%- if block.settings.image != blank -%} | |
| {%- if block.settings.image_width != blank -%} | |
| {%- assign srcset = block.settings.image | image_url: width: block.settings.image_width -%} | |
| {%- capture style -%}max-width: min(100%, {{ block.settings.image_width }}px);{%- endcapture -%} | |
| {%- else -%} | |
| {%- assign srcset = block.settings.image | image_url -%} | |
| {%- endif -%} | |
| <div class="malomo-banner-col malomo-banner-col-img malomo-banner-align--{{ block.settings.image_horizontal_alignment }}"> | |
| {%- if block.settings.image_link_url != blank -%} | |
| <a href="{{block.settings.image_link_url}}" target="_blank"> | |
| {%- endif -%} | |
| <img | |
| alt="{{ block.settings.image.alt | escape }}" | |
| class="malomo-banner-img" | |
| loading="lazy" | |
| src="{{ block.settings.image | image_url }}" | |
| srcset="{{ srcset }}" | |
| {%- if style -%}style="{{ style }}"{%- endif -%} | |
| > | |
| {%- if block.settings.image_link_url != blank -%} | |
| </a> | |
| {%- endif -%} | |
| </div> | |
| {%- endif -%} | |
| {%- when '@app' -%} | |
| <div class="malomo-banner-col"> | |
| {% render block %} | |
| </div> | |
| {%- endcase -%} | |
| {%- endfor -%} | |
| {%- if section.blocks.size > 0 -%} | |
| </div> | |
| {%- endif -%} | |
| </div> | |
| {% schema %} | |
| { | |
| "name": "Malomo banner", | |
| "blocks": [ | |
| { | |
| "limit": 1, | |
| "name": "Block", | |
| "type": "block" | |
| }, | |
| { | |
| "limit": 1, | |
| "name": "Image", | |
| "settings": [ | |
| { | |
| "id": "image", | |
| "label": "Image", | |
| "type": "image_picker" | |
| }, | |
| { | |
| "default": "center", | |
| "id": "image_horizontal_alignment", | |
| "label": "Horizontal Alignment", | |
| "options": [ | |
| { | |
| "label": "Left", | |
| "value": "left" | |
| }, | |
| { | |
| "label": "Center", | |
| "value": "center" | |
| }, | |
| { | |
| "label": "Right", | |
| "value": "right" | |
| } | |
| ], | |
| "type": "select" | |
| }, | |
| { | |
| "id": "image_link_url", | |
| "label": "Image link URL", | |
| "type": "url" | |
| }, | |
| { | |
| "id": "image_width", | |
| "label": "Image width", | |
| "type": "text" | |
| } | |
| ], | |
| "type": "image" | |
| }, | |
| { | |
| "type": "@app" | |
| } | |
| ], | |
| "presets": [ | |
| { | |
| "name": "Malomo banner" | |
| } | |
| ], | |
| "settings": [ | |
| { | |
| "default": "500", | |
| "id": "height", | |
| "label": "Height", | |
| "type": "text" | |
| }, | |
| { | |
| "default": "0", | |
| "id": "padding", | |
| "label": "Padding", | |
| "type": "text" | |
| }, | |
| { | |
| "content": "Header", | |
| "type": "header" | |
| }, | |
| { | |
| "default": "transparent", | |
| "id": "header_background_color", | |
| "label": "Background Color", | |
| "type": "color" | |
| }, | |
| { | |
| "default": "sans-serif", | |
| "id": "header_font", | |
| "label": "Font", | |
| "type": "font_picker" | |
| }, | |
| { | |
| "default": "40", | |
| "id": "header_font_size", | |
| "label": "Font Size", | |
| "type": "text" | |
| }, | |
| { | |
| "default": "center", | |
| "id": "header_horizontal_alignment", | |
| "label": "Horizontal Alignment", | |
| "options": [ | |
| { | |
| "label": "Left", | |
| "value": "left" | |
| }, | |
| { | |
| "label": "Center", | |
| "value": "center" | |
| }, | |
| { | |
| "label": "Right", | |
| "value": "right" | |
| } | |
| ], | |
| "type": "select" | |
| }, | |
| { | |
| "default": "20", | |
| "id": "header_padding_top", | |
| "label": "Padding - Top", | |
| "type": "text" | |
| }, | |
| { | |
| "default": "20", | |
| "id": "header_padding_bottom", | |
| "label": "Padding - Bottom", | |
| "type": "text" | |
| }, | |
| { | |
| "default": "h2", | |
| "id": "header_level", | |
| "label": "Level", | |
| "options": [ | |
| { | |
| "label": "1", | |
| "value": "h1" | |
| }, | |
| { | |
| "label": "2", | |
| "value": "h2" | |
| }, | |
| { | |
| "label": "3", | |
| "value": "h3" | |
| }, | |
| { | |
| "label": "4", | |
| "value": "h4" | |
| }, | |
| { | |
| "label": "5", | |
| "value": "h5" | |
| }, | |
| { | |
| "label": "6", | |
| "value": "h6" | |
| } | |
| ], | |
| "type": "select" | |
| }, | |
| { | |
| "id": "header_text", | |
| "label": "Text", | |
| "type": "text" | |
| }, | |
| { | |
| "content": "Background Color", | |
| "type": "header" | |
| }, | |
| { | |
| "default": "transparent", | |
| "id": "background_color", | |
| "label": "Background color", | |
| "type": "color" | |
| }, | |
| { | |
| "content": "Background Image", | |
| "type": "header" | |
| }, | |
| { | |
| "id": "background_image", | |
| "label": "Background image", | |
| "type": "image_picker" | |
| }, | |
| { | |
| "default": "repeat", | |
| "id": "background_repeat", | |
| "label": "Background repeat", | |
| "options": [ | |
| { | |
| "label": "No Repeat", | |
| "value": "no-repeat" | |
| }, | |
| { | |
| "label": "Repeat", | |
| "value": "repeat" | |
| }, | |
| { | |
| "label": "Repeat X", | |
| "value": "repeat-x" | |
| }, | |
| { | |
| "label": "Repeat Y", | |
| "value": "repeat-y" | |
| }, | |
| { | |
| "label": "Round", | |
| "value": "round" | |
| }, | |
| { | |
| "label": "Space", | |
| "value": "space" | |
| } | |
| ], | |
| "type": "select" | |
| }, | |
| { | |
| "default": "auto", | |
| "id": "background_size", | |
| "label": "Background size", | |
| "options": [ | |
| { | |
| "label": "Auto", | |
| "value": "auto" | |
| }, | |
| { | |
| "label": "Contain", | |
| "value": "contain" | |
| }, | |
| { | |
| "label": "Cover", | |
| "value": "cover" | |
| } | |
| ], | |
| "type": "select" | |
| }, | |
| { | |
| "content": "Malomo Tracking Block", | |
| "type": "header" | |
| }, | |
| { | |
| "default": "transparent", | |
| "id": "malomo_background_color", | |
| "label": "Background color", | |
| "type": "color" | |
| }, | |
| { | |
| "id": "malomo_border_color", | |
| "label": "Border color", | |
| "type": "color" | |
| }, | |
| { | |
| "default": "0", | |
| "id": "malomo_border_radius", | |
| "label": "Border radius", | |
| "type": "text" | |
| }, | |
| { | |
| "default": "none", | |
| "id": "malomo_border_style", | |
| "label": "Border style", | |
| "type": "text" | |
| }, | |
| { | |
| "default": "0", | |
| "id": "malomo_border_width", | |
| "label": "Border width", | |
| "type": "text" | |
| }, | |
| { | |
| "default": "0", | |
| "id": "malomo_padding", | |
| "label": "Padding", | |
| "type": "text" | |
| } | |
| ] | |
| } | |
| {% endschema %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment