All things Shopify and commerce
Hello, I tried to change the mobile version slideshow using this link - https://community.shopify.com/c/Shopify-Discussion/How-to-move-slideshow-text-and-button-on-top-of-t... and now my website is broken!!! Omg help me, I don't know what to do. My shop is - www.glamuras.shop
Solved! Go to the solution
This is an accepted solution.
Solved, this code was not supposed to be used, I've commented it out:
<style>
/* --tim: force slideshow resize instead of cropping
.slideshow{
height:auto; override the height value from the section.seettings
}
.slideshow__image,
.slideshow__link {
position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
padding-bottom:31.8%; /* here is the aspect ratio of images
}/* --tim: force slideshow resize instead of cropping
.slideshow{
height:auto; /* override the height value from the section.seettings
}
.slideshow__image,
.slideshow__link {
position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
padding-bottom:31.8%; /* here is the aspect ratio of images
}
@media screen and (max-width: 768px){
.index-section.slideshow-section{position: relative;}
.slideshow__mobile-text-container{ position: absolute; top: 10%; font-size: 12px;color: #fff; z-index: 9999; }
.slides__title+.slides__btn { margin-top: 28px; line-height: 20px; min-height: 20px !important; }
}*/
</stlye>
Hi There!
You're missing a "}" at the end of the CSS file, you probably did not close the media query bracket. Go ahead and paste the code here should this not work for you!
I think I deleted more, than I needed, because the code from the link was not wotking for me, and I tried to delete it, and then this happened, In error message it is said, that error is in 8719 line, but I don't have that line...
Add "}" until they don't glow yellow anymore. Let's give it a try here.
Didn't work 😞
Oh not that much, please share your full code here, I'll adjust it for you.
Cheers!
how to share the code?
Copy all the lines of code, then click here:
And paste all your code.
Cheers!
Message cannot exceed 100,000 characters
right: 0;
bottom: 0;
left: 0;
background-color: $color-image-overlay;
opacity: $opacity-image-overlay;
}
.custom-content {
@include display-flexbox;
@include align-items(stretch);
@include flex-wrap(wrap);
width: auto;
margin-bottom: -$grid-gutter;
margin-left: -$grid-gutter;
@include media-query($small) {
margin-bottom: -$grid-gutter-mobile;
margin-left: -$grid-gutter-mobile;
}
}
.custom__item {
@include flex(0 0 auto);
margin-bottom: $grid-gutter;
padding-left: $grid-gutter;
max-width: 100%;
@include media-query($small) {
@include flex(0 0 auto);
padding-left: $grid-gutter-mobile;
margin-bottom: $grid-gutter-mobile;
&.small--one-half {
@include flex(1 0 50%);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}
.collection-grid-item {
margin-bottom: 0;
}
}
.custom__item-inner {
position: relative;
display: block;
text-align: left;
max-width: 100%;
}
.custom__item-inner--video,
.custom__item-inner--collection,
.custom__item-inner--html {
display: block;
}
.custom__item-inner--image {
position: relative;
margin: 0 auto;
}
.custom__image {
width: 100%;
display: block;
position: absolute;
top: 0;
}
/*================ Linklist ================*/
$linklist-spacing: 15px;
$linklist-spacing-small: 12px;
.custom__item.custom__item--link_list {
@include media-query($small) {
// Linklist is 100% width on mobile regardless of width setting
flex: 1 0 100%;
max-width: none;
}
}
.custom__linklist {
margin-left: -$linklist-spacing;
margin-right: -$linklist-spacing;
@include media-query($medium-up) {
margin-left: -$linklist-spacing-small;
margin-right: -$linklist-spacing-small;
}
}
.custom__linklist-link {
display: inline-block;
padding: 10px $linklist-spacing;
margin: 5px 0;
@include media-query($medium-up) {
padding: 3px $linklist-spacing-small;
margin-top: 0;
margin-bottom: 0;
}
}
/*================ Flex item alignment ================*/
.align--top-middle {
text-align: center;
}
.align--top-right {
text-align: right;
}
.align--middle-left {
@include align-self(center);
}
.align--center {
@include align-self(center);
text-align: center;
}
.align--middle-right {
@include align-self(center);
text-align: right;
}
.align--bottom-left {
@include align-self(flex-end);
}
.align--bottom-middle {
@include align-self(flex-end);
text-align: center;
}
.align--bottom-right {
@include align-self(flex-end);
text-align: right;
}
.newsletter-section {
padding-top: $section-spacing;
}
.index-section--newsletter-background {
background-color: $color-bg-alt;
}
.rich-text__heading--large {
font-size: 1.4em; //24px default
}
.rich-text__heading--small {
font-size: 0.88em; //16px default
}
.rich-text__text--large {
font-size: em(floor($font-size-base * 1.15));
}
.rich-text__text--small {
font-size: em(floor($font-size-base * 0.88));
}
.product-card {
position: relative;
&:hover,
&:focus-within {
.product-card__image-wrapper {
opacity: 0.8;
}
.product-card__title {
border-bottom-color: $color-text;
}
}
}
.product-card__image-with-placeholder-wrapper {
position: relative;
}
.product-card__title {
border-bottom: 1px solid transparent;
display: inline;
font-family: $font-stack-header;
font-style: $font-style-header;
font-weight: $font-weight-header;
}
$video-height-small: 475px;
$video-height-medium: 650px;
$video-height-large: 775px;
$z-index-video-image: 1;
$z-index-video: 2;
$z-index-video-text: 3;
$z-index-video-controls: 4;
$z-index-video-loader: 5;
$video-button-wrapper-size: 50px;
$video-pause-button-size: 34px;
$video-close-button-size: 30px;
$video-loader-size: 2.875rem;
$color-video-controls: #fff;
$color-video-controls-background: #000;
$ease-transition: cubic-bezier(0.44, 0.13, 0.48, 0.87);
$transition-controls-video: color 0.2s $ease-transition, background-color 0.2s $ease-transition;
[data-section-type="video-section"] {
margin: 0 auto;
@include media-query($small) {
transition: width 0.6s $ease-transition, height 0.6s $ease-transition, padding 0.6s $ease-transition;
}
}
.video-section-wrapper {
position: relative;
display: flex;
@include align-items(center);
@include justify-content(center);
width: 100%;
height: 100%;
@include media-query($medium-up) {
overflow: hidden;
}
@include media-query($small) {
overflow: visible !important;
&.video-is-playing {
margin: 0;
}
&.video-is-loaded {
transition: margin 0.6s $ease-transition;
}
}
}
.video-section-wrapper--small.video-section-wrapper--min-height {
min-height: $video-height-small - 300;
@include media-query($medium-up) {
min-height: $video-height-small;
}
}
.video-section-wrapper--medium.video-section-wrapper--min-height {
min-height: $video-height-medium - 380;
@include media-query($medium-up) {
min-height: $video-height-medium;
}
}
.video-section-wrapper--large.video-section-wrapper--min-height {
min-height: $video-height-large - 400;
@include media-query($medium-up) {
min-height: $video-height-large;
}
}
.video-background-wrapper--no-overlay {
background-color: rgba($color-image-overlay, 0.2);
}
/*================ Video text ================*/
.video__text-content {
text-align: center;
position: relative;
width: 100%;
top: 20px;
opacity: 1;
transition: all 0.6s $ease-transition;
transition-delay: 0.3s;
z-index: $z-index-video-text;
padding: 40px 0;
.video-is-playing & {
display: none;
}
.video-is-loaded &,
.no-js & {
@include transform(translateY(-20px));
}
.video-is-loaded &,
.no-js & {
&::after {
opacity: 0;
visibility: hidden;
content: none;
}
}
}
.video__title {
color: $color-overlay-title-text;
.video-is-paused & {
display: none;
}
}
/*================ Video styles ================*/
.video {
display: none;
position: absolute;
left: 0;
top: 0;
z-index: $z-index-video;
}
.video--background {
position: absolute;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in;
}
.autoplay .video-is-loaded .video--background {
display: block;
visibility: visible;
opacity: 1;
}
.video--image_with_play {
display: none;
opacity: 0;
visibility: none;
width: 100%;
height: 100%;
transition: all 0.2s ease-in;
.video-is-playing &,
.video-is-paused & {
display: block;
visibility: visible;
opacity: 1;
}
}
/*================ Video control buttons ================*/
.video-control {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
z-index: $z-index-video-controls;
transition: all 0.1s ease-out;
}
.video-control__play-wrapper {
display: none;
height: $video-button-wrapper-size;
@include media-query($medium-up) {
display: block;
}
}
.video-control__play-wrapper-mobile {
display: block;
height: $video-button-wrapper-size;
position: absolute;
top: calc(100% - 50px / 2);
left: calc(50% - 50px / 2);
@include media-query($medium-up) {
display: none;
}
}
.video-control__play-wrapper--with-text {
margin-top: $grid-gutter;
}
.video-control__play {
display: flex;
justify-content: center;
visibility: visible;
opacity: 1;
width: $video-button-wrapper-size;
height: $video-button-wrapper-size;
border-radius: $video-button-wrapper-size / 2;
position: relative;
margin: 0 auto;
padding: 5px;
pointer-events: none;
.video-background-wrapper & {
top: 50%;
@include transform(translateY(-50%));
}
.icon {
opacity: 0.5;
}
.video-is-loaded & {
pointer-events: auto;
.icon {
opacity: 1;
}
}
.video-is-playing & {
display: none;
visibility: hidden;
opacity: 0;
}
}
// Video loader shown when initializing
.video-control__play::before {
content: '';
display: block;
width: $video-loader-size;
height: $video-loader-size;
position: absolute;
margin-left: - $video-loader-size / 2;
border-radius: 50%;
border: 2px solid white;
border-top-color: transparent;
@include animation(spin 0.65s infinite linear);
transition: all 0.1s ease-out 0.5s;
z-index: $z-index-video-loader;
top: 1px;
left: 50%;
opacity: 0.5;
.video-is-loaded &,
.video-is-playing &,
.video-is-paused & {
content: none;
display: none;
}
}
.video-control__close-wrapper {
display: none;
width: $video-button-wrapper-size;
height: $video-button-wrapper-size;
position: absolute;
top: 0;
right: 0;
outline: none;
z-index: 3;
.video-is-playing &,
.video-is-paused & {
display: block;
}
}
.video-control__close {
position: relative;
width: $video-close-button-size;
height: $video-close-button-size;
margin: 0 auto;
font-size: 14px;
line-height: 27px;
border-radius: $video-close-button-size / 2;
background-color: $color-video-controls;
color: $color-video-controls-background;
.video-control__close-wrapper:hover &,
.video-control__close-wrapper:focus & {
outline: auto 5px -webkit-focus-ring-color;
opacity: 0.7;
}
.video-is-playing &,
.video-is-paused & {
display: inline-block;
visibility: visible;
opacity: 1;
}
.icon {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 auto;
}
}
.video__pause {
position: absolute;
top: 0;
right: 0;
z-index: $z-index-video-text;
width: $video-button-wrapper-size;
height: $video-button-wrapper-size;
padding: 0;
border: none;
background-color: transparent;
transition: $transition-controls-video;
@include media-query($small) {
display: none;
}
.video-is-playing & {
display: none;
}
.icon {
position: relative;
color: rgba($color-video-controls, 0.5);
transition: $transition-controls-video;
}
&:hover,
&:focus {
outline: none;
.icon {
color: $color-video-controls;
}
}
.icon-pause {
width: 12px;
height: 12px;
top: 11px;
}
.icon-play {
width: 16px;
height: 16px;
top: 9px;
}
}
.video__pause-resume,
.video__pause-stop {
height: $video-pause-button-size;
width: $video-pause-button-size;
margin: 0 auto;
justify-content: center;
background-color: rgba($color-video-controls-background, 0.4);
.video__pause:hover &,
.video__pause:focus & {
background-color: rgba($color-video-controls-background, 0.75);
}
.video__pause:focus & {
outline: auto 5px -webkit-focus-ring-color;
}
}
.video__pause-stop {
display: flex;
.is-paused & {
display: none;
}
}
.video__pause-resume {
display: none;
.is-paused & {
display: flex;
}
}
/*================ Overlay ================*/
.video__overlay {
@include overlay(3);
}
.video-is-playing .video__overlay {
opacity: 0;
&:before {
content: none;
}
}
/*================ Fallback images ================*/
.video__image {
transition: opacity 0.8s $ease-transition;
position: absolute;
top: 0;
left: 0;
opacity: 1;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: $z-index-video-image;
.video-background-wrapper & {
@include media-query($medium-up) {
opacity: 0;
}
}
.no-autoplay & {
opacity: 1;
}
}
.product-recommendations__inner {
padding: $section-spacing-small 0;
@include media-query($medium-up) {
padding: $section-spacing 0;
}
}
$max-height-disclosure: 300px;
$min-height-disclosure: 92px;
.disclosure {
position: relative;
}
.disclosure__toggle {
@extend select;
white-space: nowrap;
}
.disclosure-list {
background-color: $color-text-field;
border: 1px solid $color-border-form;
bottom: 115%;
padding: 11px 0px;
position: absolute;
display: none;
min-height: $min-height-disclosure;
max-height: $max-height-disclosure;
overflow-y: auto;
border-radius: $border-radius;
}
.disclosure-list--visible {
display: block;
}
.disclosure-list__item {
border-bottom: 1px solid transparent;
white-space: nowrap;
padding: 5px 45px 4px 15px;
text-align: left;
&:active {
background-color: transparentize($color-btn-primary, 0.8);
}
}
.disclosure-list__option {
color: $color-text-field-text;
&:focus,
&:hover {
// !important needed to override link styles
color: $color-text-field-text !important;
border-bottom: 1px solid $color-text-field-text;
}
}
.disclosure-list__item--current .disclosure-list__option {
border-bottom: 1px solid $color-text-field-text;
}
/*================ Selectors ================*/
.selectors-form {
@include display-flexbox();
@include justify-content(center);
@include flex-wrap(wrap);
margin-bottom: $footer-spacing-small;
@include media-query($medium-up) {
@include justify-content(flex-start);
@include flex-wrap(nowrap);
}
}
.selectors-form__item {
padding-bottom: $footer-spacing-small;
margin: 0 $footer-spacing-extra-small;
@include media-query($medium-up) {
padding-bottom: 0;
&:first-of-type {
margin-left: 0;
}
@media screen and (max-width: 749px) {
.index-section.slideshow-section {
display: flex;
flex-direction: column;
}
#flexslider--slider {
order: 2;
}
.slider__controls-container {
order: 3;
}
.slideshow__mobile-text-container {
order: 1;
I added the lines from 8000 till 8713, I removed something from the end of the code I think, also I tried to do something on the theme liquid too, so I'm adding the code from there also
<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_button }}">
<link rel="canonical" href="{{ canonical_url }}">
{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}
{%- capture seo_title -%}
{%- if request.page_type == 'search' and search.performed == true -%}
{{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
{%- else -%}
{{ page_title }}
{%- endif -%}
{%- if current_tags -%}
{%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}
<title>{{ seo_title | strip }}</title>
{%- if page_description -%}
<meta name="description" content="{{ page_description | escape }}">
{%- endif -%}
{% include 'social-meta-tags' %}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
<script>
var theme = {
breakpoints: {
medium: 750,
large: 990,
widescreen: 1400
},
strings: {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
regularPrice: {{ 'products.product.regular_price' | t | json }},
salePrice: {{ 'products.product.sale_price' | t | json }},
sale: {{ 'products.product.on_sale' | t | json }},
fromLowestPrice: {{ 'products.product.from_lowest_price_html' | t: lowest_price: '[price]' | json }},
vendor: {{'products.product.vendor' | t | json }},
showMore: {{ 'general.filters.show_more' | t | json }},
showLess: {{ 'general.filters.show_less' | t | json }},
searchFor: {{ 'general.search.search_for' | t | json }},
addressError: {{ 'sections.map.address_error' | t | json }},
addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
authError: {{ 'sections.map.auth_error_html' | t | json }},
newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
external: {{ 'general.accessibility.link_messages.external' | t | json }},
newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
update: {{ 'cart.label.update' | t | json }},
quantity: {{ 'cart.label.quantity' | t | json }},
discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
regularTotal: {{ 'cart.label.regular_total' | t | json }},
priceColumn: {{ 'cart.label.price_column' | t | json }},
quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
cartError: {{ 'cart.general.cart_error' | t | json }},
removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }},
products: {{ 'general.search.products' | t | json }},
loading: {{ 'general.search.loading' | t | json }},
number_of_results: {{ 'general.search.number_of_results' | t: result_number: '[result_number]', results_count: '[results_count]' | json }},
number_of_results_found: {{ 'general.search.number_of_results_found' | t: results_count: '[results_count]' | json }},
one_result_found: {{ 'general.search.one_result_found' | t | json }}
},
moneyFormat: {{ shop.money_format | json }},
moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }},
settings: {
predictiveSearchEnabled: {{ settings.predictive_search_enabled | json }},
predictiveSearchShowPrice: {{ settings.predictive_search_show_price | json }},
predictiveSearchShowVendor: {{ settings.predictive_search_show_vendor | json }}
}
}
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
{%- if request.page_type contains 'customers/' -%}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{%- endif -%}
<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
{{ content_for_header }}
</head>
<body class="template-{{ request.page_type | handle }}">
<a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>
{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}
{% section 'header' %}
<div class="page-container drawer-page-content" id="PageContainer">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<div id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'sections.slideshow.navigation_instructions' | t -}}
</div>
</div>
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
</ul>
</body>
</html>
/* --tim: force slideshow resize instead of cropping */
.slideshow{
height:auto; /* override the height value from the section.seettings */
}
.slideshow__image,
.slideshow__link {
position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
padding-bottom:31.8%; /* here is the aspect ratio of images */
}/* --tim: force slideshow resize instead of cropping */
.slideshow{
height:auto; /* override the height value from the section.seettings */
}
.slideshow__image,
.slideshow__link {
position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
padding-bottom:31.8%; /* here is the aspect ratio of images */
}@media screen and (max-width: 768px){
.index-section.slideshow-section{position: relative;}
.slideshow__mobile-text-container{ position: absolute; top: 10%; font-size: 12px;color: #fff; z-index: 9999; }
.slides__title+.slides__btn { margin-top: 28px; line-height: 20px; min-height: 20px !important; }
}
}
Indeed should have thought about the limit. Would you mind sharing your store's URL? I will request collaborator access and fix that for you on the spot.
thank you, www.glamuras.shop, could you also fix the slide show mobile version(i want slide show to look exact as desktop version, text on the photo and a button, not bellow), because I'm afraid that I can make mistake again 😞
Fixed the CSS for you, website is back to normal. As for the slideshow modification I did what I could within the time I can spare, let me know!
Thank you so much, you are the best, but now at the end of the page there are weird text lines.
Fixed, something was messed up in liquid.theme. All Good Then 🙂 Please mark the answers as solved so we can help the community know your errors have been addressed.
Cheers!
Thank you text lines are gone, but now button from the slideshow is missing 😞
same in desktop
This is an accepted solution.
Solved, this code was not supposed to be used, I've commented it out:
<style>
/* --tim: force slideshow resize instead of cropping
.slideshow{
height:auto; override the height value from the section.seettings
}
.slideshow__image,
.slideshow__link {
position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
padding-bottom:31.8%; /* here is the aspect ratio of images
}/* --tim: force slideshow resize instead of cropping
.slideshow{
height:auto; /* override the height value from the section.seettings
}
.slideshow__image,
.slideshow__link {
position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
padding-bottom:31.8%; /* here is the aspect ratio of images
}
@media screen and (max-width: 768px){
.index-section.slideshow-section{position: relative;}
.slideshow__mobile-text-container{ position: absolute; top: 10%; font-size: 12px;color: #fff; z-index: 9999; }
.slides__title+.slides__btn { margin-top: 28px; line-height: 20px; min-height: 20px !important; }
}*/
</stlye>
Does anybody know where to put this code on the Debut theme.css? It is supposed to stop my lootly icon from being pushed to the bottom of the page. Not sure if it matters where on the page I put this code. I would appreciate any help please. Thank you.
#PageContainer { transform: none !important; }
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