Custom theme carousel

Highlighted
New Member
6 0 0

So I hired someone to help me transfer my store from Wordpress to Shopify and they only went half way.

I have a index page with a Carousel, that I'm trying to fix.

So far so good, but I keep getting my images resized or croped in the carousel.

Can anyone help me?

Store: shultz-andina.myshopify.com

Carousel code:

<div id="carousel-example-generic" class="carousel slide hme-tp-slide" data-ride="carousel">        

              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active" id="banner1">
                  <div class="banner1">
                    <div class="producto" style="background: url(https://cdn.shopify.com/s/files/1/1726/6647/files/espalda.jpg?2375410697036901282);background-size:c... background-position:85% center">
                      <div class="container">
                        <div class="copy col-sm-9 col-md-9 col-lg-6 col-lg-offset-1">
                         <h2>Mantén tu <b>#piel</b> hidratada con <b>Crema de Almendras</b>. Una fórmula para cada tipo de piel.</h2>
                        </div>
                         <div class="image col-sm-3 col-md-3 col-lg-5">
                          <img src="https://cdn.shopify.com/s/files/1/1726/6647/files/cremas.png?10454201132777703863" class="img-responsive hvr-float-shadow wp-post-image hme-slide-pimg" alt="cremas" width="279" height="248">
                         </div>
                      </div>
                    </div>
                  </div>
                </div>
                  
                <div class="item" id="banner2">
                 <div class="banner2">
                  <div class="producto" style="background: url(https://cdn.shopify.com/s/files/1/1726/6647/files/piernas.jpg?2375410697036901282);background-size:c... background-position:85% center">
                    <div class="container">
                     <div class="copy col-sm-9 col-md-9 col-lg-6 col-lg-offset-1">
                      <h2>El <b>#Secreto</b> para lucir una piel atractiva</h2>
                     </div>
                    </div>
                  </div>
                 </div>
                </div>
               </div>
         
              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>

</div>

0 Likes
Shopify Partner
2433 0 436

Hi David,

The slideshow picture is used as a background -- this means, that the size of the area does not depend on the size of the image -- it depends on the size of the element contents, i.e. text inside the element or elements size if it is set implicitly (your original site also crops the background picture as the screen width changes).

That's why you upper slideshow is jumpy -- one slide has more text then the other. The theme original slideshow uses the Section Height  parameter to control the height of the slides, however your someone decided to ignore it, as well as the Sections concept.

They also brought in a bootstrap framework, which I suspect may conflict with theme's own grid system based on timber.

As a quick and very dirty fix you may try to assign an implicit height attribute to the <div id="carousel-example-generic"... element, either  in stylesheet, or inline, like so

<div id="carousel-example-generic" class="carousel slide hme-tp-slide" data-ride="carousel"
     style="height:700px;" >        

But I'd scrap all this and redo it all without breaking the theme structure.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
6 0 0

Thank you very much for your insight Tim!

I don't know much about code, and I'm trying to get it right by copying the parts of the code I see are working properly but have no notion of the structure.

Can you point me to a learning resource or course to understand and learn the basics of this language applied to Shopify?

Thanks in advance.

 

By the way googling the section concept right now and I'll try to make things right!!

0 Likes
Shopify Partner
2433 0 436

Well, look at how the themes like Debut are made and customized. Good starting point for reading is this -- https://help.shopify.com/themes

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
6 0 0

Thank you very much I will!

0 Likes
New Member
6 0 0

I tried your quick fix, and it fixed the height, the only problem is that the background image is still cropped...

 

I will look into starting all over again... It doesn't seem that difficult

I'll keep you posted if you'd like

 

0 Likes
New Member
6 0 0

I added some <br> to make it a little dirtier of a fix...

 

Already working on starting from scratch

0 Likes