Makeswift on Stencil

Accordions add a list of drop-down content to your webpage. This is useful for reducing the page space of longer content, such as a list of frequently-asked questions.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the accordion list and adjacent components in the same layer. For how to use the Margin property, see Makeswift’s article on Margin.
• Selection Type — Control whether multiple accordion items can be expanded at the same time, or only one at a time.
• Items — Add drop-down sections to the list and define the title and content of each.

Card components consist of an image with caption text placed underneath. These allow you to create a visual list of content from scratch.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the card and adjacent components in the same layer. For how to use the Margin property, see Makeswift’s article on Margin.
• Visibility — Control the visibility of individual elements nested within the card.
• Card Link — Add a link to the card.
• Link Aria Label — Add an accessible label to the card’s link for screen readers. Use this when the card’s visual content alone doesn’t provide enough context about where the link goes.

Add components to each slide space for a more customizable carousel.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the carousel and adjacent components in the same layer. For how to use the Margin property, see Makeswift’s article on Margin.
• Slides — Add slides to your carousel. Each slide has its own editable region where you can add other components.
• Show Scrollbar — Enable this to display the carousel’s horizontal scrollbar.
• Show Navigation — Enable this to display the left and right arrow buttons.

Divider components add a horizontal line to separate different layers of the webpage. Use this component to visually distinguish between content blocks, such as dividing multiple product lists.

• Style — Specify if the dividing line should appear solid, dashed, dotted, or blended into the background.
• Height — Enter the divider’s vertical thickness in pixels.
• Color — Use the color picker or select from your list of site-level colors, and specify the color opacity.
• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the divider and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.

Embed components allow you to add custom HTML code to the webpage, including style and script tags.

• Code — Enter your HTML code for the component.
• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the embedded content and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.

Gallery components display a collection of images with a large focused view and thumbnail previews below. Clicking a thumbnail brings it into focus as the main image.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the gallery and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Images — Add the images to your gallery.
• Aspect Ratio — Select the height and width proportions for the image.

Image Highlights lets you place interactive hotspots on an image. Each hotspot has its own title, description, image, and button, allowing you to surface additional context or actions at specific points within the image.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the component and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Main Image — The primary image that hotspots are placed on.
• Image Alt Text — The alt text for the main image.
• Aspect Ratio — Select the height and width proportions for the image.
• Content Side — Set which side of the hotspot marker the popup appears on.
• Content Alignment — Set whether the popup is aligned to the left, center, or right of the hotspot marker.
• Highlights — Add hotspot markers to the image. Each highlight has the following properties:
  • X Position — The horizontal position of the hotspot on the image.
  • Y Position — The vertical position of the hotspot on the image.
  • Title — The title displayed in the hotspot popup.
  • Description — The description text displayed in the hotspot popup.
  • Image — An image displayed in the hotspot popup.
  • Image Alt Text — The alt text for the hotspot’s image.
  • Button Text — The label for the button in the hotspot popup.
  • Link — The URL the button links to.

Matrix components display data in a grid format with defined row and column headers and values for each cell.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the matrix and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Spacing — Set the density of the table layout. Choose Default for standard cell padding, or Condensed to reduce the spacing between cell borders and text for a more compact view.
• Show Borders — Toggle the visibility of interior cell borders.
• Max Height (px) — Set a maximum height for the table in pixels.
• Corner Header — Set the label for the top-left cell of the table. Requires at least one column header to be defined.
• Column Headers — Add column headers to the table.
• Rows — Add rows to the table and define values for cells.

Slideshow displays a slide deck that automatically transitions between slides.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the slideshow and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Slides — Add slides to your slideshow.
• Show Pagination — Show or hide controls for jumping to a specific slide.
• Show Counter — Display the current slide position out of the total (e.g., 1 of 5).
• Show Play Button — Show the controls for pausing and playing the slideshow.
• Autoplay — Automatically advance through slides without user interaction.
• Loop — Restart the slideshow from the first slide after the last slide is reached.
• Interval (ms) — Set the amount of time in milliseconds between slide transitions.

This component adds a horizontal list of icons, which allow you to link to your business’s social media pages, similar to the social media links included with Stencil storefronts.

• Links — Add a link to a social media network of your choice.
• Shape — Determine the shape of the social media icon.
• Size — Determine the size of the social media icon.
• On Hover — Determine the behavior of the icon on hover.
• Icon Color — Set the color of the icon.
• Shape Color — Set the color of the shape.
• Alignment — Set the horizontal alignment of the social link icons.
• Link Gap — Configure the space between the icons.
• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the social links and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.

Table components display data in a grid format with defined column headers and rows. Unlike the Matrix component, tables do not support row headers.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the table and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Spacing — Set the density of the table layout. Choose Default for standard cell padding, or Condensed to reduce the spacing between cell borders and text for a more compact view.
• Show Borders — Toggle the visibility of interior cell borders.
• Max Height (px) — Set a maximum height for the table in pixels.
• Columns — Add columns to the table.
• Rows — Add rows to the table and define values for cells.

Tabs allow you to organize content into labeled sections. Each tab contains its own editable slot where you can add other components. Clicking a tab displays the content associated with that tab.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the tabs and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Default Tab Value — Set which tab is selected by default by entering a value that matches one of your tab’s values.
• Tabs — Add tabs and define their labels.

Use this component to add online video content to your store.

• Video URL — Enter a video link from any hosting platform, and then configure the following settings:
  • Autoplay — Enable this to play the video automatically when the webpage is opened.
  • Show Controls — Display or hide the video menu for viewers.
  • Loop — Enable this to automatically replay the video when it ends.
  • Muted — Specify whether or not the video’s sound is muted by default.
• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the video and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Corners — Increase the value to round the corners of the video. You can apply this uniformly to all corners, or set a unique value for each corner. Note that higher corner values can hide parts of the video menu.

Video Scroller plays a video in sync with the user’s scroll position on the page.

• Width — Define the component’s width on your page. You can set an absolute width in pixels, or you can set a responsive width that adjusts to a specified percentage of any device’s screen size.
• Margin — Define the space between the video scroller and adjacent components in the same layer. For a detailed explanation of how to use the Margin property, see Makeswift’s article on Margin.
• Video URL — The URL of the video. Supported formats are MP4, WebM, and OGG.
• Scroll Amount — How many full pages of scrolling it takes to play the video.
• Segments — Add text overlays to the video. Multiple segments can be defined and will play sequentially.