Shopify themes, liquid, logos, and UX
Hey there, hope you're doing well during these times.
I checked the thread about having a different banner/slideshow image and mobile than desktop and i really cannot seem to make it work for me.
I'm using a theme i bought on themeforest. i could really reall y use your help please i'd be so so grateful.
So here's the code for the slideshow section :
<div class="ishislider">
<div class="slideshow-block">
{% if section.blocks.size > 0 %}
<div id="ishislideshow-carousel" class="ishislideshow-carousel-{{ section.id }} owl-carousel owl-theme logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
{% for block in section.blocks %}
<div class="slideshow__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %}" {{ block.shopify_attributes }}>
<a href="{% if block.settings.link != blank %}{{ block.settings.link }}{% else %}/{% endif %}" class="slideshow__link">
{% if block.settings.image != blank %}
{{ block.settings.image | img_url: '2048x' | img_tag: block.settings.image.alt, 'logo-bar__image' }}
{% else %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.subtitle != blank or block.settings.maintitle != blank or block.settings.desc != blank %}
<div class="page-width">
<div class="slider-content col-md-6 col-sm-6 col-xs-6 slider-content-{{block.settings.text_position}} {{block.settings.textalignment}}" style="text-align:{{ block.settings.textalignment }}">
{% if block.settings.subtitle != blank %}
<div class="sub-title" style="color:{{ block.settings.subtitlecolor }}"> {{ block.settings.subtitle }}</div>
{% endif %}
{% if block.settings.maintitle != blank %}
<div class="main-title" style="color:{{ block.settings.maintitlecolor }}">{{ block.settings.maintitle }}</div>
{% endif %}
{% if block.settings.desc != blank %}
<div class="desc" style="color:{{ block.settings.desccolor }}">{{ block.settings.desc }}</div>
{% endif %}
{% if block.settings.button_label != blank %}
<div class="slider-btn btn">{{ block.settings.button_label | escape }}</div>
{% endif %}
</div>
</div>
{% endif %}
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
</div>
<style type="text/css">
.ishi-slider-section .slider-content-right{
float: right;
}
.ishi-slider-section .slider-content-left{
float: left;
}
.ishi-slider-section .slider-content-center{
margin: 0 auto;
float:unset;
}
</style>
<script>
jQuery(document).ready(function() {
$('.ishislideshow-carousel-{{ section.id }}').owlCarousel({
nav: true,
loop: true,
autoplay:true,
animateOut: 'fadeOut',
autoplayTimeout:4000,
navText: [
'<i class=\'material-icons\'></i>',
'<i class=\'material-icons\'></i>'
],
items: 1,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: false,
itemsMobile: false
});
});
</script>
{% schema %}
{
"name": "Ishi Slideshow",
"class": "index-section ishi-slider-section",
"max_blocks": 5,
"settings": [
],
"blocks": [
{
"type": "slide_image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Size: 1920px X 700px"
},
{
"type": "select",
"id": "text_position",
"label": "Text Position",
"default": "left",
"options": [
{ "value": "left", "label": "Left"},
{ "value": "center", "label": "Center"},
{ "value": "right", "label": "Right"}
]
},
{
"type": "select",
"id": "textalignment",
"label": "Text Alignment",
"default": "left",
"options": [
{ "value": "left", "label": "Left"},
{ "value": "center", "label": "Center"},
{ "value": "right", "label": "Right"}
]
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Big Discount"
},
{
"type": "color",
"id": "subtitlecolor",
"label": "Subtitle Color",
"default": "#FF8C9A"
},
{
"type": "text",
"id": "maintitle",
"label": "Title",
"default": "Special Kids Offer"
},
{
"type": "color",
"id": "maintitlecolor",
"label": "Title Color",
"default": "#000000"
},
{
"type": "html",
"id": "desc",
"label": "Description",
"default": "Flat 10% Off On Order Above $29.99"
},
{
"type": "color",
"id": "desccolor",
"label": "Description Color",
"default": "#666666"
},
{
"type": "text",
"id": "button_label",
"label": "Button Label",
"default": "SHOP NOW"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Ishi Slideshow",
"category": "ishi themes",
"blocks": [
{
"type": "slide_image"
},
{
"type": "slide_image"
}
]
}
]
}
{% endschema %}
And i'd like the button to be centred on the mobile version.
I've been searching and trying and messing up for 4 days now 😞
Thank you so much if you can help.
Can I request access to your themes to take a look? I don't have owl carousel and I don't feel like setting it up. I'll see if I can't get it figured out for you. I just need your store url
Alright I requested access. You should receive an email to approve or deny me.
I gave you access 🙂
Alright I think I got it working the way you want it. Go ahead and check it out. I just took a screen shot of your current banner at a particular spot and scaled it up for the mobile image cause I didn't know what to put there, so it'll look blurry because it's scaled up. But if you put a regular 992x1500 image in there it should be all good. Let me know if that works for you.
Oops, should mention you have to preview the "Ninthony Editing" theme
This is EXACTLY WHAT I WANTED !!! Thank you soooo much !!! wow 🙂
Alright cool. I did the styles in the section itself just for ease of styling, I'll relocate them to your css file now.
Added a note in the name for you to know which theme i'd like you to fix for me 🙂 Thank you so much again
Ok you could have just published my theme, I duplicated your live theme and that's what I was working on. I updated your current theme, but you may need to add your content back in.
Oh my bad... Hope that wasnt too annoying... Thanks for taking the time to do all of this
@Ninthony Is there a way to have the button stay on the slideshow even tho i remove the Title, subtit ect.. ?
Try now, I added a condition that should allow it.
Can you tell me where i should go to custom the button and make it bigger?
Depends when you want to make it bigger. There's different styles depending on desktop or mobile. You could probably just add the bottom of your theme.css.liquid file:
#ishislideshow-carousel .slider-content .slider-btn {
font-size: 18px!important
}
And that'll make it 18px across the board. The button size is based off the font size and the padding for that selector.
@Ninthony Figured out how to do it thank you so much! 😊
I have another issue with the theme im currently using.
(see screenshots)
The comments, the upsell product, the benefits under the product, the benefits section… it can’t change them depending on the product page. No matter the product it’s always the same.
is there any way to fix that? Can you show me? I would very much appropriate it. Please 🙏🏾 If you can’t do it it’s alright i understand.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024