Jump to content

Include lightbox beside Product option

Recommended Posts

The url doesn't exist

To achieve this, my solution is

  1. First, install a Lightbox plugin (If you know an another free plugin, you can also use)
  2. Next, add a page in Pages > Not Linked (This page will be Lightbox Content)
  3. Next, add a Text Link in Additional Info >> Insert Lightbox Link
  4. Share link to product where you added text link, we will test Script code to move it to position in screenshot

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

So I've spent the evening thinking about the ideal solution, and before I purchase the plugin I want to make sure it will resolve another issue. 

As well as doing the lightbox as outlined above, I also want to include colour swatches on the checkout custom form (lightbox) which will replace the checkboxes. See screen shot attached.

Can this be done? 

A table of some sort is also required I guess, and it would be ideal if only one option is selectable. 

I've attached a screen shot of the form in it's current (poor) form!

Thanks in advance!

Screenshot 2022-01-19 at 21.45.21.png362590734_Screenshot2022-01-19at21_48_29.thumb.png.0812a7f3ca7f49d691385541524413fa.png

Edited by DreamrW
More info
Link to comment
On 1/20/2022 at 4:47 AM, DreamrW said:

So I've spent the evening thinking about the ideal solution, and before I purchase the plugin I want to make sure it will resolve another issue. 

As well as doing the lightbox as outlined above, I also want to include colour swatches on the checkout custom form (lightbox) which will replace the checkboxes. See screen shot attached.

Can this be done? 

A table of some sort is also required I guess, and it would be ideal if only one option is selectable. 

I've attached a screen shot of the form in it's current (poor) form!

Thanks in advance!

Screenshot 2022-01-19 at 21.45.21.png362590734_Screenshot2022-01-19at21_48_29.thumb.png.0812a7f3ca7f49d691385541524413fa.png

I guess this is not possible.

You can also post to Squarespace Customization Resource on Facebook, maybe someone has a good suggestion

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
22 hours ago, DreamrW said:

I wonder in that case is it possible to create a table in the custom form, to look something like the attached? 

Screenshot 2022-01-24 at 10.05.42.png

I think you can add a list of options, then we will try some code to split them to 4 columns & make bold & remove some square to make 3 titles (Linen, Velvet, Suede)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/19/2022 at 2:34 PM, tuanphan said:

The url doesn't exist

To achieve this, my solution is

  1. First, install a Lightbox plugin (If you know an another free plugin, you can also use)
  2. Next, add a page in Pages > Not Linked (This page will be Lightbox Content)
  3. Next, add a Text Link in Additional Info >> Insert Lightbox Link
  4. Share link to product where you added text link, we will test Script code to move it to position in screenshot

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

I've included the lightbox as outlined. Now I'd like to move the lightbox link 'Colour options' to sit beside the 'Cover Material' variant drop down like illustrated on the attached. 

https://point-manatee-dntb.squarespace.com/shop/p/wedding-albums

Albums2021

Screenshot 2022-02-01 at 16.27.55.png

Link to comment
31 minutes ago, DreamrW said:

I've included the lightbox as outlined. Now I'd like to move the lightbox link 'Colour options' to sit beside the 'Cover Material' variant drop down like illustrated on the attached. 

https://point-manatee-dntb.squarespace.com/shop/p/wedding-albums

Albums2021

Screenshot 2022-02-01 at 16.27.55.png

I've just tried to create another lightbox link for 'Font options' but the text link option isn't available under Additional Info - have Squarespace changed this within the last 24 hours or am I losing my mind?! 

 

 

Link to comment
On 2/1/2022 at 11:28 PM, DreamrW said:

I've included the lightbox as outlined. Now I'd like to move the lightbox link 'Colour options' to sit beside the 'Cover Material' variant drop down like illustrated on the attached. 

https://point-manatee-dntb.squarespace.com/shop/p/wedding-albums

Albums2021

Screenshot 2022-02-01 at 16.27.55.png

Add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional a.lightbox-link').appendTo('.variant-option:first-child .variant-option-title');
	});
</script>
<style>
  .variant-option-title a {
    float: right;
    color: blue;
    text-decoration: underline;
}
</style>

image.thumb.png.6be6d01750d5459ecf23a89370f6cf46.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
47 minutes ago, tuanphan said:

Add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional a.lightbox-link').appendTo('.variant-option:first-child .variant-option-title');
	});
</script>
<style>
  .variant-option-title a {
    float: right;
    color: blue;
    text-decoration: underline;
}
</style>

image.thumb.png.6be6d01750d5459ecf23a89370f6cf46.png

Incredible, thank you! 

 

Can you walk me through how to add another link for Font options - I'm unable to replicate what I did first time round, I can't add a hyperlink into the text box in Advanced Info for some reason! 

 

Link to comment
On 2/7/2022 at 6:45 PM, DreamrW said:

Incredible, thank you! 

 

Can you walk me through how to add another link for Font options - I'm unable to replicate what I did first time round, I can't add a hyperlink into the text box in Advanced Info for some reason! 

 

Sorry for the delay. Repairing the room

Which font option? I don't see font dropdown

image.thumb.png.a5712e46a4c0c62d7d7cefe36033ad8f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.