FROM CACHE - en_header

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

Solved
bytelink
Tourist
7 0 1

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.

 

 

 

Accepted Solution (1)

Accepted Solutions
LitCommerce
Astronaut
2083 489 474

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

Replies 8 (8)
LitCommerce
Astronaut
2083 489 474

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!
bytelink
Tourist
7 0 1
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.
LitCommerce
Astronaut
2083 489 474

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!
bytelink
Tourist
7 0 1
Thank you for the recommendation however I am still getting the same result
LitCommerce
Astronaut
2083 489 474

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!
bytelink
Tourist
7 0 1
Sorry I did not see this come In. The site is https://herbstreet.myshopify.com/ and the password herbstreet2021
Ian
LitCommerce
Astronaut
2083 489 474

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!
bytelink
Tourist
7 0 1

Thankyou.  Yes that was the problem.