Re: 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
489 42 79

@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
250 39 72

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) 

Open to help people out, just email me here or tag me by using "@" when posting your comment