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
  • Typography
  • Layout
  • Spacing
  • Sizing
  • Background
  • Background color
  • Background image
  • Borders
  • Effects
  • Custom CSS

Was this helpful?

  1. Basic editor
  2. Page Editor

Styles settings

In this article, you'll learn about the Styles settings tab of Foxify.

PreviousGeneral settingsNextSections & Presets

Last updated 7 months ago

Was this helpful?

This article will walk you through common Foxify Styles options that you can find in most elements.

Typography

In this dropdown, you can edit and customize the text-related settings of the element.

  • Choose your preferable font from a variety of options:

  • Adjust an element's font weight, color, size, line height, and text alignment with ease.

  • Click More settings to set the text's letter spacing, transformation (uppercase, Title case, lowercase), style (regular/italic) and decoration.

Layout

Quickly fine-tune your content layout by selecting the option Enable auto layout.

Use the Wrap children option to wrap to additional lines when they no longer fit on the initial line.

  • The element(s) that don't fit will wrap to the bottom-left in the parent element.

Spacing

With Foxify, control of the element's margin and padding is easy.

Margin and padding create spacing around your content and elemen.

Margins create extra space around the element, while padding pushes the content deeper inside the element border.

You can decide to use the same value for all four dimensions: top, right, bottom, and left, or adjust them separately.

You can also select the size unit you want to use: px, rem, or em. Want to know more about these measurement units? See this article:

Sizing

In this setting, you can change the section width and height of the element.

The recommended size for each element is already filled in the field.

You can also click on the image and drag it to resize directly.

If you decide on using dimensions to your liking, remember to double-check to make sure the new dimensions work out across different devices.

To create a customized experience for shoppers, click on the device selector icon to set the dimensions on different screen sizes.

The More settings button allows you to set the minimum and maximum values for the selected element width and height.

Similar to spacing, both px, rem, or em are available.

Background

Background color

Background image

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

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.

For example: the image we're using is 1000 x 512 px, jpg. format.

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.

For example: the image we're using is 250 x 200 px, jpg. format.

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

Borders

You can add and adjust the element's border in Styles settings.

Border style: Choose from 3 available styles: Solid line, Dotted line, and Dashed line. By default, an element is set as no border.

Border color

  • Choose from the color palette or use a hex color code.

This section also allows you to control the width of the border and its roundness using Border width and Border radius settings.

Effects

This section is for modifying the opacity of the whole section. Simply tweak the toggle to adjust it.

Custom CSS

Changes you made in Styles settings will be shown here.

You can edit the CSS code in Custom CSS and the changes will be reflected in the settings.

Here is one example:

The Background section lets you change the element's background using a or an .

Choose from your predefined colors list in .

Select a color from the color palette or input a .

Click on Select image to use an image as a background. You can select one from existing images (in your ), free images, or upload a new image.

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 .

Select from predefined .

Should I use Pixel, Rem, or Em?
Global styles
hex color code
Shopify Files
viewport
demo
color
image
global styles colors
An example of Background size: Auto
An example of Background size: Auto
An example of Background size: Auto
✨
Explore FoxEcom Affiliate program perks now