creating a new editable section within site

Highlighted
Tourist
33 0 1

Hi there

i am looking to create a liquid page template that uses rich text editor (being able to edit text as well as add html <> if needed)
the sort of layout i am looking to create as a liquid template is this one:

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .product-container{
    float:left;
    width:33%;
  }

.product-image {
  margin0 20%;
  widthfit-content;
}

  .product-container ul{
    padding:0 !important;
  }
  .custom-html--container{
    margin-top10px;
  }
  .product-1 {
    padding0 15px 0 15px;
  }
  p {
    margin5px 0 5px 0;
  }
  ul {
    margin0 0 0 30px;
  }
  .pdf-file {
    floatleft;
    padding0 0 0 0;
    margin0 0 0 0;
    height50px;
    overflowhidden;
    clearboth;
  }
   
   .pdf-image {
     floatleft;
     padding0 15px;
  }
   
   .pdf-title{
     floatleft;
     padding20px 0;
  }
  
  .list-pdf-file {
    floatleft;
    padding0 0 0 0;
    margin10px 0 0 0;
    height50px;
    clearboth;
  }
   
  .list-pdf-image {
    floatleft;
    padding0 10px;
  }
  
  .list-pdf-title{
    padding17px 0 0 0;
    white-spacenowrap;
    overflowhidden;
    text-overflowellipsis;
  }

  .main-container{
    margin0 10%;
    overflowhidden;
  }
  .page-content-left {
    floatleft;
    margin-left8%;
    width45%;
  }

  h3.main-h3 {
    color#0c5a50!important;
  }

  .page-content-right {
    floatleft;
  }
  #side-image {
    margin20px 0 0 0;
    padding0 0 0 40px;
  }
  
  ul.product-unique {
    list-style-typenone;
    padding0 0;
    margin0 0;
  }
  
  li.unique-list {
    floatleft;
    width23%;
    text-aligncenter;
    padding0 0;
    margin0 0 0 15px;
    font-weightbold;
  }
  
  .top-info-content {
    overflowhidden;
    margin0 0 30px 0;
    padding0 0 0 0;
    widthfit-content;
  }
  
  .page-info-split {
    floatleft;
    margin0 0 0 40px;
  }
  
  .info-bg-panel {
    width400px;
    border-radius10px;
    background#7fc3ba;
    clearboth;
    floatleft;
    margin0 0 10px 0;
    padding10px 0 10px 20px;
    color#fff;
  }
  
  .lower-info-content{
    clearboth;
    margin20px 0 0 8%;
  }
  
    /* On screens that are 1200px wide or less, make the columns stack on top of each other instead of next to each other */
    @media screen and (min-width1001px) and (max-width1300px) {
      .main-container{
        margin0 2%;
        overflowhidden;
      }
      .page-content-left {
        margin0 auto;
        width100%;
      }
      .page-info-split {
        floatleft;
        margin0 0 0 40px;
      }

      .info-bg-panel {
        width400px;
      }
    }
  
    /* On screens that are 1000px wide or less, make the columns stack on top of each other instead of next to each other */
    @media screen and (min-width751px) and (max-width1000px) {
      .top-info-content {
       margin0 15% 30px 15%;
      }
      .main-container{
        margin0 2%;
        overflowhidden;
      }
      .page-content-left {
        margin0 0 0 5%;
        widthfit-content;
      }
      .page-info-split {
        floatleft;
        margin0 0 0 40px;
      }
      .info-bg-panel {
       width400px;
      }
      .product-container{
        min-width150px;
      }
      .product-container ul{
        padding0;
      }
    }
      
  /* On screens that are 750px wide or less, make the columns stack on top of each other instead of next to each other */
  @media screen and (min-width350px) and (max-width750px) {
    .top-info-content {
      widthauto;
    }
    .main-container{
      margin0 2%;
      overflowhidden;
    }
    .page-content-left {
      margin0 auto;
      width100%;
    }
    .page-info-split {
      margin0 0 0 0;
    }
    .info-bg-panel {
      width97%;
    }
    #side-image {
      margin0 0 0 0;
      padding0 0 0 0;
      width400px;
      height251px;
    }
    .product-container {
      width400px;
      padding0 10px;
    }
    .product-container ul{
      padding0;
    }
    .slideshow-slide-content {
      displaynone;
    }

    .product-recently-viewed-wrapper {
    padding20px 20px 10px;
    margin-bottom10px;
}
.product-recently-viewed--content {
    padding0 0;
    width60%;
}
.product-recently-viewed-card {
    padding-bottom12px;
}
  }
  </style>  
 </head>
 <body>
  <div class="main-container">
    <div class="top-info-content">
      <div class="page-content-left">
        <h3 class="main-h3">HEADER TEXT</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis odio ut ornare mattis.</p>
        <p>Maecenas scelerisque ante vel facilisis malesuada. Duis semper, mi in sagittis faucibus, lacus felis cursus lectus, bibendum commodo arcu nisi eu mauris. Praesent scelerisque tempor imperdiet.</p> 
        <p>Donec convallis molestie justo, sed ullamcorper lorem varius non.</p> 
        <p>Proin ac porta eros. Aenean et augue sit amet odio varius commodo nec sed velit. Curabitur lacinia vehicula pulvinar, Cras pharetra sit amet velit non tincidunt.</p>
         <p>Nulla pharetra, justo ut efficitur pharetra, massa dui vulputate nisl, eu consequat ipsum quam eget tellus.</p>
        <h3>HEADER TEXT</h3>
  <p>Proin ac porta eros. Aenean et augue sit amet odio varius commodo nec sed velit. Curabitur lacinia vehicula pulvinar, Cras pharetra sit amet velit non tincidunt.</p>
  <p>Nulla pharetra, justo ut efficitur pharetra, massa dui vulputate nisl, eu consequat ipsum quam eget tellus.</p>
  <p>List Text section:</p>
  <ul>
  <li>Praesent scelerisque tempor imperdiet</li>
  <li>Praesent scelerisque tempor imperdiet</li>
  </ul>
  <h3>HEADER TEXT</h3>
  <p>Duis semper, mi in sagittis faucibus</p>
  <p>List Text section:</p>
  <ul>
    <li>Praesent scelerisque tempor imperdiet</li>
    <li>Praesent scelerisque tempor imperdiet</li>
    <li>Praesent scelerisque tempor imperdiet</li>
  </ul>
  <p>Maecenas scelerisque ante vel facilisis malesuada. Duis semper, mi in sagittis faucibus, lacus felis cursus lectus, bibendum commodo arcu nisi eu mauris. Praesent scelerisque tempor imperdiet.</p>
      </div>
      <div class="page-content-right"><img id="side-image" src="https://www.abaudiovisual.co.uk/wp-content/uploads/holding-image.jpg" width="440" height="276" alt=""></div>
      <div class="page-info-split">
        <h2>HEADER TEXT?</h2>
        <div class="info-bg-panel">lacus felis cursus lectus</div>
        <div class="info-bg-panel">lacus felis cursus lectus</div>
        <div class="info-bg-panel">lacus felis cursus lectus</div>
        <div class="info-bg-panel">lacus felis cursus lectus</div>
      </div>
    </div>    
    <div class="lower-info-content">
      <div class="pdf-file">Read the <a href="pdf file link to go here">Technical PDF document here</a>
      </div>
    </div>
    <div class="lower-info-content">    
      <div class="products">
        <div class="product-container">
          <div class="product-image"><img src="https://www.abaudiovisual.co.uk/wp-content/uploads/holding-image.jpg" width="200px" height="200px"></div>
          <div class="product-1">
            <h3>HEADER TEXT</h3>
              <ul>
                <li>Praesent scelerisque tempor imperdiet</li>
                <li>Praesent scelerisque tempor imperdiet</li>
              </ul>
            <div class="list-pdf-file">
              <a href="pdf file link to go here">
                <div class="list-pdf-image"><img src="https://cdn.shopify.com/s/files/1/0407/5130/0760/files/adobe-pdf-icon.png?v=1593157086" width="32px" height="32px"></div>
                <div class="list-pdf-title">Technical PDF document here</div>
              </a>
            </div>
          </div>
        </div>
        <div class="product-container">
          <div class="product-image"><img src="https://www.abaudiovisual.co.uk/wp-content/uploads/holding-image.jpg" width="200px" height="200px"></div>
          <div class="product-1">
            <h3>HEADER TEXT</h3>
              <ul>
                <li>Praesent scelerisque tempor imperdiet</li>
                <li>Praesent scelerisque tempor imperdiet</li>
                <li>Praesent scelerisque tempor imperdiet</li>
                <li>Praesent scelerisque tempor imperdiet</li>
              </ul>
          </div>       
        </div>
        <div class="product-container">
          <div class="product-image"><img src="https://www.abaudiovisual.co.uk/wp-content/uploads/holding-image.jpg" width="200px" height="200px"></div>
          <div class="product-1">
            <h3>HEADER TEXT</h3>
            <p>List Text section:</p>
              <ul>
                <li>Praesent scelerisque tempor imperdiet</li>
                <li>Praesent scelerisque tempor imperdiet</li>
                <li>Praesent scelerisque tempor imperdiet</li>
                <li>Praesent scelerisque tempor imperdiet</li>
              </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
 
is this possible or what would the cost be to get the section/page developed by a shopify guru?
0 Likes
Highlighted
New Member
33 0 0

Hello there!
Hope you're doing good.

Please reach me out at Skype: live: luis_18439, or mail me at luis@cisinlabs.com

Hope to hear from you soon.

Have a nice day.

Regards,
Luis

0 Likes
Highlighted
Tourist
6 0 1

hey there my name is chen and I'm the owner of zissu ltd - shopify experts. nice to meet you =] I hope you're at home safe.

I’d love to help! I can create the section in the customization sidebar. as I developed shopify theme this will be an easy one.

you may watch my expert profile to see how others review our work: https://experts.shopify.com/no-name4 , and have a look at some of the projects we've done in our portfolio: https://zissultd.com/pages/portfolio

 

feel free to ask anything also in WhatsApp: +972544492311 or email: zissuc@gmail.com I'll be here for you.

0 Likes
Highlighted
Trailblazer
380 15 14

Hi @AntonC 

I hope you're doing great!

I would be happy to work with you. Please give me a suitable time to discuss your requirements.

Also, add me over Skype id- live:jennifer.wcoast or Email- sales@wreximinfotech.com

I look forward to your response!

Stay Well

Thanks!

0 Likes
Highlighted
Tourist
28 0 1

Hello,

I reviewed your requirement and have couple of questions, so have any chance to discuss with you in details?

Thanks,

Darshan Shah (skype: shah.darshanv)

+91 98250 86960

Knowyweb company specializing in web dev/design, digital marketing, and online strategy. Skype: knowyweb & Email : darshan@knowyweb.com
0 Likes
Highlighted
Excursionist
110 1 1

Hi there,

I can help you. Please contact me at biz@webdesksolution.com or Skype: sales.wds

0 Likes
Highlighted
New Member
10 0 0

Hello @AntonC  
Hope you're doing great,

I am a Shopify Expert & ready to help you to  create a liquid page template.

let's quick discuss on email or skype as per your comfortable.
i am always available for my best support.

Email -shaheen@amazecommerce.com

Waiting for your reply
Thanks!

0 Likes
Highlighted
Pathfinder
210 5 17

Hello,
I want to discuss regarding your requirement, Can you come online with me via skype, email. 

Skype - info@99coders.co
Email - atique@999coders.co 

Will wait for you,
thanks

also, If you like my answer then please like & for helpful then please accept as a solution.
Best Regards,
Shopify Expert
Atique/99coders
Email: atique@99coders.co
Skype: info@99coders.co
0 Likes