Helper Documents:

----------------------------------
/**** Shopify Image dynamic ******/
----------------------------------

----------------------------------------------------
/**** How to Use Retina image with Wordpress ******/
----------------------------------------------------

https://www.youtube.com/watch?v=TneKjxlml4w

-----------------------------------------------------------
/**** select dropdown for all type supported design ******/
-----------------------------------------------------------

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
}
select::-ms-expand {
        display: none;
    }

------------------------------------
/**** Radio button customize ******/
------------------------------------

input[type="radio"] {
    /* hide the real radio button - but not with display:none as it causes x-browser problems */
    opacity:0.2;
    position:absolute;
    /*left:-10000;*/
    display: none;
}
input[type="radio"] + label {
    cursor: pointer;
}
/* N.B You could use a child span in the label if you didn't want to use the :after pseudo */
input[type="radio"] + label:before {
    display: inline-block;
    content: "✓";
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    color: #ccc;
    background: #ccc;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin: 0 10px;
    border-radius: 50%;
    border: 1px solid grey;
}
input[type="radio"] + label:hover:before {
    background: #aaa;    
}
input[type="radio"]:checked + label:before {
    color:#fff;
    background: #555; 
    border-color:white;
}

----------------------------------------
/**** so simple radio customize ******/
---------------------------------------

.ProductListWrapper .cont__anchor input[type="radio"] {
    -webkit-appearance: inherit;
    width: 14px;
    height: 14px !important;
    border-radius: 100%;
    background: transparent;
    box-sizing: border-box;
    position: relative;
    border: 2px solid #333;
    outline: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.ProductListWrapper .cont__anchor input[type="radio"]:checked:before {
    -webkit-appearance: inherit;
    width: 6px;
    height: 6px !important;
    border-radius: 100%;
    background: #000;
    box-sizing: border-box;
    position: absolute;
    border: 0px solid #333;
    content: "";
    left: 2px;
    top: 2px;
}

------------------------------------------------
/**** so simple checkbox customize start ******/
-----------------------------------------------

.form-group input[type="checkbox"] {
  -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: #000;
    box-sizing: border-box;
    position: relative;
    border: 0;
    outline: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    top: -3px;
    cursor: pointer;
}

.form-group input[type="checkbox"]:checked:before {
   -webkit-appearance: none;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    position: absolute;
    border: 0px solid #333;
    content: "✓";
    left: 3px;
    top: -2px;
    color: #fff;
    font-size: 12px;
}

----------------------------------------------
/******** using retina in shopify ***********/
----------------------------------------------

https://www.shopify.in/partners/blog/using-responsive-images

----------------------------------------------------
/******** image position with absolute ***********/
----------------------------------------------------

.imagearea
{
  display: flex;
  flex-wrap: wrap;
}
.image_box{
width: 25%;
padding-top: 25%;
position: relative;
}
.image_box img{
max-width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
object-fit: cover;
height: 100%;
width: 100%;
}

--------------------------------------------------------------
/******** for Facebook or other social media post ***********/
--------------------------------------------------------------

Must Paste this after <head> starting tag.

atfirst create a image in photoshop with 1200x630 width and height. then upload it into images folder. then:

----------------------------------------
/******** orientation code ***********/
----------------------------------------

@media screen and (orientation:landscape) and
(min-device-width: 320px) and (max-device-width: 767px) {
  #app_common_modal .app_modal_body
  {
    margin-top: 20px;
  }
}

----------------------------------------------------------
/******** video supported code for all device ***********/
----------------------------------------------------------

------------------------------------------------------
/******** for terms, privacy scroll issue ***********/
------------------------------------------------------

<div class="overflow_area">
<h2>Terms and conditions</h2>
</div>

.overflow_area {
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 0;
}
</style>

---------------------------------------------------
/******** meta tag for page zoom issue ***********/
---------------------------------------------------

--------------------------------------------
/******** smooth scroll for nav ***********/
--------------------------------------------

$(document).ready(function() {
    $(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -80
    }, 1000);
});
});

------------------------------------------------------
/******** Zoom text disabled in Landscape ***********/
------------------------------------------------------

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

-----------------------------------------------------
/******** For any Link VERSION dynamic : ***********/
-----------------------------------------------------

------------------------------------------------
/******** Input type file customize ***********/
------------------------------------------------

html:
--------
<input id="real_file" type="file" name="electricbill" />

css:
---------

#real_file {
  color: transparent;
}
#real_file::-webkit-file-upload-button {
  visibility: hidden;
}
#real_file::before {
  content: 'Find & Upload bill';
  color: white;
  height: 100%;
  max-width: 180px;
  text-transform: uppercase;
  border: none;
  background-color: rgb(0, 161, 207);
  border-radius: 96px;
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin: auto;
  padding: 15px 25px;
  margin-top: 50px;
  margin-bottom: 17px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

#real_file:active {
  outline: 0;
}

--------------------------------------------
/******** PARENT CLASS SELECT WITH CSS ***********/
--------------------------------------------

VVI: https://ishadeed.com/article/css-has-parent-selector/
--------------------------------------------------------

<div class="parentClass">
   <div class="childClass">HELLO WORLD</div>
</div>

--------------------------------------------
/******** If any Hover effect in desktop button is fine but Mobile Button Not Click solution in IOS ***********/
--------------------------------------------

Actually this is for IOS mainly. click function work on all devices. Button will work hover of the div box and also with click button in IOS.

--------------------------------------------
/******** Shopify Condition meta tag or other conditions ***********/
--------------------------------------------

{%- if template.name == 'blog' -%}
<meta name="description" content="Blogs">
{% endif %}
{%- if canonical_url == 'https://www.cameofencing.com/apps/shop' -%}
     <meta name="description" content="All Products">
{% endif %}

{% if template.name == 'index' or template == 'page.contactPage' %}
<style>
.site-header {
    background-color: transparent;
}
  .main-content
{
  padding-top: 0 !important;
}
</style>

{% endif %}

-----------------------------------------------------------------------------------
/************** Office Error Messages ****************/
-----------------------------------------------------------------------------------

/**placeholder issue**/
------------------------
font size is same, here are placeholders color are different than the input value to distinguish. so thats fine.skip this

/**copyright in one line issue**/
------------------------
Not Possible in one line, if we will do text will be not readable, skip this.

/**landscape popup in middle**/
------------------------
in landscape mode screen height is too small, would be looks too congested, so, it is fine, also it is not an issue, skip this.

-----------------------------------------------------------------------
/******** hide scrollbar but scroll working with css start ***********/
-----------------------------------------------------------------------

#app_common_modal {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll; 
  }
  
  #app_common_modal::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */
  }

/******** hide scrollbar but scroll working with css End ***********/

WORDPRESS
------------
// *FOR GLOBAL CSS REMOVE, PASTE THIS CODE IN FUNCTIONS.PHP* //

add_action( 'wp_enqueue_scripts', 'rf_remove_resources', 999 ); 
function rf_remove_resources() {
    if ( is_page_template('lead-contact.php') ) { // php pagename like homepage.php in ftp
    wp_dequeue_style('ebor-theme'); //for css (paste the css ID name ebor-theme-css(but remove the -css))
    wp_enqueue_script('custom-script'); //for js (paste the JS ID name custom-script-js(but remove the -js))
}
}

How to Shopify draft theme link share to client:
-----------------------------------

https://website.com/pages/lander?preview_theme_id=133254840364
133254840364(this id came from customize url)

create json file in shopify with others theme.liquid use
-----------------------------------------------------
1st create a simple-lander-2 section, then create a template json, select page or product from dropdown, and paste this code.
{
  "layout": "theme.custom-layout",
  "sections": {
    "main": {
      "type": "simple-lander-2",
      "settings": {
      }
    }
  },
  "order": [
    "main"
  ]
}

One page button smooth scroll
-----------------------------------------------------

$(document).ready(function() {
  $(".btn_scroll").click(function() {
    $('html, body').animate({
      scrollTop: $("#form_section").offset().top - 50
    }, 1000);
  });
});

wordpress CSS and JS call in plugins from own directory
-----------------------------------------------------

<?php
/**
 * Plugin Name: Your Plugin
 * Description: A custom plugin example
 * Version: 1.0
 * Author: Your Name
 */

function my_plugin_enqueue_styles() {
    // Enqueue custom CSS from plugin folder
    wp_enqueue_style('my-plugin-custom-style', plugins_url('assets/css/custom-style.css', __FILE__));
}

function my_plugin_enqueue_scripts() {
    // Enqueue custom JS from plugin folder
    wp_enqueue_script('my-plugin-custom-script', plugins_url('assets/js/custom-script.js', __FILE__), array(), null, true);
}

// Hook into WordPress actions to enqueue styles and scripts
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_styles');
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_scripts');

Or,

For any Link VERSION dynamic :

click Me

Helper Documents:

For any Link VERSION dynamic :

Some Image Screenshots :