Hi there
we are using Ride shopify template and would like to have a video background on the startpage ATF.
The moment I switch on the video background on startpage, it automatically shows on all subpages… how can I show it ONLY on startpage instead?
thanks
Can you send me the screen shot of the code editor and searching video on it something like this
since this requires coding i will be needing some screenshots and codes of your to fix
is this video background “feature” available in “template” section. if yes try to use from there. if no. there is two way.
you have to edit liquid file to put code condition
you can made your own “video background” section that you can use easily.
let me know if you problem still didn’t solved
Does that work or do you need the entire code for modal-video.css ? and do you need video-section.css?
thanks!!!
the video option available is unfortunately not embedded like a background.
so I have created my own video background however, as described above, it does show on all pages…
First make a copy of your theme, Duplicate it so you won’t get any errors and you will always have the backup.
Now open the theme.liquid file and search this
{% section ‘video-background’ %} or something similar and remove this line from it, it will prevent it to showing on all the pages. If you are not sure deleting that line you can send me screenshot to confirm.
Meanwhile copy the entire code from the file called video-background.liquid and sent here in this thread I will modify it and give you so it will appear in the add section..
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
{%- if block.settings.video_link != blank -%}
{% endif %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% else %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% endif %}
{%- endfor -%}
{% else %}
This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%}
{% schema %}
{
"name": {
"en": "Video Background"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_link",
"label": {
"en": "Video link"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"en": "Cover image"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "color",
"id": "color_bg",
"label": {
"en": "Background color (optional)"
},
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": {
"en": "or use an image (required)"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"default": "Image slide",
"label": {
"en": "Heading"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": {
"en": "Video Background"
},
"category": {
"en": "Main"
},
"blocks": [
{
"type": "video"
}
]
}
]
}
{% endschema %}
Hi there, does the below help to guide me forward @deepaksharma ?
I am so sorry @MCC2024
here replace the enitre code of the video-background file with this one
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
{%- if block.settings.video_link != blank -%}
{% endif %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% else %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% endif %}
{%- endfor -%}
{% else %}
This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%}
{% schema %}
{
"name": {
"en": "Video Background"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_link",
"label": {
"en": "Video link"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"en": "Cover image"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "color",
"id": "color_bg",
"label": {
"en": "Background color (optional)"
},
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": {
"en": "or use an image (required)"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"default": "Image slide",
"label": {
"en": "Heading"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": {
"en": "Video Background"
},
"category": {
"en": "Main"
},
"blocks": [
{
"type": "video"
}
]
}
]
}
{% endschema %}
Also just making sure have you removed the code I asked for earlier in this thread if not. then please remove {% section ‘video-background’ %} from the theme.liquid
thanks - I have updated the video background css and looked in the below code from theme.liquid for the mentioned part and couldnt find it and still the video is shown on all subpages…
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
{%- if block.settings.video_link != blank -%}
{% endif %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% else %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% endif %}
{%- endfor -%}
{% else %}
This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%}
{% schema %}
{
"name": {
"en": "Video Background"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_link",
"label": {
"en": "Video link"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"en": "Cover image"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "color",
"id": "color_bg",
"label": {
"en": "Background color (optional)"
},
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": {
"en": "or use an image (required)"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"default": "Image slide",
"label": {
"en": "Heading"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": {
"en": "Video Background"
},
"category": {
"en": "Main"
},
"blocks": [
{
"type": "video"
}
]
}
]
}
{% endschema %}
Also just making sure have you removed the code I asked for earlier in this thread if not. then please remove {% section ‘video-background’ %} from the theme.liquid
{%- if settings.favicon != blank -%}
{%- endif -%}
{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
{%- endunless -%}
{% if page_description %}
{% endif %}
{% render 'meta-tags' %}
{%- if settings.animations_reveal_on_scroll -%}
{%- endif -%}
{{ content_for_header }}
{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}
{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}
{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
--color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
--gradient-background: {{ scheme.settings.background_gradient }};
{% else %}
--gradient-background: {{ scheme.settings.background }};
{% endif %}
{% liquid
assign background_color = scheme.settings.background
assign background_color_brightness = background_color | color_brightness
if background_color_brightness <= 26
assign background_color_contrast = background_color | color_lighten: 50
elsif background_color_brightness <= 65
assign background_color_contrast = background_color | color_lighten: 5
else
assign background_color_contrast = background_color | color_darken: 25
endif
%}
--color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
--color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
--color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
--color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
--color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}
{{ scheme_classes | prepend: 'body' }} {
color: rgba(var(--color-foreground), 0.75);
background-color: rgb(var(--color-background));
}
:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};
--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};
--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
--product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--product-card-text-alignment: {{ settings.card_text_alignment }};
--product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;
--collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
--collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
--collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
--collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
--collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
--collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
--collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;
--blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
--blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
--blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
--blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
--blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
--blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
--blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;
--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
--popup-border-width: {{ settings.popup_border_thickness }}px;
--popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
--popup-corner-radius: {{ settings.popup_corner_radius }}px;
--popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
--popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
--popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
--popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;
--drawer-border-width: {{ settings.drawer_border_thickness }}px;
--drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
--drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
--drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
--drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
--drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;
--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;
--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
--text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
--text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
--text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
--text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;
--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
--inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
--inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
--inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
--inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
--inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;
--variant-pills-radius: {{ settings.variant_pills_radius }}px;
--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}
@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}
{{ 'base.css' | asset_url | stylesheet_tag }}
{%- unless settings.type_body_font.system? -%}
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
{%- endunless -%}
{%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
{{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }}
{%- endif -%}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{{ 'accessibility.skip_to_text' | t }}
{%- if settings.cart_type == 'drawer' -%}
{%- render 'cart-drawer' -%}
{%- endif -%}
{% sections 'header-group' %}
{% sections 'footer-group' %}
- {{ 'accessibility.refresh_page' | t }}
- {{ 'accessibility.link_messages.new_window' | t }}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}