@HollyDavis1210 This is currently a bug (since March 13th). If you paste text into the Announcement Bar it would normally be stripped of its formatting. Unfortunately this isn't happening right now, so if you paste in something that is H1 sized, the Announcement Bar will become enormous. Squarespace recommend the following workaround
Delete all text contents of the field
On empty formatted field, Select all ( Command + A )
Delete again to remove formatting
@dgoodman1 You no longer need CSS to have a 2-column grid on their mobile product page, this feature has been added to the store section settings. You can find it by editing the store section and toggling the mobile view:
I was trying to do the same thing. Add a image carousel in the footer to make a logo slider. Since this function was not available, I did a work around...
I made my image carousel just in the page, with all the right settings and CSS. Then I opened the pages code in Google Chrome, searched for the section and I copied the entire thing. Then I added a code block in footer and paste the code their. It works and it's mobile friendly. There are some beauty troubles tho like page width and white space between the sections but yeah..
I've hidden the "donor" section on the copywriting page where I copied the code from. So when I want to add or edit the logo wall I just do it there, then refresh and copy/paste the code again. It's a big work around, but it beats editing almost every page when we add a new big client or project which we want to show off in the logo wall.
You can check out the site www.alphaleads.eu. Hope this helps, and hope that @Squarespace will add the function since this is just basic CMS I think. Making a "template" like a logo wall which you can edit when you want and paste in pages you want.
ah, typo, script, not style, use this new code
<script>
$(document).ready(function(){
$("h2.list-item-content__title").each(function(){
$(this).html($(this).text());
});
});
</script>
Just wanted to add to this since I was referencing the same question and couldn't get the code to work. ( It seems obvious now, but wasn't thinking at the time. ) In order for the code to work you need to load the jquery into the header code injection. So in all:
Header add -
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
Footer add -
<script>
$(document).ready(function(){
$("h2.list-item-content__title").each(function(){
$(this).html($(this).text());
});
});
</script>
Hope that helps.
Hey @digitalink, yes managed to sort it! After aaaages trying to find a solution on Squarespace forum I came across this post which expressed the same problem.
@Ziggy shared the below solution which worked for me...
Try adding this to your Custom CSS, hoping it will hide the embed warning message and should allow you to shrink the block so you don't have to leave it overlapping the text block:
html.squarespace-damask .sqs-blockStatus {
display: none !important;
}
Hope it works for you too!
Hi all, I'm a new SquareSpace user, building a site to promote and sell software subscriptions... thinking about adding a chatbot and wondered which would be the best to go with? There are so many available; paid and free - happy to pay a little for it, I just want to be sure we choose a reliable, user friendly option - they all claim to be the best!
Any help would be appreciated!
Regards,
Johnny
This has to do with your personal account being connected to the Instagram. If you go to Instagram -> Settings -> FACEBOOK Account Center -> Click your personal page that's connected to the account -> Disconnect
Should work!
Some code for Portfolio Page - Grid Simple in 7.1.
All code: Add to Design > Custom CSS
<style> <script> you need to add to Page Header or Code Injection
#1. Change Overlay Color
/* Show dark overlay on hover */
.grid-image {
opacity: 1 !important;
position: relative;
}
.grid-image:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* chage overlay color here */
transition: all 0.3s;
opacity: 0;
}
.grid-item:hover .grid-image:after {
opacity: 1;
transition: all 0.3s;
}
#2. Add Subtitle
First, find subpage [url slug]
Next, use this CSS
/* Add subtitle */
h3.portfolio-title:after {
font-size: 20px;
color: black;
display: block;
}
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
content: "subtitle 01";
}
a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after {
content: "subtitle 01";
}
Repeat for other sub pages
#3. Add Multi Subtitle
/* Multi subtitle */
h3.portfolio-title:after {
font-size: 20px;
color: black;
display: block;
white-space: pre-wrap;
}
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
content: "subtitle 01 \A second subtitle \A third subtitle ";
}
a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after {
content: "subtitle 02 \A second subtitle \A third subtitle 2";
}
#4. Change to 5 items/row (Desktop)
/* Portfolio 5 columns */
@media screen and (min-width:992px) {
div#gridThumbs {
grid-template-columns: repeat(5,1fr);
}
}
If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.
#5. Change to 2 items/row (Mobile)
/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#gridThumbs {
grid-template-columns: repeat(5,1fr);
}
}
If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.
#6. Add “new” badge to next to title
/* new badge */
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
content: "New";
position: absolute;
top: -5px;
font-size: 14px;
background-color: red;
color: white;
line-height: 20px;
padding: 2px;
margin-left: 10px;
}
#7. Add an icon next to title
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
content: "";
background-image: url(https://cdn.pixabay.com/photo/2020/03/09/17/51/narcis-4916584__340.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 50px;
height: 50px;
display: block;
float: right;
}
Replace with [URL Slug] (see screenshot in first code)
#8. Zoom in image on hover
/* Zoom in image on hover */
.grid-image img {
transition: all 0.3s;
}
.grid-image-inner-wrapper {
overflow: hidden;
}
a.grid-item:hover img {
transform: scale(1.3);
transition: all 0.3s;
}
#9. Add “view” text when hover image
/* Add view text on hover image */
.grid-image:before {
content: "view";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
display: block;
width: 100%;
z-index: 999999;
color: white;
opacity: 0;
transition: all 0.3s;
}
a.grid-item:hover .grid-image:before {
opacity: 1;
}
#10. Show Overlay + Title over image when hover (Desktop only)
/* show overlay title on hover */
.grid-image {
opacity: 1 !important;
position: relative;
}
.grid-image:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
transition: all 0.3s;
opacity: 0;
}
.grid-item:hover .grid-image:after {
opacity: 1;
transition: all 0.3s;
}
.grid-image:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
display: block;
width: 100%;
z-index: 999999;
color: white;
opacity: 0;
transition: all 0.3s;
}
a.grid-item:hover .grid-image:before {
opacity: 1;
}
.portfolio-text {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 99999999999;
width: 100%;
text-align: center;
transition: all 0.3s;
opacity: 0;
}
a.grid-item {
position: relative;
}
a.grid-item:hover .portfolio-text {
opacity: 1;
}
.portfolio-text {
margin: 0 !important;
}
h3.portfolio-title {
margin: 0 !important;
}
#11. Change Aspect ratio on sepcific portfolio page
First, find [page id]
Next, use this CSS
/* aspect ratio 2:3 */
body#collection-622f619622029655b91503a8 .grid-image {
padding-bottom: 150% !important;
}
2:3 = (100 x 3)/2 = 150%
#12. Remove Pagination
/* remove portfolio pagination */
.item-pagination[data-collection-type^="portfolio"] {
display: none;
}
#13. Remove Pagination Title Only
/* remove pagination title */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
display: none;
}
#14. Remove Pagination Arrows Only
/* remove pagination arrows */
[data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke {
display: none;
}
#15. Replace Pagination Title with text Prev/Next
/* Pagination title */
[data-collection-type*="portfolio"] {
h2.item-pagination-title {
display: none;
}
.item-pagination-prev-next {
display: block !important;
}}
#16. Repalce Pagination Arrow with custom icon
/* Custom pagination arrow icon */
[data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke svg {
display: none;
}
[data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon.icon.icon--stroke {
background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
[data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon.icon.icon--stroke {
background-image: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#17. Add all projects under Pagination
Add to Project Page Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('<section class="item-pagination item-pagination--prev-next under-pagination"><div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"><p><a href="/work" target="_blank">All</a> / <a href="/work/meccaandmedina">Mecca & Medina</a> / <a href="/work/street">Street</a> / <a href="/work/humansofstlouis">Humans of St. Louis</a> / <a href="/work/charis">CHARIS</a></p></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]');
});
</script>
<style>
section.under-pagination {
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
#18. Add Last Project/First Project on First Page/Last Page Pagination
Add to Page Header or Code Injection Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('<a href="/portfolio/12" class="item-pagination-link item-pagination-link--prev"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Previous</div><div class="item-pagination-prev-next">- PREV</div><h2 class="item-pagination-title">12 | PRIVATE EVENTS</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next');
});
</script>
#19. Add Button to Pagination
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next');
});
</script>
<style>
/* Portfolio back to button */
a.portfolio-backto .item-pagination-title {
background-color: black;
color: white !important;
padding: 10px;
}
</style>
#20. Add “Back to all projects” under pagination
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]');
});
</script>
#21. Move Pagination from bottom to top
Add to Page Header
<style>
main#page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
padding-top: 100px;
}
section.item-pagination.item-pagination--prev-next {
padding-top: 0;
padding-bottom: 5px;
}
.view-item .item-pagination[data-collection-type^="portfolio"] section:first-child {
padding-top: 10px !important;
}
</style>
#22.Change Pagination Title size (mobile)
/* pagination title mobile */
@media screen and (max-width:767px) {
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
font-size: 14px;
}
}
#23. Change Pagination Color on hover
/* pagination hover */
.item-pagination[data-collection-type^="portfolio"] h2:hover {
color: #f1f;
}
.item-pagination[data-collection-type^="portfolio"] .icon:hover svg {
stroke: #f1f;
}
--
Checked by @tuanphan
You can add a tool to the backend of your Squarespace website, so that you (the merchant) can see the rates from different carriers and choose which one to use for each order when you are processing them.
However, customers cannot see this information before they purchase. This means customers cannot select an accurate carrier-calculated rate. Instead they must select from the shipping options that you added manually, based on size, weight and destination.