Move a section of custom liquid elsewhere on product page

UK_Aspire_Vendo · June 25, 2024, 3:41pm

Hi folks! I hope everyone is well.

We’re using a third party theme (Warehouse) and I’ve developed a customer urgency timer which I’d like to move, but I cannot figure out how to do this myself.

Here is a link to our product page (and the one reference below in the screenshot)

I’d like to move the urgency timer from the product to under the product media.

Here is the code to create the urgency timer - if anyone can help I’d massively appreciate it!

{% if customer %}
{% else %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
  /* Global reset */
  .uavcd-reset {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif; /* Use default site font */
  }

  /* Container style */
  .uavcd-container {
    text-align: center; /* Align text to the center */
    padding: 20px;
    background-color: #fdae08;
    color: #3a3a3a;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    height: 100%; /* Take up full height of parent */
  }

  /* Urgency message style */
  .uavcd-urgency-message {
    font-size: 24px;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .uavcd-urgency-message strong {
    font-style: italic;
    font-weight: bold;
  }

  .uavcd-urgency-message em {
    font-style: italic;
  }

  /* Countdown display style */
  .uavcd-countdown {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  /* Additional message style */
  .uavcd-additional-message {
    font-size: 14px;
    margin-top: 10px;
    text-transform: uppercase; /* Convert text to uppercase */
  }

  .uavcd-additional-message small {
    font-size: 12px;
  }
</style>
</head>
<body class="uavcd-reset">
<div class="uavcd-container">
  <div class="uavcd-urgency-message">NEED YOUR ORDER <strong><em>FAST</em>?</strong></div>
  <div class="uavcd-countdown" id="uavcd-countdown"></div>
  <div class="uavcd-additional-message" id="uavcd-additional-message"></div>
</div>
<script>
function updateCountdown() {
  var now = new Date();
  var target = new Date();
  
  // Calculate next dispatch time based on current time
  if (now.getDay() >= 1 && now.getDay() <= 5) { // Monday to Friday
    if (now.getHours() < 15) { // Before 3pm
      target.setHours(15, 0, 0, 0); // Today at 3pm
      document.getElementById('uavcd-additional-message').innerHTML = "Order before 3pm for same day dispatch.<br><small>Select DPD shipping at checkout for next day delivery.</small>";
    } else { // After 3pm
      target.setDate(target.getDate() + 1); // Next day
      target.setHours(15, 0, 0, 0); // 3pm next day
      document.getElementById('uavcd-additional-message').innerHTML = "Order before 3pm tomorrow for next day dispatch.<br><small>Select DPD shipping at checkout for next day delivery.</small>";
    }
  } else if (now.getDay() === 5 && now.getHours() >= 15) { // Friday after 3pm
    target.setDate(target.getDate() + 3); // Monday
    target.setHours(15, 0, 0, 0); // 3pm Monday
    document.getElementById('uavcd-additional-message').textContent = "SHIPS ON MONDAY. SELECT DPD SHIPPING AT CHECKOUT FOR NEXT DAY DELIVERY.";
  } else { // Weekend (Saturday and Sunday)
    target.setDate(target.getDate() + (1 + 7 - now.getDay())); // Next Monday
    target.setHours(15, 0, 0, 0); // 3pm Monday
    document.getElementById('uavcd-additional-message').textContent = "SHIPS ON MONDAY. SELECT DPD SHIPPING AT CHECKOUT FOR NEXT DAY DELIVERY.";
  }
  
  var timeUntilTarget = target - now;
  var hours = Math.abs(Math.floor(timeUntilTarget / (1000 * 60 * 60)));
  var minutes = Math.floor((timeUntilTarget % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeUntilTarget % (1000 * 60)) / 1000);
  
  var countdownElement = document.getElementById('uavcd-countdown');
  countdownElement.textContent = hours + "H " + minutes + "M " + seconds + "S";
  
  setTimeout(updateCountdown, 1000); // Update every second
}

updateCountdown();
</script>
</body>
</html>

{% endif %}

{% for tags in customer.tags %}
{% if tag == 'RETAIL' %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
  /* Global reset */
  .uavcd-reset {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif; /* Use default site font */
  }

  /* Container style */
  .uavcd-container {
    text-align: center; /* Align text to the center */
    padding: 20px;
    background-color: #fdae08;
    color: #3a3a3a;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    height: 100%; /* Take up full height of parent */
  }

  /* Urgency message style */
  .uavcd-urgency-message {
    font-size: 24px;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .uavcd-urgency-message strong {
    font-style: italic;
    font-weight: bold;
  }

  .uavcd-urgency-message em {
    font-style: italic;
  }

  /* Countdown display style */
  .uavcd-countdown {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  /* Additional message style */
  .uavcd-additional-message {
    font-size: 14px;
    margin-top: 10px;
    text-transform: uppercase; /* Convert text to uppercase */
  }

  .uavcd-additional-message small {
    font-size: 12px;
  }
</style>
</head>
<body class="uavcd-reset">
<div class="uavcd-container">
  <div class="uavcd-urgency-message">NEED YOUR ORDER <strong><em>FAST</em>?</strong></div>
  <div class="uavcd-countdown" id="uavcd-countdown"></div>
  <div class="uavcd-additional-message" id="uavcd-additional-message"></div>
</div>
<script>
function updateCountdown() {
  var now = new Date();
  var target = new Date();
  
  // Calculate next dispatch time based on current time
  if (now.getDay() >= 1 && now.getDay() <= 5) { // Monday to Friday
    if (now.getHours() < 15) { // Before 3pm
      target.setHours(15, 0, 0, 0); // Today at 3pm
      document.getElementById('uavcd-additional-message').innerHTML = "Order before 3pm for same day dispatch.<br><small>Select DPD shipping at checkout for next day delivery.</small>";
    } else { // After 3pm
      target.setDate(target.getDate() + 1); // Next day
      target.setHours(15, 0, 0, 0); // 3pm next day
      document.getElementById('uavcd-additional-message').innerHTML = "Order before 3pm tomorrow for next day dispatch.<br><small>Select DPD shipping at checkout for next day delivery.</small>";
    }
  } else if (now.getDay() === 5 && now.getHours() >= 15) { // Friday after 3pm
    target.setDate(target.getDate() + 3); // Monday
    target.setHours(15, 0, 0, 0); // 3pm Monday
    document.getElementById('uavcd-additional-message').textContent = "SHIPS ON MONDAY. SELECT DPD SHIPPING AT CHECKOUT FOR NEXT DAY DELIVERY.";
  } else { // Weekend (Saturday and Sunday)
    target.setDate(target.getDate() + (1 + 7 - now.getDay())); // Next Monday
    target.setHours(15, 0, 0, 0); // 3pm Monday
    document.getElementById('uavcd-additional-message').textContent = "SHIPS ON MONDAY. SELECT DPD SHIPPING AT CHECKOUT FOR NEXT DAY DELIVERY.";
  }
  
  var timeUntilTarget = target - now;
  var hours = Math.abs(Math.floor(timeUntilTarget / (1000 * 60 * 60)));
  var minutes = Math.floor((timeUntilTarget % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeUntilTarget % (1000 * 60)) / 1000);
  
  var countdownElement = document.getElementById('uavcd-countdown');
  countdownElement.textContent = hours + "H " + minutes + "M " + seconds + "S";
  
  setTimeout(updateCountdown, 1000); // Update every second
}

updateCountdown();
</script>
</body>
</html>

{% endif %}
{% endfor %}

JoesIdeas · June 25, 2024, 8:41pm

Anytime you want to edit your theme / move stuff around, here’s what you do:

Duplicate your theme so the live site is not affected.
On the backup theme, find where a nearby element is at so you have a point of reference. Start with the top level template / section (for example product.liquid).
Check that template file from step 2 to find included code snippets (Snippets, Sections, etc). Read those files
Eventually you will navigate to the place where you want to put the code
Put in your code or some test code then preview the theme to see if it shows where you want
Move the code / and adjust the CSS until it shows where you want it, how you want it

If you’re editing your own theme, this exercise will be good to help you understand how your theme is structured, it will eventually be easy to edit.

For more information (like inspecting the code in a dev console to find it quicker), this guide shows you more details from what I explained above: How to Safely Edit Your Shopify Theme

PageFly-Richard · June 26, 2024, 1:46am

Hi @UK_Aspire_Vendo

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Also while investigating on the issue, I’ve found some suggestions for your page is to add product review star rating and make the product price more highlighter

Including review stars can enhance customer trust in your product, while highlighting the price will make it easier for customers to locate the product’s pricing.

Hope this can help you solve the issue

Best regards,

Richard | PageFly

Topic		Replies	Views
How to move product title, price and review stars above product image for mobile only? Store Design design , customizations , shopify-themes , product-page	4	38	December 4, 2023
Dawn theme How to add custom delivery and custom countdown without apps Store Design design , customizations , css , shopify-themes , product-page	9	41	August 15, 2024
How can i get this? on productpage Store Design product-page	1	4	May 12, 2024
how do I move it to here? Store Design troubleshooting , product-page	7	27	January 14, 2025
Adding Delivery ETA and Date via Liquid code Store Design design , customizations , product-page	2	46	August 17, 2024

Move a section of custom liquid elsewhere on product page

Related topics