Countdown Timer - Text not showing - Dawn Theme

Store Design
,
1

I have added a new custom section countdown.liquid to my website. You can find the code at the bottom of this question.

I can see the countdown is working perfectly fine. But the text which I am writing in the text box is not showing up. Please refer the screenshot.

thingsontheway_0-1717152612559.png
thingsontheway_0-1717152612559.png1846×574 54.7 KB

Can anyone please help fixing it?

Also, is there any way to update this code to change the countdown using textboxes or any other object (to make it user friendly) rather than having a constant?

thingsontheway_0-1717151524475.png
thingsontheway_0-1717151524475.png421×634 23.6 KB

Website: hamperpick.myshopify.com

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

    

      

        ## 
          

            00:00:00
          

          
          
        
      

    

  

{% schema %}
{
  "name": "Countdown",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
        {
        "type": "inline_richtext",
        "id": "block_heading",
        "default": "Talk about your brand",
        "label": "t:sections.rich-text.blocks.heading.settings.heading.label"
      },
      {
        "type": "select",
        "id": "block_heading_size",
        "options": [
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h0",
            "label": "t:sections.all.heading_size.options__3.label"
          },
          {
            "value": "hxl",
            "label": "t:sections.all.heading_size.options__4.label"
          }
        ],
        "default": "h1",
        "label": "t:sections.all.heading_size.label"
      },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.desktop_content_position.label",
      "info": "t:sections.rich-text.settings.desktop_content_position.info"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.content_alignment.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.rich-text.settings.full_width.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    }
  ],
  "presets": [
    {
      "name": "Countdown"
    }
  ]
}
{% endschema %}
2

Hi @thingsontheway

The Heading is never called in the code
Use :backhand_index_pointing_down: below code to call the section heading.

{{ section.settings.block_heading }}

I didn’t understand the 2nd point :backhand_index_pointing_down:

Also, is there any way to update this code to change the countdown using textboxes or any other object (to make it user friendly) rather than having a constant?

Can you please explain with screen shot what exactly you need there

Thank you,

1 Like
3

Right!. Thank you. I missed that.

@Huptech-Web 2nd point is - right now I have added a constant to calculate the time value. I just want to add some kind of textbox where a user can update the countdown and it will reflect on the page (rather than a user going and update the timer setting).

Please refer 2nd screenshot in the original post where I want to have some kind of text boxes or dropdown to update the countdown value.

4

Hi @thingsontheway
Here is the complete code with changes.

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

    

      

        ## 
        {{ section.settings.block_heading }}
          

            00:00:00
          

          
          
        
      

    

  

{% schema %}
{
  "name": "Countdown",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "block_heading",
      "default": "Talk about your brand",
      "label": "t:sections.rich-text.blocks.heading.settings.heading.label"
    },
    {
      "type": "select",
      "id": "block_heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.desktop_content_position.label",
      "info": "t:sections.rich-text.settings.desktop_content_position.info"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.content_alignment.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.rich-text.settings.full_width.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    },
    {
      "type": "range",
      "id": "countdown_hours",
      "min": 0,
      "max": 23,
      "default": 18,
      "label": "Hours"
    },
    {
      "type": "range",
      "id": "countdown_minutes",
      "min": 0,
      "max": 59,
      "default": 30,
      "label": "Minutes"
    },
    {
      "type": "range",
      "id": "countdown_seconds",
      "min": 0,
      "max": 59,
      "default": 0,
      "label": "Seconds"
    }

  ],
  "presets": [
    {
      "name": "Countdown"
    }
  ]
}
{% endschema %}
1 Like
5

@Huptech-Web I tried this code but getting this error while saving the file.

thingsontheway_0-1717155294014.png
thingsontheway_0-1717155294014.png844×249 9.33 KB

6

Hi @thingsontheway
I have updated my code recheck the code and change the number to range

1 Like
7

Thank you @Huptech-Web . That’s exactly what I wanted.

1 Like