All things Shopify and commerce
I have set up the slide show with 3 slides and text over them. I want it to be the same text and not change. Is there a way to lock the text so it doesn't fade on / off with the change of the images?
Funny enough I am having almost the opposite problem. I added sub heading text but it wont change between slides. I'm not exactly sure on the debut theme but on the Venture theme it is on the code under sections.slideshow.liquid. in the file there is a line of code that says <div class="hero-content__title-wrapper">Which calls TO the theme.js file. If you put a number after the title like <div class="hero-content__title1-wrapper"> it has breaks the call to on the js to make it move so it stays stationary. Hopefully someone on your theme has more insight.
I got it working by excluding some parts of the code as comments with /* */.
Search for "Slide text" in your theme.css and comment out the parts as I did.
/*================ Slide text ================*/
.slideshow__text-wrap {
height: 100%;
position: relative; }
.slideshow__link .slideshow__text-wrap {
cursor: inherit; }
.slideshow__text-wrap--mobile {
display: none; }
@media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {
display: block;
position: relative;
top: -1.1rem;
background-color: var(--color-bg);
width: 85%;
margin: 0 0 -1.1rem 7.5%;
z-index: 8; } }
/*@media only screen and (min-width: 750px) {
.slideshow__text-content {
opacity: 0;
transition: 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
transition-delay: 0.3s; } }*/
.slideshow__text-wrap--desktop .slideshow__text-content {
position: absolute;
width: 100%;
top: 50%;
z-index: 2; }
/*@media only screen and (min-width: 750px) {
.slideshow__text-content.slideshow__text-content--vertical-top {
top: 120px; }
.slideshow__text-content.slideshow__text-content--vertical-bottom {
top: auto;
bottom: 40px; } }
.slideshow__slide--active .slideshow__text-content,
.no-js .slideshow__text-content {
-ms-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
opacity: 1; }
.slideshow__slide--active .slideshow__text-content.slideshow__text-content--vertical-center,
.no-js .slideshow__text-content.slideshow__text-content--vertical-center {
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.no-js .slideshow__text-content::after {
opacity: 0;
visibility: hidden;
content: none; }*/
.slideshow__text-content--mobile {
display: none;
padding-top: 2.6rem; }
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 1.7rem; }
@media only screen and (min-width: 750px) {
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 0; } }
@media only screen and (min-width: 750px) {
.slideshow__text-content--mobile {
padding-top: 0; }
.slideshow__text-content--mobile::after {
display: none; } }
.slideshow__text-content--mobile-active {
display: block; }
.slideshow__title,
.slideshow__subtitle {
color: var(--color-overlay-title-text); }
@media only screen and (max-width: 749px) {
.slideshow__title,
.slideshow__subtitle {
display: none; } }
.slideshow__title--mobile {
margin-bottom: 0; }
.slideshow__title--mobile ~ .slideshow__subtitle--mobile {
margin-top: 0.5rem; }
.slideshow__subtitle--mobile,
.slideshow__title--mobile {
display: none;
color: var(--color-text); }
@media only screen and (max-width: 749px) {
.slideshow__subtitle--mobile,
.slideshow__title--mobile {
display: block; } }
.slideshow__btn-wrapper {
border: none;
background-color: transparent; }
/*@media only screen and (min-width: 750px) {
.slideshow__btn-wrapper--push {
margin-top: 30px; } }
.slideshow__btn {
max-width: 100%;
display: inline-block;
word-wrap: break-word;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
min-height: 3.125rem;
line-height: 2.2; }
@media only screen and (max-width: 749px) {
.slideshow__btn {
display: none; } }
.slideshow__btn--mobile {
display: none;
margin: 1.3rem auto 0; }
@media only screen and (max-width: 749px) {
.slideshow__btn--mobile {
display: inline-block;
margin: 2rem auto 0.3rem; } }*/
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023