Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
      • Templates
      • Save a page as a template
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Basic editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • FAQ page like Satyajewelry
    • Featured collections showcase like Puma
    • Home page 🔥
    • Landing page 🔥
    • Multi-column section like SkinnyTeatox
    • Newsletter section like Emmabridgewater
    • Product page 🔥
    • Scrolling promotion like Elementmatcha
    • Testimonial section
    • Video hero section like Swarovski
  • FAQ
    • Foxify Free plan is sunsetting
    • Foxify Gen 2 Beta Test
    • How to report an issue
    • Generic
      • Compare Foxify with other Shopify page builders
      • Completely remove Foxify code from my Shopify theme
      • How to change the app language 🌍
      • Pick a theme to work with Foxify
      • Does Foxify work for all the pages in my store?
      • How to get API Secret key in Foxify
      • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS 🔥
    • FoxKit AIO Upsell Cross-sell 🔥
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • How to create a Stack
  • How to manage a Stack
  • Absolute element control

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Elements

Stack Elements

PreviousResize an ElementNextCopy & Paste Elements

Last updated 4 months ago

Was this helpful?

Stacks are containers that group multiple elements together in a horizontal or vertical layout.

They act like a flexible canvas within your page, allowing you to precisely position and arrange elements to keep them from overlapping or drifting apart as the screen resizes.

How to create a Stack

Steps:

  1. Click an element that you want to be in the Stack.

  2. Hold down the Shift key and select the other elements to stack them together.

  • Once you use a stack, nested elements will be set to auto-space between.

  • You can't apply constraints to any elements within the stack. However, you can still apply constraints to the stack itself.

To detach an element from a stack, simply select it and drag it out.

To add a new element to a stack, drag it over the stack until you see the blue indicator and drop it.

How to manage a Stack

Steps:

  1. Select the Stack you want to edit

  2. In the Inspector panel, make relevant changes to the settings.

Besides other common settings (colors, backgrounds, effects, etc.), settings specialized for Stack are included in the Design tab > Auto layout.

  • Direction: Set the way the stack will flow:

  • Distribute: Set the alignment of the element when stacked horizontally.

  • Align: Set the alignment of the element when stacked vertically.

  • Gap: Change the gap (margin) between the rows and columns within the stack.

If the stack direction is set to vertical or horizontal, you'll be able to set the gap between elements vertically (row gap) or horizontally (column gap), respectively.

When you select a stack in the editor, the margins between the elements are indicated by the pink strips. Move elements further apart or closer together by dragging these handles to adjust the spacing of all the elements at once.

Pro tip: The margins (pink strips) between the elements included in a stack are equally set. If you want to make an element that is further apart from others, you can set more spacing to that element specifically.

  • Padding: Padding controls the empty or white space between the boundary of a stack and the elements within it. You can adjust padding uniformly for all sides, or fine-tune it individually for top, right, bottom, or left.

Absolute element control

When an element is placed within a Stack (Auto-layout), it cannot be freely repositioned. Instead, it aligns with the direction of the stack. However, enabling the Absolute Position option allows you to freely drag and position the element as needed, just like in normal layouts.

  • Static: Default position; follows the normal layout flow.

  • Relative: Stays in the layout flow but can be moved slightly from its original spot.

  • Absolute: Removed from the layout flow and positioned relative to its nearest positioned ancestor or the page.

  • Sticky: Acts like relative but becomes fixed when scrolling reaches a set point (e.g., sticky headers).

Static position places elements according to the normal flow, without allowing custom positioning adjustments.

Relative position acts as a container for Absolute elements, allowing them to be positioned relative to the container.

The Absolute Position option lets you freely drag and position the element, just like in regular layouts.

You can customize the spacing of a sticky element by adjusting the Inset setting.

Select the stack direction: Stack vertical or Stack horizontal. The stack direction can also be set to Wrap using the .

Pro tip: Quick stack your selected elements vertically by using the keyboard shortcut: Ctrl + (Enter/ Return).

.

To unstack elements, select the stack in the editor, then clich Unstack, or use the keyboard shortcut: Ctrl + + .

(Vertical): Add, remove, and reorder objects along the y-axis.

(Horizontal): Add, remove, and reorder objects along the x-axis.

(Wrap): Arrange objects in multiple rows and columns in a frame. Objects will flow horizontally and wrap to the next line.

Learn more about Constraints here
Inspector panel