Hard Code the Image-Banner

Hard Code the Image-Banner

choudhmh
Shopify Partner
3 0 0

Initially coded my image-banner in pure HTML/CSS. When i tried to upload it in theme the whole code, it wasn't possible so had to take a screenshot of the banner convert it to image and upload it.

The image quality is very poor.

 

Initial only in HTML/CSS Designed:

choudhmh_0-1717046514073.png

 

This is how poor the banner looks on Shopify:

choudhmh_1-1717046545934.png

 

 

Is there a way of me hard coding the banner directly on shop website in HTML/CSS>

Sorry i'm all new to this.

 

Thank you

Replies 3 (3)

ProtoMan44
Shopify Partner
704 57 112

@choudhmh thanks for posting here can you please share the store link here?

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
choudhmh
Shopify Partner
3 0 0

That's my HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />

    <link rel="stylesheet" href="./global.css" />
    <link rel="stylesheet" href="./index1.css" />
    <link
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="iphone-14-15-pro-max-2">
      <main class="ellipse-parent">
        <div class="frame-child"></div>
        <div class="frame-item"></div>
       
        <div class="ellipse-div"></div>
        <div class="frame-child1"></div>
        <div class="ellipse-group">
          <div class="frame-child2"></div>
          <div class="frame-child3"></div>
          <div class="frame-child4"></div>
        </div>
        <div class="frame-child5"></div>
        <div class="frame-child6"></div>
        <div class="ellipse-container">
          <div class="frame-child7"></div>
          <div class="frame-child8"></div>
          <div class="frame-child9"></div>
          <div class="frame-child10"></div>
          <div class="frame-child11"></div>
          <footer class="ellipse-footer"></footer>
          <div class="frame-child12"></div>
          <div class="frame-child13"></div>
          <div class="frame-child14"></div>

          <img
            class="product-background-mood-board"
            alt=""
          />

          <img
            class="product-background-mood-board1"
            alt=""
            src="product_background.png"
          />


          <img
            class="group-icon"
            loading="lazy"
            alt=""
            src="mobile.png"
          />
        </div>
        <div class="frame-parent">
          <div class="frame-group">
            <div class="ellipse-wrapper">
              <div class="frame-child15"></div>
            </div>
            <div class="frame-child16"></div>
          </div>
          <div class="frame-container">
            <div class="never-feel-hanging-again-parent">
              <h1 class="never-feel-hanging-container">
                <p class="never-feel-hanging"><b>Never Feel Hanging Again</b></p>
              </h1>
              <div class="boost-your-vitality-container">
                <p class="boost-your-vitality">
                  Boost your vitality with science-backed supplements that
                  support your mental focus and a healthy body.
                </p>
              </div>
              <button class="frame-wrapper">
                <div class="shop-now-wrapper">
                  <div class="shop-now">Shop now</div>
                </div>
              </button>
            </div>
            <div class="frame-child17"></div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>
 
I need my specific banner added with the above code. Also have the CSS code, need guidance on ways i can also merge that with the html coe

PaulMartin
Shopify Partner
624 60 147

You could add this as a section, then add your code inside that new section file you created, then either add that in the Theme editor or directly in your index.json file. 

Sections (shopify.dev) 

contact@paulmartinlopez.com
Feel free to email me! 😄
I'm open to conversations or work ʕ •ᴥ•ʔ