Skip to main content

Grow not showing up on my Squarespace site

Kat Vellos
Edited

Today I signed up for Grow and installed the script on my Squarespace site. The portal confirms that the script was installed successfully. Overall, it was pretty straightforward (thank you for the good user experience design.) But I have a problem…

I turned on the settings for numerous Grow features, like Recommended Content and the Newsletter Subscribe Widget (which I connected to my Flodesk account and segment using your integration ✅). I specified that I only want these features to show up on my blog posts, and nowhere else.

😩 So why aren't the Grow features like Recommended Content and Newsletter Subscribe Widget now showing up on my blog pages?

To troubleshoot, I already tried:

  • Looking at my site in 4 different browsers (Chrome, Firefox, Duckduckgo, and Safari)
  • Looking at my site in an incognito window
  • Looking at my site on both desktop and mobile

…. but the Grow features still aren't showing up. :(

In this Chrome window, I was able to confirm that Grow is at least active on my site, because the save/bookmark/copy-link icon is there, and it's functional. 

So why aren't the rest of the Grow features appearing in my blog posts? Is it possible that the Content Selectors I set were wrong? Can someone take a look at my settings and help me with that? Your guide to choosing Content Selectors wasn't applicable for Squarespace users, because the code tags were very different than what I see in sqsp so maybe that's where I made a mistake. The content selector that I saved was:

.blog-item-wrapper .section-border

Would appreciate any help you can offer. 💛

 

0

Comments

10 comments

Date Votes
  • Support
    • Grow Support Team
    Edited

    Yes, it's likely the content selectors are incorrect.

    Grow has default selectors programmed in that can target most sites' blog content area. Removing your custom content selector could allow Grow's features to appear.

    0
  • Kat Vellos
    Edited

    Thanks for that suggestion. I removed the Content Selectors and refreshed the page, but nothing has changed on my blog posts. Nothing from Grow is showing up. Screenshot below. Any other advice or suggestions?

    0
  • Support
    • Grow Support Team

    Since that didn't work, you will need to define a custom selector. 

    In Chrome, right clicking any of the content area and selecting “inspect” will bring up devtools. You can look through the parent areas of your content scripts for selectors that may work. Anything relating to layout, like columns or rows, could end up being a good selector. It's going to be touch and go to find the best selector for your theme.

    I would stay away from wrapper selectors because so much of your content is nested in divs. The wrapper is too large a parent container to place Grow's in-content features within your post content. At best, the wrapper will likely place them at the end of your post content. 

    0
  • Kat Vellos
    Edited

    Initially, when I tried this by following the instructions on Grow’s help page about this, I saw/selected:

    <div class=“section-border”>

    (then a bunch more code)

        <div id= class=“blog-item-wrapper blog-basic-grid-item-wrapper”>

    So I assumed that:

    Parent = .section-border

    Child = .blog-item-wrapper

    …so what I entered as the Content Selector in Grow Settings > Site Settings:

    .blog-item-wrapper .section-border

     

    Other possible alternative “parents” I saw -

    .siteWrapper

    .clearfix site-wrapper

    .sqs-block-content

    .sqs-block-html

    .sqs-block

    .container

    .sections

     

    Other possible alternative “children”  I saw-

    .content-wrapper

    .content

    .blog-item-wrapper

    .blog-item-inner-wrapper

    .blog-item-content-wrapper

    .content-collection

     

    Which of these do you suggest I use now, and did I configure it correctly by placing it exactly like this in the Content Selector field? --

    .blog-item-wrapper .section-border

    FWIW, there was no Grow content anywhere on the page, not even at the end. Here's a sample blog post URL if you want to inspect it: https://weshouldgettogether.com/blog/get-to-know-your-neighbors

    0
  • Support
    • Grow Support Team

    We are not able to specifically troubleshoot or assist with custom content selectors. Your theme support, developer, or host may be able to offer further assistance.

    The format is correct, so trying different parent and child container combinations is likely the best way to discover the appropriate content selector. Trial and error is likely the best method with content so heavily nested in div tags.

    0
  • Kat Vellos

    Thanks for your help. Last question — assuming I do get this working, how can I assure that the Grow widgets only appear within blog post pages, and not on any of the other content of my site like my About page and sales pages? 

    0
  • Support
    • Grow Support Team

    One way is to find unique content selectors that only appear in your blog posts. This will ensure in-content Grow features won't be placed elsewhere.

    You can also disable all Grow features on a page-by-page basis. This article explains that process.

    0
  • Kat Vellos

    Ok, thanks, I used that to place the disable code on the rest of my site's main pages.

    0
  • Kat Vellos

    Just following up, in case it's useful for any other Grow customers who use Squarespace for their blog, and who see this post later on —

    I asked a developer acquaintance for their opinion and they said:

    “Try adding Grow script code to Post Blog Item Code Injection without the enter selector. If it doesn't work, these are selectors that only appear on blog posts” —

    .blog-item-wrapper

    .blog-item-content-wrapper

    .blog-item-content

    body.collection-type-blog.view-item

    .e-content

    None of these made the features work properly for me. 🙃  Details below:

    I turned off the Recommended Content feature in Grow's settings, because A) it was only appearing at the very bottom of my blog posts, not as a sidebar which is what I really wanted and saw in the sample on the Grow Settings page. And B) When the recommended blog posts were shown, they didn't show up with the blog posts' titles—they all just said the title of my website so large, that all context was lost as to what that blog post was about. It was just a line of three photos and the truncated website title, and since it looked janky, I just decided to turn off the feature. Bummer, because I've always wanted one of those widgets on my site. 

    Now, all that's left turned on is the Grow Subscribe form widget. This is different from the ones I add manually to my Sqsp blog posts using code snippets from Flodesk. I've been manually placing those ones interspersed between my blog posts' paragraphs and may need to continue doing it that way, since the Grow Subscribe Widget only shows up at the bottom of the page, and it comes with a huge gray blank area underneath. Image below.

    I have no way of knowing if any other of Grow's Squarespace users are having these issues, but I just wanted to bring it to someone's attention. If the Support team has any advice, I'd be real thankful for it. 😅 In the meantime, sadly, I feel like I have no other choice but to turn off these Grow features, and either recreate them manually as I've already been doing, or go without them. /end

    0
  • Support
    • Grow Support Team

    Hey Kat!

    Your blog posts don't have a defined sidebar area. Without a sidebar area that's at least 250px wide, there's nowhere for Grow to place the Sidebar Recommended Content widget. You could potentially add a sidebar to your blog post layout and target the Sidebar Recommended Content widget using the sidebar selector.

    As far as Grow displaying your site name instead of the post title, that's because your OpenGraph metadata (specifically the og:title tag) is your site name. Grow uses the social sharing metadata from your site to create its post bookmarks. Updating your blog posts og:title tags to reflect the post title instead of your site name should help there. If you choose to do this, you'll want to clear your site's cache and then go to Grow Publisher Portal > Grow Settings > Recommended Content and click the Refresh Posts button so Grow can pull in the updated metadata.

    Because your blog content is so heavily nested in blocks (which show in the source as div tags), Grow has a hard time placing in-content features. This is true of most sites created with page builders or that heavily use content blocks/divs to layout their content. Because of the difficulty in targeting in-content areas in div-heavy layouts and maintaining the reader experience, we typically do not offer assistance in identifying selectors. The closest selector to providing a true in-content experience on your site is .col.sqs-col-12.span-12 but it breaks into your layout's columns and can skew the flow of the posts. It is most likely not an experience you or your readers will enjoy.

    An alternative solution could be similar to manually placing your Flodesk forms. Instead, you could use Grow Manual Placement forms which operate the same way (by inserting code snippets). A slightly less hands off way would be to code in sections for Grow to place Spotlight Subscribe forms. You can do this by creating an area in the post where you'd like Grow to insert a Spotlight Subscribe form (you can use a div tag for this!) and giving it a custom CSS class. Then, you can go to Grow Publisher Portal > Grow Settings > General and use that custom CSS class as your selector. 

    To remove the “gray blank area,” you can disable Subscribe's Inview Effect. The Inview Effect places Spotlight Subscribe and Manual Placement forms in a placeholder box that allows the form to scroll with the readers, keeping on screen – or in view – longer than a static placement. This can be disabled under Grow Publisher Portal > Subscribe > Settings.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post