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
  • Add an element to the section
  • Add a background to the section
  • Change the section size
  • Change the section size
  • Change the section container width

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Pages

Edit a Section

PreviousPage settingsNextAdd a Section

Last updated 7 months ago

Was this helpful?

Sections let you structure your content clearly and effectively.

Once you've you want, edit it however you want.

Add your own unique flair, including background changes, size adjustments, and additional elements.

Add an element to the section

Steps:

  1. On the Left Sidebar, click Add elements ()

  2. Select a category > the element type you want to add to the section

  3. Drag and drop the element to the section.

Add a background to the section

Transform the look and feel of your sections with a variety of background options. Choose a color for a clean aesthetic or add visual interest with an image or video.

Steps:

  1. Click the section in your editor or in the layers panel to open the Inspector of the section.

  2. In the Design tab, click Backgrounds.

  3. Select the option you want to apply to your section for a unique touch:

  • Video: Upload and add your own video to the background

  • Image: Upload and add your own image to the background

  • Color: Select a color from the picker. You can choose a solid, linear or radial color.

In More settings, you can find more options to adjust different properties of the background.

See details

Background attachment

  • Fixed: The background image stays fixed no matter what.

  • Scroll: The background image scrolls with the main view, but stays fixed inside the local view.

  • Local: The background images scroll with the element's content.

Background size

The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

  • Auto: Default value. The background image is displayed in its original size.

  • Contain: Resize the background image to make sure the image is fully visible.

  • Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency.

Background repeat

The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

This setting works with Auto and Contain background size.

  • Repeat: tile the image in both directions

  • Repeat x: tile the image horizontally

  • Repeat y: tile the image vertically

By default, the background image is set as no repeat.

Background position

This setting allows you to move your background image around within its container.

There are 9 options to place your background image:

  • Top left/ top center/ top right

  • Middle left/ middle center/ middle right

  • Bottom left/ bottom center/ bottom right.

You can quickly change the color used as your section background by clicking on the section > quick actions bar.

Change the section size

Change your section size and container width anytime to fit your desire.

Change the section size

Steps:

  1. Click on the section in the editor.

Change the section container width

Section container is used to control the alignment of its content.

Steps:

  1. Click on the section in the editor.

  2. In the Inspector panel of the section > General tab > Container setting:

  • Fixed width: set the section width as in Theme settings > Layout.

  • Full width: set the section to always full to the screen.

  • Custom width: give a custom container width to the section between 800 - 1600 px.

You can quickly change your section width to either Fixed width/Full width by clicking on the section > quick actions bar.

The background-attachment property in CSS sets whether a background image's position is fixed within the , or scrolls with its containing block.

Still not sure how the three values work? Check out this .

Click and drag the Adjust section height handle at the bottom of the section to make it taller or shorter.

viewport
demo
added the section