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.

 

 

 

407 Views
0 Likes
Report
Accepted Solution (1)
In response to bytelink
LitCommerce
Astronaut
2860 684 704
‎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

352 Views
0 Likes
Report
Replies 8 (8)
LitCommerce
Astronaut
2860 684 704
‎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!
378 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.
377 Views
0 Likes
Report
In response to bytelink
LitCommerce
Astronaut
2860 684 704
‎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!
374 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
365 Views
0 Likes
Report
In response to bytelink
LitCommerce
Astronaut
2860 684 704
‎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!
362 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
358 Views
0 Likes
Report
In response to bytelink
LitCommerce
Astronaut
2860 684 704
‎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!
353 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.

345 Views
Report
Community Browser

Community Blog Articles

cropped-shutterstock_1498591895.webp
The 30-30-30 Rule: A Balanced Approach to Social Media for Startups

Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...

By Trevor Sep 20, 2023
cropped-shutterstock_1913321758.webp
How To Gain Customer Trust With Your Store’s Footer

Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...

By Skye Sep 15, 2023
shutterstock_2183225521_16x9.png
Who Are Shopify Partners?

In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...

By Imogen Sep 13, 2023
Terms of Service Privacy Policy