Change Alignment of Text Assets on Slideshow between Slides

Solved
GetClickt
Shopify Partner
8 1 7

Hi All, 

My slideshow currently aligns text and button assets to the right as per the image below. 

 

Slide-Right.png

 

With this as the slideshow code (obviously CSS isn't here)

 

<div data-section-id="{{ section.id }}" data-section-type="section-slideshow-v2-b" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %} {% if section.settings.sections_layout == "dark" %}background: {{section.settings.sections_bg_color}};{% endif %}">
  <div class="section-slideshow-v2-b">
      <div class="slick-side-h2">       
        {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
        {% if block.type == "slideshow" %}
        <div class="itemv-slide-h1">
          <div class="info-sideh1">
            <div class="picture-slideshow">
              {% if block.settings.block_banerimage != blank %}
              <img src="{{block.settings.block_banerimage | img_url: 'master'}}" class="img-responsive img_slideh1" alt="">
              {% else %}
              <img src="//placehold.it/1920x980" class="img-responsive img_slideh1" alt="slideshow">
              {% endif %}
            </div>        
            <div class="box-content">
              {% if block.settings.block_subtitle != blank %}
              <p class="mb-0" style="color:{{block.settings.color_subtitle}};">{{block.settings.block_subtitle}}</p>
              {% endif %}              
              <div class="box-title">
                {% if block.settings.block_title_top != blank %}
                <h3 class="titlebig mb-0" style="color:{{block.settings.color_block_title_top}};">{{ block.settings.block_title_top }}</h3>
                {% endif %} 
              </div>
              <div class="box-title2">
                {% if block.settings.block_title_top2 != blank %}
                <h3 class="title-small mb-0" style="color:{{block.settings.color_content}};">{{ block.settings.block_title_top2 }}</h3>
                {% endif %}
              </div>
              <div class="box-button">
                {% if block.settings.block_buton != blank %}
                <a class="button-shop" href="{{block.settings.block_url}}" style="color:{{block.settings.color_block_button}}; background-color:{{block.settings.color_bg_block_button}}">
                  {{ block.settings.block_buton }}
                </a>
                {% endif %}
              </div>              
            </div>
            
          </div>
        </div>
        {% endif %}
        {% endfor %}
        {% endif %}
        
      </div>
  </div>
</div>

 

 

I've attached full code in separate files below. This code seems to apply the same settings to each slide in the slideshow as it iterates through the loop. What I'd like to do is set the alignment of the Text/Button assets on each slide - or in much more basic terms - leave as-is in Slide 1, Align Left in Slide 2. 

I already have the code for Slide 2, (slideshow v1 attached) - but I'm having difficulty editing the .liquid to sub in that code when I want it. Any help you can offer would be much appreciated. 

Thanks,

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
32607 3274 10854

This is an accepted solution.

@GetClickt 

thanks for clear asap can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/engo-customize.scss ->paste below code at the bottom of the file.

@media (min-width: 576px) {
    .itemv-slide-h1[data-slick-index="1"] .box-content {left: 10% !important;right: inherit !important;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 10 (10)
suyash1
Shopify Partner
5443 635 898

@GetClickt - can you please share the page link where you have this slideshow?

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
KetanKumar
Shopify Partner
32607 3274 10854

@GetClickt 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
32607 3274 10854

@GetClickt 

thanks can you please confirm look

KetanKumar_0-1652093285856.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GetClickt
Shopify Partner
8 1 7

Basically correct, yes - I'm wanting that section to float left, however the base css isn't the issue - it's changing it through the slides.

 

I'm wanting Slide 1  (slick-slide00 in the HTML) to be as is now with right alignment, however Slide 2 (aria-describedby="slick-slide01") to have the left alignment. 

The code iterates through the loop applying the same settings to each slide, it's this that I'm trying to change.  

I guess I'd be happy enough to drop a css script onto the homepage code that alters this, however I'm not actually sure what selector I need to use to code it for each slide. 

Thanks

Thanks

KetanKumar
Shopify Partner
32607 3274 10854

@GetClickt 

i have just confirm all content do you need on left side right?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GetClickt
Shopify Partner
8 1 7

Slide 1. - All Content Right Hand Side.

Slide 2. - All Content Left Hand Side.

KetanKumar
Shopify Partner
32607 3274 10854

This is an accepted solution.

@GetClickt 

thanks for clear asap can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/engo-customize.scss ->paste below code at the bottom of the file.

@media (min-width: 576px) {
    .itemv-slide-h1[data-slick-index="1"] .box-content {left: 10% !important;right: inherit !important;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GetClickt
Shopify Partner
8 1 7

Perfect - thank you! I got caught up in trying to manipulate the actual slider code that I hadn't thought about hardcoding the CSS separately - and then couldn't find the relevant selector to target only that slide. 

Thanks again. You're a lifesaver.

KetanKumar
Shopify Partner
32607 3274 10854

@GetClickt 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing