Ghost Plugins

View Original

Naton Slideshow (Preview Guide)


⚠️ Before You Begin - Squarespace Animations

We recommend Squarespace Animations (FLEX) be disabled or a different animation style be used when using this plugin. Squarespace Animations can sometimes conflict with third-party code.


Super Plugin Info

  • Works with Squarespace 7.1

  • Requires Business Plan or Higher

  • Uses CSS Editor and Code Injection


Step 1. Add this code to Header Code Injection

See this content in the original post

Step 2. Add this code to Footer Code Injection

See this content in the original post

Step 3. Add this code to Custom CSS

See this content in the original post

Step 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

  • Transparent or Solid Header

  • Autoplay (On or Off)

  • Autoplay Duration


Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

  • Title Size and Color

  • Description Size and Color

  • Mobile Title Size

  • Mobile Description Size

  • Item Counter Size and Color

  • Arrow Icon Size and Color

  • Slideshow Height

  • Mobile Slideshow Height

  • Overlay Color

  • Color On Load (If Connection Is Slower)

  • Text Content Width


Step 5. Set Up and Manage Your Slides

Create a new blog page and add a new post with the following inputs. Each input will turn into a certain element within the plugin. Repeat this step for each slide – all items are required for the plugin to work.

  • Blog Title = Title Text

  • Blog Image = Image

  • Blog Excerpt Text = Description Text

Why a blog? The blog page is simply used as a workaround to house and manage your slides. You’ll link this blog page to a summary block in the next step.


Step 6. Add a Summary Block

Add a summary block to any page with these settings - this will link the summary block to the blog you just created. All settings are required for the plugin to work.

  • Select a Page: The Blog Page (From Step 5)

  • Enable: Title, Image, Excerpt

  • Layout: Carousel Style

⚠️ Important: Add the text naton (all lowercase) to the summary block’s header text box.


Helpful Tip - Transparent Header (Optional)

For a transparent header, set the transparentHeaderAboveSlider Footer Code Injection option to true and change the header’s color to Adaptive in header settings.


Plugin Notes

  • Font family inherits from title and body settings.

  • Cannot use other plugins that also use the carousel layout.

  • Squarespace's native carousel layout will not be available.


Troubleshooting (Plugin Not Working)

  • The naton text has been added to the summary’s header text box.

  • A title, excerpt, and image are all required in each post.

  • Disabling Squarespace Animations is recommended.

  • Using one slideshow on a single page is recommend as having multiple may affect some functionality.