Custom Coded Shopify Sections 2

PASSWORD PROTECTED PAGE

1. Log in to Shopify Admin.
2. Click Online Store → Themes.
3. Find your current theme, then click Actions → Edit code.
4. On the left-hand side, scroll down to "Layout".
5. Click on theme.liquid to open the file.
6. Use Ctrl + F (Windows) or Cmd + F (Mac) to search for: <body
7. You should see a line like this:
  <body data-color-scheme="scheme1">
  or </body>
8. Add the provided code CLICK ME FOR THE CODE
9. Change "YourSecurePassword" to the password you'd like to have.

1. Log in to Shopify Admin.
2. Click Online Store → Themes.
3. Find your current theme, then click Actions → Edit code.
4. On the left-hand side, scroll down to "Layout".
5. Click on theme.liquid to open the file.
6. Use Ctrl + F (Windows) or Cmd + F (Mac) to search for: <body
7. You should see a line like this:
  <body data-color-scheme="scheme1">
  or </body>
8. Add the provided code CLICK ME FOR THE CODE
9. Change "YourSecurePassword" to the password you'd like to have.

SALE INFORMATION GOES HERE

INSTRUCTIONS FOR SALE BANNER

1. Go to Shopify Admin → Online Store → Themes → Edit Code
2. Under Sections, click "Add a new section", name it sale-countdown-banner, and click Create.
3. Delete the default code and paste the entire Liquid + JavaScript code CLICK ME FOR THE CODE
1. Go to Online Store → Themes → Customize.
2. Click "Add Section", find "Sale Countdown Banner", and add it to the top of your page.
3. Click Save.
1. Go to Online Store → Themes → Customize.
2. Select the "Sale Countdown Banner" section and modify:
  
  - Sale Text (e.g., "Biggest Sale of the Year!").
  - Shop Sale Link (e.g., /collections/sale).
  - Background Color (pick any color you want).
  - Sale End Date (set it to YYYY-MM-DD HH:MM:SS format).
3. Click Save.

1. Go to Shopify Admin → Online Store → Themes → Edit Code
2. Under Sections, click "Add a new section", name it sale-countdown-banner, and click Create.
3. Delete the default code and paste the entire Liquid + JavaScript code CLICK ME FOR THE CODE
1. Go to Online Store → Themes → Customize.
2. Select the "Sale Countdown Banner" section and modify:
  
  - Sale Text (e.g., "Biggest Sale of the Year!").
  - Shop Sale Link (e.g., /collections/sale).
  - Background Color (pick any color you want).
  - Sale End Date (set it to YYYY-MM-DD HH:MM:SS format).
3. Click Save.

1. Go to Online Store → Themes → Customize.
2. Click "Add Section", find "Sale Countdown Banner", and add it to the top of your page.
3. Click Save.

INSTRUCTIONS FOR 'HURRY OFFER ENDS IN'

Add a new 'Custom Liquid' or 'Liquid' to your product tab.
Paste the below code:

<div id="countdown-timer" style="font-size: 16px; font-weight: bold; color: #38B6FF; text-align: center; margin-bottom: 10px;">
  Hurry! Offer ends in <span id="timer"></span>
</div>
<script>
  function startCountdown(duration) {
    let timerDisplay = document.getElementById("timer");
    let timeRemaining = duration;
    function updateTimer() {
      let hours = Math.floor(timeRemaining / 3600);
      let minutes = Math.floor((timeRemaining % 3600) / 60);
      let seconds = timeRemaining % 60;
      timerDisplay.innerHTML =
        (hours < 10 ? "0" + hours : hours) + ":" +
        (minutes < 10 ? "0" + minutes : minutes) + ":" +
        (seconds < 10 ? "0" + seconds : seconds);
      if (timeRemaining > 0) {
        timeRemaining--;
        setTimeout(updateTimer, 1000);
      } else {
        document.getElementById("countdown-timer").innerHTML = "Offer Expired!";
      }
    }
    updateTimer();
  }
  document.addEventListener("DOMContentLoaded", function() {
    startCountdown(7200); // Set timer for 1 hour
  });
1. </script>
  
  -----
2. Change the '7200' in the startCountdown(7200) part of the code to the time you want.
  3600 = 1 Hour
  7200 = 2 Hours
  86400 = 24 Hours
  etc (add 3600 for each 1 hour you want)
3. To change the colour from Blue, change the #38B6FF to your desired HEXA colour code.
Drag the Custom Liquid or Liquid Tab up or down to where abouts on the product you'd like it to appear.

Add a new 'Custom Liquid' or 'Liquid' to your product tab.
Paste the below code:

<div id="countdown-timer" style="font-size: 16px; font-weight: bold; color: #38B6FF; text-align: center; margin-bottom: 10px;">
  Hurry! Offer ends in <span id="timer"></span>
</div>
<script>
  function startCountdown(duration) {
    let timerDisplay = document.getElementById("timer");
    let timeRemaining = duration;
    function updateTimer() {
      let hours = Math.floor(timeRemaining / 3600);
      let minutes = Math.floor((timeRemaining % 3600) / 60);
      let seconds = timeRemaining % 60;
      timerDisplay.innerHTML =
        (hours < 10 ? "0" + hours : hours) + ":" +
        (minutes < 10 ? "0" + minutes : minutes) + ":" +
        (seconds < 10 ? "0" + seconds : seconds);
      if (timeRemaining > 0) {
        timeRemaining--;
        setTimeout(updateTimer, 1000);
      } else {
        document.getElementById("countdown-timer").innerHTML = "Offer Expired!";
      }
    }
    updateTimer();
  }
  document.addEventListener("DOMContentLoaded", function() {
    startCountdown(7200); // Set timer for 1 hour
  });
1. </script>
  
  -----
2. Change the '7200' in the startCountdown(7200) part of the code to the time you want.
  3600 = 1 Hour
  7200 = 2 Hours
  86400 = 24 Hours
  etc (add 3600 for each 1 hour you want)
3. To change the colour from Blue, change the #38B6FF to your desired HEXA colour code.

Drag the Custom Liquid or Liquid Tab up or down to where abouts on the product you'd like it to appear.

Ready to get started?

We'll be in touch within the next business day

INSTRUCTIONS FOR CUSTOM CONTACT FORM

Scrap the boring Default Shopify one, it's costing you.

1. Make a new section and name it contact-form.liquid.
2. Paste the provided code. CLICK ME FOR THE CODE
Go back to customise tab and add the section where you'd like on your page.
1. Go back to the code editor and search for #38B6FF
2. Replace this colour code to your brands colours.
3. Look for the section:
  <div class="contact-form-container">
<h2>Ready to get started?</h2>
<p>We'll be in touch within the next business day</p>

-----

Replace 'Ready to get started' & We'll be in touch within the next business day' to whatever you'd like to appear.

1. Make a new section and name it contact-form.liquid.
2. Paste the provided code. CLICK ME FOR THE CODE
1. Go back to the code editor and search for #38B6FF
2. Replace this colour code to your brands colours.
3. Look for the section:
  <div class="contact-form-container">
<h2>Ready to get started?</h2>
<p>We'll be in touch within the next business day</p>

-----

Replace 'Ready to get started' & We'll be in touch within the next business day' to whatever you'd like to appear.

Go back to customise tab and add the section where you'd like on your page.

DOES YOUR CONVERSION RATE SUCK? YOU NEED CUSTOM SECTIONS TO STAND OUT

instructions for custom scrolling text

1. Create a new section and name it scrolling-text-section
2. Paste the provided code CLICK ME FOR THE CODE
1. Add the section to the customise tab and edit the text as you wish and also change the speed.

1. Create a new section and name it scrolling-text-section
2. Paste the provided code CLICK ME FOR THE CODE

1. Add the section to the customise tab and edit the text as you wish and also change the speed.

PASSWORD PROTECTED PAGE

SALE INFORMATION GOES HERE

INSTRUCTIONS FOR SALE BANNER

Email Marketing (Campaigns)

INSTRUCTIONS FOR 'HURRY OFFER ENDS IN'

Ready to get started?

INSTRUCTIONS FOR CUSTOM CONTACT FORM

instructions for custom scrolling text

Your cart -

Services

PASSWORD PROTECTED PAGE

STEP 1: LOCATE THE THEME.LIQUID FILE

STEP 1: LOCATE THE THEME.LIQUID FILE

SALE INFORMATION GOES HERE

INSTRUCTIONS FOR SALE BANNER

Step 1: Add the Countdown Section to Your Shopify Theme

Step 2: Add the Countdown to Your Theme

Step 3: Edit the Countdown in the Theme Editor

Step 1: Add the Countdown Section to Your Shopify Theme

Step 3: Edit the Countdown in the Theme Editor

Step 2: Add the Countdown to Your Theme

Email Marketing (Campaigns)

INSTRUCTIONS FOR 'HURRY OFFER ENDS IN'

STEP 1: ADD A NEW LIQUID

STEP 2: Changing the Location of the code

STEP 1: ADD A NEW LIQUID

STEP 2: Changing the Location of the code

Ready to get started?

INSTRUCTIONS FOR CUSTOM CONTACT FORM

STEP 1: ADD A NEW SECTION

step 2: Adding form to site

step 3: editing the colours

STEP 1: ADD A NEW SECTION

step 3: editing the colours

step 2: Adding form to site

instructions for custom scrolling text

STEP 1: CREATE A NEW SECTION

step 2: change text

STEP 1: CREATE A NEW SECTION

step 2: change text

Your cart -