How to modify Ride Theme countdown timer code to a specific time?

thechasewebb · July 28, 2022, 3:50pm

Hi All,

I am currently using the Ride Theme and I am trying to figure out how to change the code I am using to an exact time of day instead of just a date. Attached is the current code I am using:

{% if end_date != blank %}

{% if title != blank %}

{% endif %}

00 Days

00 Hours

00 Minutes

00 Seconds

/* styles for timer */ .timer { /*background: #0000;*/ padding: 10px; margin: 10px 0; }

.timer–expired {
display: none;
}

.timer__title {
@Extend .paragraph;
text-align: center;
}

.timer-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 5px;
}

.timer-block {
position: relative;
width: 25%;
padding: 010px;

&:not(:last-child):after {
content: ‘:’;
position: absolute;
right: 0;
top: 3px;
}
}

.timer-block__num,
.timer-block__unit {
display: block;
text-align: center;
font-size: 40px;
font-weight: 450;
}

{% endif %}

LitExtension · July 30, 2022, 1:28pm

Hi @thechasewebb ,

Can you elaborate on ‘exact time of day’, does it mean you want to choose the exact date and time?

Please send me the full code of the section, I will check it for you

thechasewebb · July 31, 2022, 2:20pm

I am looking to do an exact time and date.

That is the full code for the countdown timer. The full code for the password page is the follow:

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- unless settings.type_header_font.system? -%}

{%- endunless -%} {{ shop.name }}

{% render ‘meta-tags’ %}

{%- 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’ }}

: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-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 }};

–color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-shadow: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
–color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
–color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
–color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
–color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
–color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
–payment-terms-background-color: {{ settings.colors_background_1 }};

–gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
–gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
–gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
–gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

–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;

–card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
–card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
–card-text-alignment: {{ settings.card_text_alignment }};
–card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
–card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
–card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
–card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

–badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

–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;
}
{% endstyle %}

{%- unless settings.type_body_font.system? -%}

{%- endunless -%} {%- unless settings.type_header_font.system? -%} {%- endunless -%}

{{ ‘section-password.css’ | asset_url | stylesheet_tag }}
{{ ‘base.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-social.css’ | asset_url | stylesheet_tag }}

{% section ‘main-password-header’ %}

{% include ‘countdowntimer’,
end_date: “Aug 2, 2022 1800”
%}

{% section 'main-password-footer' %}

{{ 'accessibility.link_messages.new_window' | t }}

LitExtension · August 1, 2022, 7:30am

Hi @thechasewebb ,

Please change code here:

Refer https://www.w3schools.com/js/js_dates.asp

As long as you change to the following structure, it will work fine. For example:

end_date: "2022, 08, 05, 10, 33, 30, 0"

Hope it helps!

thechasewebb · August 1, 2022, 2:29pm

That still did not work. The code left that countdown timer to NaN in each section.

LitExtension · August 2, 2022, 4:14am

Hi @thechasewebb ,

Please change code here:

var countDown = new Date('{{- end_date -}}').getTime(),

=>

var countDown = new Date({{- end_date -}}).getTime(),

Hope it helps!

deepaksharma · March 1, 2024, 5:33am

I went through your code and this is static meaning you will have to change all the settings from the code edit which is a headache sometimes, try this countdown timer code they have enabled multiple settings you can customize from theme customization.

Topic		Replies	Views
Shopify Password Page Countdown customize Store Design	1	15	October 27, 2022
Timer countdown for the landing page (password page) Store Design third-party-themes , shopify-themes	7	73	December 27, 2023
How can I add a countdown timer to my debut theme password page? Shopify Discussion	17	79	November 24, 2022
How to create a countdown on the password page Store Design menu , design , landing-page , shopify-themes	12	57	September 22, 2024
How can I hide the timer on my product page when time is up? Store Design design	4	12	May 15, 2023

How to modify Ride Theme countdown timer code to a specific time?

{{ title }}

Related topics