Adding Countdown Snippet to Product Page

Adding Countdown Snippet to Product Page

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify themes, work best with Shopify 2.0 FREE themes

I have seen several countdown sections for Shopify but I haven't seen a flip countdown clock with options to provide days, hours or minutes. You can use this countdown for your password layout, when your store is not ready to open.

Add countdown snippet in your Shopify sections, like product page, with very nice flip animation.

If you are looking to add a countdown as a section, you can check this code instead here

You can check the demo store here. Password: made4uo

 What you are buying:

  • A countdown section
  • Able to have countdown with days, hours, or minutes
  • Able to add heading, richtext, button, background image, and countdown. 
  • Container's height depends on the background image height
  • You can also use background color

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snippet folder, create a section and name it "countdown", then paste the code below. Make sure to click SAVE

<

 

4. If you are using a Shopify 2.0 with custom liquid, you can go to your theme editor. In your product page, add a block "Custom liquid", then paste the code below

{% render "countdown", date: "December 01, 2023", time: "12:52:20", am_pm: "AM", text_color: "#fff", background_color: "#000", alignment: "center" size: "20" %}

Change the text on bold to the value of your choice. 

NOTE: Make sure to follow the format for date, time, and colors. Please be mindful on choosing the size since it might rely to your Shopify theme's current code.

 If you do not have a custom liquid in your theme, you have to place the code inside your section. You must be knowledgeable on where you want to place it. If you are having troubles, do not hesitate to contact us. 

That's it (",)

 

 

Copied!
Voltar para o blogue

Deixe um comentário