FROM CACHE - en_header

CSS Not being applied for a class on one particular page Showcase theme.

Solved
bytelink
Tourist
8 0 1
‎05-17-2022 02:19 PM

I have finally got the home page the way we want just waiting on the graphics for the banners etc but I had to change the CSS for the featured collection slider so that it was not as high as the default and also reduce the size of the images which I did this by adding the following to the end of the css.

 

/*** Featured Product Slider */
@media (min-width: 768px){
.product-slider .swiper-container .swiper-wrapper {
margin-top: 20px;
}
}
.product-slider .swiper-container {
overflow: visible
}
.product-slider .product-list {
padding-bottom: 30px;
margin-left: 8px !important;
margin-right: 8px !important;
height: 330px;
}
/*** Featured Product Slider Image Width */
.swiper-slide {
width: 16% !important;
}

 

However I did not realize that I had also changed the size of the images in the collage on the product page so that they also are 16% of the width.  So I then tried to apply the css to the home page only. To do this I first added <body id="{{ page_title | handle }}" > to the <body> tag in the theme.liquid file so I ended up with the following

 

<body id="{{ page_title | handle }}" class="page-{{ page_title | handle }} {% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% if template.suffix != blank %} template-suffix-{{ template.suffix }}{% endif %}{% if template contains 'customers' %} template-customer-area{% endif %}{% if logo_html contains 'img' %} has-logo{% endif %} animation-speed-{{ settings.animation_speed }}"
{% if settings.animation_speed == "fast" %}data-cc-animate-timeout="0"{% endif %}>

 

replacing

 

<body class="page-{{ page_title | handle }} {% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% if template.suffix != blank %} template-suffix-{{ template.suffix }}{% endif %}{% if template contains 'customers' %} template-customer-area{% endif %}{% if logo_html contains 'img' %} has-logo{% endif %} animation-speed-{{ settings.animation_speed }}"
{% if settings.animation_speed == "fast" %}data-cc-animate-timeout="0"{% endif %}>

 

This gave me the id of "herb-street" and the class of "page-herb-street" so I then added the following section to the CSS commenting out the appropriate section added above.

 

#herb-street.page-herb-street {
.swiper-slide {
width: 16% !important;
}
}

 

However it did not apply the CSS to the homepage and the product images were back to the original size however the product pages because it did not get applied were back as we wanted.

I got the error as shown in the attached snippet where the code had the caution flag and a line through the code and I cannot work out how to fix this.

 

 

 

295 Views
0 Likes
Report
Accepted Solution (1)
In response to bytelink
LitCommerce
Astronaut
2860 684 679
‎05-26-2022 05:01 AM

This is an accepted solution.

Hi @bytelink,

I checked and you still have this code:

Screenshot.png

you just need to remove it, everything will work fine.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

240 Views
0 Likes
Report
Replies 8 (8)
LitCommerce
Astronaut
2860 684 679
‎05-19-2022 06:17 AM

Hi @bytelink,

Please change code:

#herb-street.page-herb-street {
.swiper-slide {
width: 16% !important;
}
}

=>

.product-slider .swiper-slide {
  width: 16% !important;
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
266 Views
0 Likes
Report
In response to LitCommerce
bytelink
Tourist
8 0 1
‎05-19-2022 10:14 AM
Thank you for your suggestion but I still have the same problem.
The 16% is applied to the product page collage as well as the featured collection slider on the product page.
Please see the attached pictures.
265 Views
0 Likes
Report
In response to bytelink
LitCommerce
Astronaut
2860 684 679
‎05-19-2022 11:13 AM

Hi @bytelink,

Please change code:

body:not(.template-product) .product-slider .swiper-slide {
  width: 16% !important;
}

It will help you to remove the page product from the code.

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
262 Views
0 Likes
Report
In response to LitCommerce
bytelink
Tourist
8 0 1
‎05-20-2022 01:05 PM
Thank you for the recommendation however I am still getting the same result
253 Views
0 Likes
Report
In response to bytelink
LitCommerce
Astronaut
2860 684 679
‎05-21-2022 02:17 AM

Hi @bytelink,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
250 Views
0 Likes
Report
In response to LitCommerce
bytelink
Tourist
8 0 1
‎05-25-2022 12:16 PM
Sorry I did not see this come In. The site is https://herbstreet.myshopify.com/ and the password herbstreet2021
Ian
246 Views
0 Likes
Report
In response to bytelink
LitCommerce
Astronaut
2860 684 679
‎05-26-2022 05:01 AM

This is an accepted solution.

Hi @bytelink,

I checked and you still have this code:

Screenshot.png

you just need to remove it, everything will work fine.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
241 Views
0 Likes
Report
In response to LitCommerce
bytelink
Tourist
8 0 1
‎05-26-2022 08:41 PM

Thankyou.  Yes that was the problem.

233 Views
Report

Community Blog Articles

Skye_0-1685651890195.png
Creating a Shopify Store: The Importance Of Choosing The Right Theme

As a business owner, have you ever wondered when your customer's first impression of yo...

By Skye Jun 6, 2023
31-54-5hg9c-2x272
Community Update! Threading Improvements

We're excited to announce improvements to the threaded messaging experience in our communi...

By TyW May 31, 2023
crowd-participating-at-event.jpg
We Answered Your Questions to Help You Get the Most Out of Your Shopify <> ...

Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...

By Jacqui May 30, 2023
Terms of Service Privacy Policy