cro0w

3 hours ago, moonlitdesign said:

thank you, yeah i know gutted, but hopefully can utilise on as many client projects as possible hahah. thank you for the code, i'm still not quite getting the effect i want even with trying to modify it. it's annoying because i've seen it done on other sites: www.lowtide.co for example. but her logo stays the same, where as i want to change mine. will keep trying to work on it!

Definitely try ChatGTP to get the right code, it does wonders if you give it all the information. I have gotten my sites to look how I want without relying on a programmer AND I've increased my skills in coding cus ChatGTP is fast and nice in explaining things. 

79$ for a bit of code! Yikes!

Try this:

/* Shrinking Logo On Scroll - 7.1 */
.header.shrink img {
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

.header img {
    transition: all 0.2s ease-in-out;
}

/* Second logo styling */
.second-logo {
    display: none; /* Initially hide the second logo */
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

/* Show second logo on scroll and align left */
body:not(.homepage) .second-logo {
    display: block;
    float: left; /* Align left */
}

/* Trigger effect at the start of the second page section */
body:not(.homepage) .header.shrink .second-logo {
    opacity: 1; /* Adjust opacity or other styles as needed */
}

PRO Tip: Use ChatGTP to 1 work out the quirks.

Hope it helps. Stay creative!

I fixed it by adding 

width: 101%

Once again this forum proves to no be super helpful for me, I've posted many times I never get help and come back to figure it out. For those of you with the same problem that Squarespaces causes when using YouTube Embeds on their site, specifically with loading them on the video library for Squarespace 7.1.

I assume they do this cus they want you to upload your own videos and then have to pay them more, ridiculous! 

Here's all the codes to fix what I needed from my original post. You can clean up anything else. 

/* Recommended Thumbnails */
.lessons-item-related-wrapper .lessons-item-related-item-list .related-item .related-item-link-thumbnail {
    height: auto;
}

.lessons-item-related-wrapper .lessons-item-related-item-list .related-item img.related-item-thumbnail {
    border-radius: 15px;  
    aspect-ratio: 16/9 !important;
}

/* Hover mode */
.lesson-item .related-item {
    transition: transform 0.3s ease-out; /* Initial transition for smoother return */
}

.lesson-item .related-item:hover {
    transform: translateY(-10px);
    transition: transform 0.3s ease-in-out; /* Transition on hover with ease-in-out for smooth effect */
}


/* Summary Thumbnails */
.sqs-block-summary-v2 .summary-thumbnail-container img.loaded {
    border-radius: 15px;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Video Library Thumbnails */
.lessons.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 56.25%;
}

.grid-image {
    border-radius: 15px;
}

I hope this helps someone else get rid of the black bars on YouTube thumbnails. 

Can you help me with a similar problem but different class? 

"you try checking video to see if any settings to set custom thumbnail?" what does that mean? 

Can you help me? I have the same problem I made a new post with more detail:

Hello,

When taking advantage of summary blocks, related videos, and video library features, there's a big and sad bug that Squarespace doesn't seem interested in fixing. Let's start with the video library.

https://vivsharon.squarespace.com/video-testimonials
PW: 123

1. If you choose to take advantage of this feature, if you plan on embedding YouTube videos, be ready to hate your life. This will be the result, and no, you can't have custom thumbnails, on embeds, why? IDFK either?!

Solution? Code. Not sure how to give them rounded corners.

// Video Page Thumbnails
.lessons.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 56.25%;
}

but it doesn't stop there. Let's move on to Summary blocks (Carousel). You guessed it right! Broken.

2. How can we resolve this situation? Not sure, I was able to give them a rounded borders tho. 

// Summary Block Thumbnails
.summary-thumbnail-image {
    border-radius: 15px;
 	overflow: hidden;
}

3. Next problem, related videos, and yes, you guessed it right, broken. 

Not sure, but we gave them also rounded corners. 

// Recommended Thumbnails
.lessons-item-related-wrapper .lessons-item-related-item-list .related-item img.related-item-thumbnail {
    border-radius: 15px;
}

Does anyone know how to solve this issue with the letterbox on videos being recommended or pulled through summary blocks? 

I ended up figuring out a method to get a button to to what I want. Felt kind of dumb once I came up with the solution. 

To be able to get a semi-custom experience when creating digital products  pages and working on the blocks themselves, I found Squarespace's blocks to restrictive so making them from scratch made sense. 

Then I added a code block made my button, inspected my own website and copy pasted my own instructions.

The button has the same functionally tied to the membership/digital products.

<button class="sqs-editable-button join-button sqs-button-element--primary " onclick="UserAccountApi.joinPricingPlan('9cb84188-461b-4602-97a5-42c879f31a37', '9ddb2a9a-9db9-4472-8c0a-f683e030d0c4', '', false, 'MEMBER_AREA_BLOCK', {&quot;pricingPlanId&quot;:&quot;9cb84188-461b-4602-97a5-42c879f31a37&quot;,&quot;alignment&quot;:&quot;left&quot;,&quot;showTitle&quot;:true,&quot;showDescription&quot;:true,&quot;showPrice&quot;:true,&quot;showJoinButton&quot;:true,&quot;showBenefits&quot;:true,&quot;joinButtonText&quot;:&quot;Sign up&quot;,&quot;title&quot;:&quot;Premium Members&quot;,&quot;description&quot;:&quot;Grab your apron and join Linda LIVE every third Sunday of the month at 7:30 pm EST.&quot;,&quot;benefits&quot;:[{&quot;description&quot;:&quot;12 online cooking classes with Linda&quot;},{&quot;description&quot;:&quot;Over 13 hours of video content&quot;},{&quot;description&quot;:&quot;Watch on your computer, phone or TV&quot;},{&quot;description&quot;:&quot;PDF download of all recipes. &quot;},{&quot;description&quot;:&quot;Newsletter with tips, tricks and recipes&quot;}],&quot;pricingOptions&quot;:[{&quot;id&quot;:&quot;9ddb2a9a-9db9-4472-8c0a-f683e030d0c4&quot;,&quot;price&quot;:{&quot;currency&quot;:&quot;CAD&quot;,&quot;value&quot;:&quot;107.00&quot;},&quot;billingPeriod&quot;:{&quot;value&quot;:12,&quot;unit&quot;:&quot;MONTH&quot;},&quot;numBillingCycles&quot;:0}],&quot;pricingType&quot;:&quot;RECURRING&quot;,&quot;isPaywall&quot;:true,&quot;firstPricingOptionId&quot;:&quot;9ddb2a9a-9db9-4472-8c0a-f683e030d0c4&quot;,&quot;firstPricingOptionPriceAmount&quot;:&quot;$107.00&quot;,&quot;firstPricingOptionPriceBillingPeriod&quot;:&quot;Every year&quot;,&quot;hasMultiplePricingOptions&quot;:false,&quot;blockId&quot;:&quot;59e2abecd70b84061f5b&quot;,&quot;estimatedDimensions&quot;:{&quot;estimatedColumnSpanDesktop&quot;:7,&quot;sectionColumnsDesktop&quot;:24,&quot;estimatedColumnSpanMobile&quot;:8,&quot;sectionColumnsMobile&quot;:8},&quot;localizedStrings&quot;:{&quot;pricingOptionToggleMonthly&quot;:{&quot;one&quot;:&quot;Monthly&quot;,&quot;other&quot;:&quot;{0} Months&quot;},&quot;paywallPriceFiniteMonthly&quot;:{&quot;other&quot;:&quot;For {0} months&quot;},&quot;paywallPriceMonthly&quot;:{&quot;one&quot;:&quot;Every month&quot;,&quot;other&quot;:&quot;Every {0} months&quot;},&quot;pricingOptionToggleWeekly&quot;:{&quot;other&quot;:&quot;{0} Weeks&quot;,&quot;one&quot;:&quot;Weekly&quot;},&quot;pricingOptionToggleYearly&quot;:{&quot;one&quot;:&quot;Yearly&quot;},&quot;paywallPriceFiniteWeekly&quot;:{&quot;other&quot;:&quot;For {0} weeks&quot;},&quot;paywallPriceOTP&quot;:&quot;One time&quot;,&quot;joinButtonLabel&quot;:&quot;Join&quot;,&quot;pricingOptionToggleInstallments&quot;:{&quot;other&quot;:&quot;{0} Payments&quot;},&quot;pricingOptionToggleOneTimePayment&quot;:&quot;1 Payment&quot;,&quot;paywallPriceWeekly&quot;:{&quot;one&quot;:&quot;Every week&quot;,&quot;other&quot;:&quot;Every {0} weeks&quot;},&quot;zeroPriceLabel&quot;:&quot;Free&quot;,&quot;paywallPriceYearly&quot;:{&quot;one&quot;:&quot;Every year&quot;}},&quot;featureFlags&quot;:{&quot;useCLDRMoneyFormat&quot;:true}})" data-test="pricing-plan-block-join" id="yui_3_17_2_1_1696276073968_301" tabindex="0">
        <div class="sqs-add-to-cart-button-inner" id="yui_3_17_2_1_1696276073968_311">
          
            Sign Up Now
          
        </div>
      </button>

Obviously, don't use mine, make sure to inspect your own site to get the right ID.

Hope this helps someone!

Cheers,

Hello,

I'm wondering if the the following is possible:

1. I was working on a implementing digital products to be able to sell a Basic and a Premium Membership. When creating the products you can basically very restrictively "design" what it looks like. However you can't change the way the pricing is shown.
 

What we want is basically to be able to have Premium Members pay an annual subscription, but we want the pricing to show as $8.99 per month VS $107 every year. 

Since this is calling information for the sever, I'm assuming you can just change the works with CSS. Is there a work around?

2. Our workaround was to recreate the pricing table using regular block elements and then just link the button to the User Creating + Premium Member sign up. 

Question is, how do we link the buttons so that they behave like the digital products do and pop up the right window for the users?

Thank you in advance for any wisdom anyone can share. Cheers!

If you'd like to access the testing page go to: https://www.livelitebylinda.com/membership PW: 123

Why are people gate keeping something so simple? Tumblr has been doing this forever. What's going on Squarespace come oooooooooon.

On 5/6/2023 at 12:24 AM, tuanphan said:

Add this code under. If it doesn't work, please share site url, we can help easier

@media screen and (max-width:991px) {
	header#header img {
		visibility: hidden;
}
}

 

Would love your thoughts. 

Thank you so much for sharing some knowledge. @tuanphan

I tried using this:

// LOGO IMAGE AND TEXT //

.header-title-logo a {
  position: relative;
  display: inline-block;
}

.header-title-logo a::after {
  content: "Live Lite by Linda";
  font-size: 26px;
  font-family: "Poppins", sans-serif;
  color: inherit;
  text-align: center;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-weight: 500;
  margin-left: 15px;
}

.header-title-logo img {
  vertical-align: middle;
}

But I have two problems I'm hoping someone can help me figure out. 

1. The text used to change dynamically. Now it doesn't. Some of my pages have dark images in the top sections. Since my Nav is transparent, how can I get around this?
2. On my mobile version the text has disappeared, is there away to get it back and make it fit?
3. I do have both site-title, header-logo and mobile-logo plugged in the back.

Screenshots and link for reference below. Thank you in advance. 

https://livelitebylinda.squarespace.com/
PW: lite

Thank you @paul2009 you confirmed my suspicions.

My head was starting to hurt. I appreciate you taking the time. I would like to know more about the workaround. 

1. How would I duplicate the metadata in a product tag and
2. then pull the variant price from there?
3. Assuming I can use the same method I used to parse information what is my code missing?

I know that it might be tedious but I'm willing to try it. 

As an alternative, is it possible to just inject code to, hide the from price, and then manually write for each one. I know that would be cumbersome, but I could make it work. 

What would you recommend?

@paul2009 @creedon

Hello, 

I'm hoping someone can guide me through. I've been reading multiple threads now and I can't seem to find anyone nailing down a solution. Here's the status.
 

1. I have 7.1 and Business Plan. 
2. We loaded 4 price variants.
3. I wanted to show a range of prices from low to highest on the PLP, instead of only showing "from cheapest variant".
4. I used this code on the header:
    

   <script>
       /* This is the code overides prices variants in product pages */
   document.addEventListener("DOMContentLoaded", function() {
     var productVariants = document.querySelectorAll(".product-variants")[0].dataset.variants;
     productVariants = JSON.parse(productVariants);
     var lowestPrice = Infinity;
     var highestPrice = 0;
     for (var i = 0; i < productVariants.length; i++) {
       var variantPrice = parseFloat(productVariants[i].price) / 100;
       if (variantPrice < lowestPrice) {
         lowestPrice = variantPrice;
       }
       if (variantPrice > highestPrice) {
         highestPrice = variantPrice;
       }
     }
     var priceContainer = document.querySelector(".product-price");
     priceContainer.innerHTML = "$" + lowestPrice.toFixed(2) + " - $" + highestPrice.toFixed(2);
   });
   </script>

    

5. It worked. Here's the result:
   
   

6. I want to do the same in the Store Page. I was able to figure out a code that targets the right element, but it doesn't show any prices and it only affects the first product on the grid. Here's the code i used on the footer:
   
    

   <script>
   if (window.location.pathname === '/shop') {
     var priceContainers = document.getElementsByClassName("grid-prices");
     var lowestPrice = Infinity;
     var highestPrice = 0;
     for (var i = 0; i < priceContainers.length; i++) {
       var priceText = priceContainers[i].querySelector(".product-price").textContent.trim();
       var price = parseFloat(priceText.substring(5));
       if (price < lowestPrice) {
         lowestPrice = price;
       }
       if (price > highestPrice) {
         highestPrice = price;
       }
     }
     var priceRangeContainer = document.querySelectorAll(".product-price");
     for (var i = 0; i < priceRangeContainer.length; i++) {
       priceRangeContainer[i].innerHTML = "$" + lowestPrice.toFixed(2) + " - $" + highestPrice.toFixed(2);
     }
   }
   
   </script>

    

7. Here's the result:
   
   

8. What I'm thinking is that from the Store Page, it doesn't know what the min and max price variant is, unlike the PLP. How can I scrap the data and then loop it back but in the Store Page. 

9. How do I target all the elements on the grid?

10. Is it possible to achieve the same result I got on the PLP? 

Thank you in advance for taking the time to read. I'm not a programmer by any means nor do I feel comfortable with code, Chat GTP helped me figure most of it out. Which is amazing to me. 

Here's the link to the website: https://chathamcompassion.com/shop 

(It's a 420 shop I'm working for a client)