Sienawalker

For anyone following/interested if they come across this, I found two workarounds to support what I needed to do.

My use case was including a specific Zoom link for each of my "service" products - I have a yoga instructor who teaches virtual classes 3 times/week, and to ensure that someone registering for a Sunday class doesn't just go to the Wednesday class, we have a different link for each one. The two workarounds I found for this are to:

1. Include a custom form as part of the product, and when a user purchases the product have them select a checkbox to confirm their zoom link, then it is shown in the confirmation email (risky, because someone could technically just copy the link from the form before purchase, but my client isn't concerned with that, they are agreeing to terms of service at the same time, and most people in her community are trustworthy)

2. Setup a custom integration using Make, which triggers a workflow when it sees a specific product is purchased, and sends a custom email based on the product.

Neither are perfect solutions, I wish Squarespace would allow us to include a custom message/product after purchase without it having to be a digital download. 

I am trying to include the product description in my order confirmation emails, does anyone know how I can include this?

Site URL: https://www.lilydwyerbeggyoga.com/

Hello! We want to redirect users to a specific landing page after a user purchases this product https://www.lilydwyerbeggyoga.com/registration/p/30-day-core-challenge-all-new-june-2022 - I can't find a way to do that from the product itself, or from the commerce section. Has anyone done anything similar?

Site URL: https://ferret-blue-kyef.squarespace.com/

Hello! I have a client who is selling pre-recorded yoga classes. Each class is a Vimeo link, and the way I have implemented this in the past has been to create a PDF with a link to the class and sell it as a digital download. Is there a better way to do this? Can we just have the actual link be emailed with the purchase confirmation?

On 7/3/2021 at 2:53 AM, tuanphan said:

Remove height 800px code & use this new code

<style>
  [data-section-id="60dda2258ae2570c0c0fc1ea"] .content-wrapper {
    padding: 0 !important;
    max-width: 100%;
}
  html, body {overflow-x: hidden;}
 div#block-yui_3_17_2_1_1625137690367_11288>div {
    display: flex;
    align-items: stretch;
   flex-wrap: wrap;
}
  .box1, .box2, .box3, .box4 {
    width: 25%;
    text-align: center;
}
  .box1 h2, .box2, h2, .box3 h2, .box4 h2 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1.5rem !important;
}
  /* box 1 */
  .box1 {
    background: #122050;
}
  /* box 2 */
  .box2 {
    background: #5c6c7e;
    margin-top: 0;
}
  /* box 3 */
  .box3 {
    background: #7aa2b9;
}
  /* box 4 */
  .box4 {
    background: #7aa2b9;
}
  @media screen and (max-width:991px) {
  .box1, .box2, .box3, .box4 {
    width: 50%;
}
  }
  @media screen and (max-width:767px) {
  .box1, .box2, .box3, .box4 {
    width: 25%;
}
  }
</style>

 

Thanks! Last question, how do I get the content to be centered in the color block?

4 hours ago, tuanphan said:

Add to Code Block

<style>
  [data-section-id="60dda2258ae2570c0c0fc1ea"] .content-wrapper {
    padding: 0 !important;
    max-width: 100%;
}
  html, body {overflow-x: hidden;}
 div#block-yui_3_17_2_1_1625137690367_11288>div {
    display: flex;
    align-items: flex-start;
}
  .box1, .box2, .box3, .box4 {
    width: 25%;
    text-align: center;
}
  .box1 h2, .box2, h2, .box3 h2, .box4 h2 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1.5rem !important;
}
  /* box 1 */
  .box1 {
    background: #122050;
}
  /* box 2 */
  .box2 {
    background: #5c6c7e;
    margin-top: 0;
}
  /* box 3 */
  .box3 {
    background: #7aa2b9;
}
  /* box 4 */
  .box4 {
    background: #7aa2b9;
}
</style>

 

This worked, but is there a way to get them all to be the same height/fill the full vertical space of the container? 

On 6/14/2021 at 4:51 AM, tuanphan said:

You can try adding this Code Block >> Then share link to page where you added, we will tweak the code to achieve screenshot layout.

<div class="box1">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box2">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box3">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box4">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box5">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>

 

@tuanphan - I added that to this page https://koala-grape-9rm8.squarespace.com/services (use p4ssword to view)

I am trying to create a color block section on a squarespace site similar to the attached screenshot. Any ideas how to make that happen?

Site URL: https://www.heatherwineryoga.com/

I have a client that wants to remove the 24 hour deadline to download a purchased digital product. Does anyone know if that's possible?

Hello - I am working on a site for a client and I need to send a specific link based on what a user purchases. The workaround I've done for this in the past was to make these digital products, and have a download with the link, but that is pretty hack-y and I would prefer to just be able to say "if user purchases x product, send them x URL"

Has anyone done anything similar?

It looks like there is a plugin here that supports what you are looking for - https://elfsight.com/number-counter-widget/squarespace/

I have not used this specific plugin, but everything I have used from elfsight has worked exceptionally well. Many of their widgets are free up to a certain number of page views, or relatively inexpensive if you pay. 

Good luck!

I found kind of a hacky workaround that worked for my client, but it was pretty specific for their use case. They were not selling physical products, but taking deposits for appointments. So I used JotForm to setup the transaction through a form, and through that platform you can accept payment through square. You can embed the jotform form onto your site so the end user doesn't recognize there are multiple systems involved, and after the transaction you can direct a user to any page on your site. So it bypasses Squarespace's ecommerce transaction all together.

Not sure if this workaround is applicable to anyone else here. Any of course my client is no longer taking appointments online, so I am not able to show an example of it working, but feel free to message me directly if you want to give this a shot and have questions.

Good luck all! 

1 hour ago, tuanphan said:

.homepage header#header { background: transparent; }

Amazing, worked. Thank you!!

5 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  header#header {
    position: absolute !important;
    background: transparent;
}
</style>

Can you share your site url?

This is in place on two websites I have running - https://www.sienaleigh.com/ and https://www.notyouraveragemotherrunner.com/

3 hours ago, tuanphan said:

Add to Home Page Settings > Advanced > Header

<style>
  .tweak-fixed-header .header .header-announcement-bar-wrapper {
    background: transparent !important;
}
</style>

 

I've added this into my homepage code injection and it still isn't working - do you have a site on 7.1 where this is successful? 

Site URL: https://www.sienaleigh.com/

Hello! I have been using the following code to have a transparent header on ONLY my homepage for quite a few sites, and after this last release it no longer works. Is anyone else experiencing anything similar, and do you have ideas for workarounds?

//transparent header on hp//
.homepage .header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important;
}

Here is an example of a site using this code that worked prior to the last release https://www.sienaleigh.com/

I was able to find a solution, so I am sharing it here in case anyone runs into a similar issue:

Important notes, your section ID will need to be updated with your own ID, and you need each image block authored to be in either 3 columns or 2 columns for this to work. If you have multiple sections where you want this to work, you will need to add this code for each section.

//equal size blocks//
section[data-section-id="5f561a6cfab9b365a25a1e21"] {
  .sqs-col-3, .sqs-col-2 {
    width: 20% !important; 
  }
}

Site URL: https://www.mindfulmetherapy.com/behavior-therapy

Hoping someone can help me - I have 5 images in a row and I am trying to get them to be equal height. See below for the code I am using, it is not working.

The password to access the page is p4ssword

//equal size blocks//
#5f561a6cfab9b365a25a1e21 {margin-left: auto; margin-right: auto; display: block; width: 20%;}

Jumping in here to say I used this same process - I added my shopify buy button to my footer code injection on my site, then used the css rule provided by @tuanphan and it works great on 7.1 too! https://www.moonlightgardensupply.com/# (note, you have to have products in your cart for it to show up, but once you do, the cart appears on every page without showing the list of products I have hidden in my footer).

Thank you!

Adding the code noted above worked for another site I'm working on that isn't live, but I haven't applied it to the live site.

@tuanphan - I am having an issue with adding this to allow more than one folder link - when I do it kind of jumps around between the top level pages. Any way to apply this so I can have multiple folders link to landing pages?

Thank you so much!! This was so helpful and worked perfectly!

Yeah, that is just really poor user experience and takes away any kind of hierarchy on the site. A landing page should structurally be above any children pages that fall under it, so it's strange behavior to see <Services> on the same line as <services/page>. Hoping to find a workaround because it makes my site lack structure.  

Right - I see that that is the behavior, but it makes for a strange user experience when you want a dedicated landing page that provides an overview of all of the content on the pages below it. 

Site URL: https://www.truumed.com/

I have tried every trick provided in this forum to make my folder clickable in Squarespace 7.1 and nothing works. Example - I want to be able to link to the All Services page when I click on Services on this site since it's a landing page, but I can't get it to work https://www.truumed.com/

I have the same issue, following to see if anyone has had success with this.