DEV Community: MozzamShahid

Shopify Custom Section Announcement Bar with Scrolling

MozzamShahid — Thu, 19 Dec 2024 13:39:05 +0000

Hi, My name is Mozzam. You can learn more about me on Upwork.

Today we are going to build a manageable announcement bar for updating our customers. Due to Christmas holidays, shipments can arrive late.

Here are the details.

Here are the complete details.

Go Shopify Code Editor

Then open Section > Create Liquid File By AnyName (In my case, I name it announcement.liquid.)

Paste the Code

{{ 'abar.css' | asset_url | stylesheet_tag }}
<div class="main-div">
<div class="main-text">{{ section.settings.bar }}</div>
</div>

{% schema %}
  {
    "name": "Bar", "tag": "section", "class": "section",
    "settings": [
      {
        "type": "text",
        "id": "bar",
        "label": "Bar Text"
      }
    ],
    "presets": [
      {
        "name": "Bar",
      }
    ],
    "enabled_on": {
      "templates": ["*"],
      "groups": ["header"],
    },
  }
{% endschema %}

Then in the asset folder create a CSS file.

.main-div{
  display: flex;
  justify-content: center;
  height: 40px;
  background-color: black;
  color: white;
  text-align: center;
  align-items: center;
}

.main-text{
  font-family: sans-serif;
  font-weight: semi-condensed;
}

.main-text{
  animation: textscroll 25s linear 1s reverse infinite;
}

@keyframes textscroll {
  0%{
    transform: translateX(-100vw);
  }
  100%{
    transform: translateX(100vw);
  }
}

@media screen and (max-width: 769px){
  .main-text{
  width: 100vw;
     white-space: nowrap;
      animation: textscroll 15s linear 1s reverse infinite;

}
}

Here it is, and you can directly make changes in your theme.

Shopify Custom Coded: Vimeo/Youtube Review Section

MozzamShahid — Wed, 18 Dec 2024 18:48:06 +0000

Here is the End Result

Hi, My Name is Mozzam Shahid. An Information Technology Graduate, Based in Lahore, running a brand name cosmeticmoon.com.pk Who I'm Why you should take interest in this Blog. I've been doing Shopify E-commerce consultation and marketing for the past 5 years. during this time most of the top brands in the e-commerce space that in the UK, CA, USA, EU, AU, Bulgaria, Morocco, Dubai, NL, and Germany. Honestly, I forget half of there names. People from 500 Fortune Inc. Standford, Howard Enterpenures to Enterpenures from the Streets I worked with everyone. Yes, Even the Enterpenure that is from the Pacific.

This year Finding a Shopify Developer is getting though as we are busy, spending time in inventory, marketing, and designing. I always listen that something is not possible, time taking this and that.

So I've decided to make some boxes that are from scratch Special Thanks to the Howard CS50X Course By David J. Malan. His teaching is very helpful.

The Blog is starting from this point

Open Shopify > Online Store > "Make a Duplicate of your theme" > Click on 3 Dots > Edit Code

Go to Sections > Click on Add a Section > Choose Liquid & Name a section

In My Case, I've named head-video.liquid

Following is the code

{{ 'head-video.css' | asset_url | stylesheet_tag }}
<div class="main-video">
        <div class="heading-video">{{ section.settings.headline }}</div>
        <p class="description-video">{{ section.settings.description }}</p>

            <div class="video-section">
              {% for block in section.blocks %}
            <iframe class="player-videos" src="{{ block.settings.main-video }}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="Basket of Love">
            </iframe>
              {% endfor %}
            </div>
    </div>

{% schema %}
  {
    "name": "VideoReview", "tag": "section", "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "inline_richtext", "id": "headline", "label": "Video Section Headline"
      },
      {
        "type": "text",   "id": "description", "label": "Description"
      }
    ],
    "max_blocks": 3,
    "blocks": [
      {
        "name": "Video",
        "type": "video",
        "settings": [
          {
          "type": "video_url", "id": "main-video", "label": "Video URL",
            "accept": [
          "youtube",
          "vimeo"
        ]
          }
        ]
      },
    ],
    "presets": [
      {
        "name": "VideoReviews",
        "blocks": [
      {
        "type": "video",
      }
      ]
      }
    ]
  }
{% endschema %}

Here is the CSS Code
Now go to assets and create a CSS file same name

.player-videos{
    height:600px;
}

.main-video{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 20px;
}

.heading-video{
    font-size: 32px;
    font-weight: semi-condensed;
}

.description-video{
    font-size: 18px;
    text-align: center;
}

.video-section {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 20px;
  border-radius: 5px;
}

@media screen and (max-width:769px){
  .video-section {
  flex-direction: column;

}

}

Now we will talk about it in detail

Facebook Page Invite Code 2024 | Work for People that Like Your Post

MozzamShahid — Mon, 25 Nov 2024 10:43:05 +0000

Here is the Code Paste that in the Console
Make Sure first you scroll down to the bottom of the invite tab so that every invite button is shown. Then, paste the code and sit back and relax.

`let mozzam = function() {
let buttons = document.querySelectorAll('[aria-label="Invite"]:not([data-clicked])');
let index = 0;

let interval = setInterval(() => {
    if (index < buttons.length) {
        buttons[index].click();
        buttons[index].setAttribute('data-clicked', 'true'); // Mark button as clicked
        index++;
    } else {
        window.scrollBy(0, window.innerHeight); // Scroll down
        buttons = document.querySelectorAll('[aria-label="Invite"]:not([data-clicked])'); // Update buttons
        index = 0;

        if (buttons.length === 0) {
            clearInterval(interval); // Stop when no buttons remain
            console.log("No more buttons to click!");
        }
    }
}, 3000); // Click every 3 seconds

};

mozzam();