How can i add custom html, Css and JS in shopify?

Store Design
1

I want to show a custom tab in right side of Product page below the description.

I have html, css and js code. But don’t know where to put this.

Html:


  

    - Dosage

    - Precautions

    - FAQs
  
 
  
    

      

"You know, there's a million fine looking women in the world, dude. But they don't all bring you lasagna at work. Most of 'em just cheat on you."

    

    
      

"People in quality assurance, manufacturing, packaging, distribution and facility management are all required to meet standards for Current Good Manufacturing Practices (GMP)."

    

    
      

**In how much time I will start getting results?**

You will start getting results within 1-2 months use. Use at least 3-4 months. You can continue until you get your desired results.
"

CSS:

/* Tabs */
.tabs {
  width: 400px;
  background-color: #fc8403;
  border-radius: 5px 5px 5px 5px;
}
ul#tabs-nav {
  list-style: none;
  margin: 0;
  padding: 5px;
  overflow: auto;
}
ul#tabs-nav li {
  float: left;
  font-weight: bold;
  margin-right: 2px;
  padding: 8px 10px;
  border-radius: 5px 5px 5px 5px;
  /*border: 1px solid #d5d5de;
  border-bottom: none;*/
  cursor: pointer;
}
ul#tabs-nav li:hover,
ul#tabs-nav li.active {
  background-color: #fc6f03;
}
#tabs-nav li a {
  text-decoration: none;
  color: #FFF;
}
.tab-content {
  padding: 10px;
  border: 5px solid #fc8403;
  background-color: #FFF;
}

/* Just for CodePen styling - don't include if you copy paste */
html {
  margin: 0;
  padding: 0;
}
body { 
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  margin: 2em;
}

js:

// Show the first tab and hide the rest
$('#tabs-nav li:first-child').addClass('active');
$('.tab-content').hide();
$('.tab-content:first').show();

// Click function
$('#tabs-nav li').click(function(){
  $('#tabs-nav li').removeClass('active');
  $(this).addClass('active');
  $('.tab-content').hide();
  
  var activeTab = $(this).find('a').attr('href');
  $(activeTab).fadeIn();
  return false;
});

It will look like this:

Fahaad_0-1609160386416.png
Fahaad_0-1609160386416.png412×170 3.81 KB

Please help :slightly_smiling_face:

2

Hi there,

Just follow the below steps to put the code on the product page

  1. Go to Online Store->Theme->Edit code
  2. Section → find product-template.liquid and put the HTML code where you want to show the HTML
  3. Assets → find theme.scss or create your own CSS file from Assets → Add new file → and put your all CSS code there
  4. Assets → find theme.js file or create your own JS from Assets → Add new file → and put your all Js code there
    Note:- if you create your own JS and CSS file you have to call these files from

find Layout → theme.liquid file and into head tag include your CSS and JS file there.

If you want more help you can hire me

3

Thank you ashish for the solution, But in this way, this will display on all product pages, i want to display different for all products.

4

You can do it via a custom field app.
Custom field app has the ability to insert different text in a particular product type.