Solved

Change Alignment of Text Assets on Slideshow between Slides

GetClickt
Shopify Partner
9 1 8

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)
KetanKumar
Shopify Partner
36839 3635 11972

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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

KetanKumar
Shopify Partner
36839 3635 11972

@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
GetClickt
Shopify Partner
9 1 8
KetanKumar
Shopify Partner
36839 3635 11972

@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
9 1 8

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
36839 3635 11972

@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
9 1 8

Slide 1. - All Content Right Hand Side.

Slide 2. - All Content Left Hand Side.

KetanKumar
Shopify Partner
36839 3635 11972

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
9 1 8

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
36839 3635 11972

@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