OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can I improve and make my custom Shopify section responsive, including fixing the pseudo-element and circular text animation?

  • Thread starter Thread starter gggggggggggggg
  • Start date Start date
G

gggggggggggggg

Guest
I have created a custom section for my Shopify store, but I'm facing some issues and would appreciate feedback and improvements. Specifically, I'm looking for help with the following:


  • Fixing the .custom-section:after pseudo-element: It is not created as it should be.


  • Improving the circular text animation: The current implementation has issues.


  • Making the entire section fully responsive: Currently, it is not responsive.

Here is the code for my 'custom-section.liquid' and 'custom-section.js':


Code:
document.addEventListener('DOMContentLoaded', () => {
  const text = document.querySelector('.circular');
  const message = "We’re the bestie that you can be yourself with. ";
  text.innerHTML = '';
  for (let i = 0; i < message.length; i++) {
    let circularTextSpan = document.createElement('span');
    circularTextSpan.textContent = message[i];
    text.appendChild(circularTextSpan);
    circularTextSpan.style.transform = `rotate(${360 * i / message.length}deg)`;
  }
});

Code:
<style>
  body {
    margin: 0;
  }
  
  .custom-section {
    background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
  }
  
  .custom-section .container-wrapper {
    position: relative;
    width: 1510px;
    height: 430px;
    border: 2px dashed red;
    left: 75px;
    top: 110px;
    overflow: hidden;
    max-width: 1440px;
    z-index: 2;
  }
  
  .custom-section .text-section {
    width: 520px;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px dashed blue;
  }
  
  .custom-section .title-container h2 {
    font-family: 'ITC Garamond Std';
    font-size: 64px;
    font-weight: 300;
    line-height: 70px;
    letter-spacing: -2px;
    text-align: left;
    margin: 0;
    padding: 0;
  }
  
  .custom-section .text-container {
    font-family: 'iCiel Internacional', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    width: 60%;
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 3;
  }
  
  .custom-section .spacer {
    flex: 1;
    border: 2px dashed green;
  }
  
  .custom-section .images-wrapper {
    width: 960px;
    height: 430px;
    position: absolute;
    left: 550px;
    display: flex;
    gap: 30px;
    border: 2px dashed purple;
    overflow: hidden;
    z-index: 3;
  }
  
  .custom-section .images-wrapper img {
    width: 300px;
    height: 430px;
  }
  
  .circular span {
    font: 14px Inter;
    height: 80px;
    position: absolute;
    left: 75px;
    transform-origin: bottom center;
    line-height: 16.94px;
  }
  
  .circular {
    width: 160px;
    height: 160px;
    border: 2px dashed yellow;
    position: relative;
    left: -10px;
  }

  @keyframes rotateText {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .circular {
    width: 160px;
    height: 160px;
    border: 2px dashed yellow;
    position: relative;
    animation: rotateText 10s linear infinite;
    z-index: 3;
  }

  .custom-section:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(102.77deg, rgba(197, 234, 246, 0) -6.69%, rgba(122, 177, 194, 0.7) 47.23%);
    left: 50%;
    top: 70px;
    transform-origin: top left;
    rotate: 20deg;
    transform: skew(-13deg);
    z-index: 1;
  }

  {% comment %}
  .blue-background {
    width: 1311px;
    height: 590px;
    left: 300px;
    background-color: blue;
    position: relative;
    opacity: 0.15;
    transform: rotate(30deg);
  }
  {% endcomment %}
</style>

<script src="{{ 'custom-section.js' | asset_url }}" defer="defer"></script>

<section class="custom-section">
  <div class="container-wrapper">
    <div class="text-section">
      <div class="title-container">
        <h2>{{ section.settings.heading }}</h2>
      </div>
      <div class="text-container">
        <p>{{ section.settings.content }}</p>
      </div>
      <div class="spacer"></div>
      <h1 class="circular">
        {{ section.settings.circular_content }}
      </h1>
    </div>
    <div class="images-wrapper">
      <img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
      <img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
      <img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
    </div>
  </div>
  <div class="blue-background"></div>
</section>

{% schema %}
{
  "name": "Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our jewelry"
    },
    {
      "type": "text",
      "id": "content",
      "label": "Content",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit."
    },
    {
      "type": "text",
      "id": "circular_content",
      "label": "Circular Content",
      "default": "We’re the bestie that you can be yourself with."
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "slide",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sample Section"
    }
  ]
}
{% endschema %}

Issues that I know:


  • .custom-section:after pseudo-element: The gradient background isn't appearing correctly. I think that there is better way to do this feature.


  • Circular text animation: As you can see from the screenshot, the text doesn't look good.


  • Responsiveness: The section is not responsive.

If you find something else, please write! :)

This is how the section looks on my website now:

This is how the section looks on my website now

This is how it MUST look(The Figma):

This is how it MUST look

Questions:

  • How can I properly implement the .custom-section:after pseudo-element to ensure it is implemented in the best way?
  • What are the best practices to fix and improve the circular text in my JavaScript and CSS?
  • How can I make this entire section fully responsive across various devices and screen sizes?
  • Are there any improvements in terms of structure or efficiency for my current implementation?

<p>I have created a custom section for my Shopify store, but I'm facing some issues and would appreciate feedback and improvements. Specifically, I'm looking for help with the following:</p>
<ul>
<li><p>Fixing the .custom-section:after pseudo-element: It is not created as
it should be.</p>
</li>
<li><p>Improving the circular text animation: The current implementation has
issues.</p>
</li>
<li><p>Making the entire section fully responsive: Currently, it is
not responsive.</p>
</li>
</ul>
<p>Here is the code for my 'custom-section.liquid' and 'custom-section.js':</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', () => {
const text = document.querySelector('.circular');
const message = "We’re the bestie that you can be yourself with. ";
text.innerHTML = '';
for (let i = 0; i < message.length; i++) {
let circularTextSpan = document.createElement('span');
circularTextSpan.textContent = message;
text.appendChild(circularTextSpan);
circularTextSpan.style.transform = `rotate(${360 * i / message.length}deg)`;
}
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><style>
body {
margin: 0;
}

.custom-section {
background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
position: relative;
width: 100%;
height: 650px;
overflow: hidden;
}

.custom-section .container-wrapper {
position: relative;
width: 1510px;
height: 430px;
border: 2px dashed red;
left: 75px;
top: 110px;
overflow: hidden;
max-width: 1440px;
z-index: 2;
}

.custom-section .text-section {
width: 520px;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px dashed blue;
}

.custom-section .title-container h2 {
font-family: 'ITC Garamond Std';
font-size: 64px;
font-weight: 300;
line-height: 70px;
letter-spacing: -2px;
text-align: left;
margin: 0;
padding: 0;
}

.custom-section .text-container {
font-family: 'iCiel Internacional', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-align: left;
width: 60%;
margin-bottom: 0;
padding-bottom: 0;
z-index: 3;
}

.custom-section .spacer {
flex: 1;
border: 2px dashed green;
}

.custom-section .images-wrapper {
width: 960px;
height: 430px;
position: absolute;
left: 550px;
display: flex;
gap: 30px;
border: 2px dashed purple;
overflow: hidden;
z-index: 3;
}

.custom-section .images-wrapper img {
width: 300px;
height: 430px;
}

.circular span {
font: 14px Inter;
height: 80px;
position: absolute;
left: 75px;
transform-origin: bottom center;
line-height: 16.94px;
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
left: -10px;
}

@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
animation: rotateText 10s linear infinite;
z-index: 3;
}

.custom-section:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(102.77deg, rgba(197, 234, 246, 0) -6.69%, rgba(122, 177, 194, 0.7) 47.23%);
left: 50%;
top: 70px;
transform-origin: top left;
rotate: 20deg;
transform: skew(-13deg);
z-index: 1;
}

{% comment %}
.blue-background {
width: 1311px;
height: 590px;
left: 300px;
background-color: blue;
position: relative;
opacity: 0.15;
transform: rotate(30deg);
}
{% endcomment %}
</style>

<script src="{{ 'custom-section.js' | asset_url }}" defer="defer"></script>

<section class="custom-section">
<div class="container-wrapper">
<div class="text-section">
<div class="title-container">
<h2>{{ section.settings.heading }}</h2>
</div>
<div class="text-container">
<p>{{ section.settings.content }}</p>
</div>
<div class="spacer"></div>
<h1 class="circular">
{{ section.settings.circular_content }}
</h1>
</div>
<div class="images-wrapper">
<img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
<img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
<img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
</div>
</div>
<div class="blue-background"></div>
</section>

{% schema %}
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Our jewelry"
},
{
"type": "text",
"id": "content",
"label": "Content",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit."
},
{
"type": "text",
"id": "circular_content",
"label": "Circular Content",
"default": "We’re the bestie that you can be yourself with."
}
],
"blocks": [
{
"type": "column",
"name": "slide",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
}
]
}
],
"presets": [
{
"name": "Sample Section"
}
]
}
{% endschema %}</code></pre>
</div>
</div>
</p>
<p>Issues that I know:</p>
<ul>
<li><p><code>.custom-section:after</code> pseudo-element: The gradient background isn't appearing correctly. I think that there is better way to do this feature.</p>
</li>
<li><p>Circular text animation: As you can see from the screenshot, the text doesn't look good.</p>
</li>
<li><p>Responsiveness: The section is not responsive.</p>
</li>
</ul>
<p>If you find something else, please write! :)</p>
<p>This is how the section looks on my website now:</p>
<p><a href="https://i.sstatic.net/A403xB8J.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/A403xB8J.png" alt="This is how the section looks on my website now" /></a></p>
<p>This is how it MUST look(The Figma):</p>
<p><a href="https://i.sstatic.net/MB9m4lip.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/MB9m4lip.png" alt="This is how it MUST look" /></a></p>
<p>Questions:</p>
<ul>
<li>How can I properly implement the <code>.custom-section:after</code> pseudo-element to ensure it is implemented in the best way?</li>
<li>What are the best practices to fix and improve the circular text in my JavaScript and CSS?</li>
<li>How can I make this entire section fully responsive across various devices and screen sizes?</li>
<li>Are there any improvements in terms of structure or efficiency for my current implementation?</li>
</ul>
 
Top