Keito Image Changer (Preview Guide)


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

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4. Customizable Options

These options are available in Custom CSS.

  • Max Width and Text Alignment

  • Image Height and Position (Left or Right)

  • Image Border Radius

  • Optional Title Text

  • Title Size and Color

  • Tabs Size and Color

  • Excerpt Size and Color

  • Tabs Background Color

  • Tabs Border Style and Radius

  • Tabs Padding and Spacing


Step 5. Set Up and Manage Your Content

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 item – all items are required for the plugin to work.

  • Blog Title = Tab Title Text

  • Blog Image = Image

  • Blog Excerpt Text = Tab Description Text

We recommend keeping the titles shorter as they’ll be more compact on mobile.

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 keito (all lowercase) to the summary block’s header text box.


Step 7. Add a Title Above The Tabs (Optional)

To add a title above the tabs, add a text block directly below the summary block - see this example. Then, set your text to header 3 with italic style.


Plugin Notes

  • Font family inherits from 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 keito text has been added to the summary’s header text box.

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

  • If the optional title text doesn’t show in edit mode, check as a normal visitor.

Previous
Previous

Taydio Image Changer (Preview Guide)

Next
Next

Animated Number Counter (Preview Guide)