Theme Settings

Explore the Theme Settings, your hub for comprehensive global customization options that define the overall aesthetic and functionality of your online store.


1. Layout
Page Width
  • Description: Adjust the width of the entire page.
  • Settings: Slider to set the width in pixels (px).
  • Default: 1340 px.
Rounding
  • Button Corner Radius: Adjust the roundness of button corners.
  • Input Corner Radius: Adjust the roundness of input fields.
  • Block Corner Radius: Adjust the roundness of blocks.
  • Menu and Drawer Radius: Adjust the roundness of menus and drawers.
  • Settings: Sliders to set radius in pixels (px).
2. Colors
Schemes
  • Description: Predefined color schemes for the website.
  • Settings: Choose from available schemes or add a new scheme.
Drawer
  • Color Scheme: Choose a color scheme for the drawer.
  • Settings: Dropdown menu to change the scheme.
3. Typography

Updated Typography settings after Flawless 10.0

Heading Text (H1 to H5)

You can now individually customize the appearance of each heading level (from Heading 1 down to Heading 5) to create a perfect visual hierarchy.

  • Font Choice: Pick the exact font that defines your brand's personality for all headings.
  • Precise Font Size (px): Unlike body text, headings allow you to set an exact pixel size for total design control (e.g., setting Heading 1 to 40px and Heading 2 to 32px).
  • Line Height: Adjust the vertical spacing between lines of text to ensure multi-line headings look clean.
  • Letter Spacing: Fine-tune the horizontal space between characters (measured in %) to create a more modern or airy feel.
Body Text

The body text settings are designed to keep your site's reading experience consistent across all pages.

  • Font Selection: Choose a highly readable font for your main product descriptions and blog content.
  • Font Size Scale (%): To maintain professional proportions throughout your site, body text uses a scale system. Increasing this percentage will grow all body text proportionally.
  • Line Height & Letter Spacing: Just like headings, you can adjust the breathing room within your paragraphs for maximum legibility.

Button Text

Ensure your "Call to Action" buttons stand out and are easy to read.

  • Custom Font: You can choose a specific font for your buttons to make them distinct from your body or heading text.
  • Specific Sizing (px): Set a fixed pixel size (e.g., 16px) to ensure your buttons remain a consistent, clickable size across your store.
  • Spacing Controls: Adjust line height and letter spacing to perfectly center and frame your button labels.
4. Currency Format
Currency Codes
  • Show Currency Codes: Option to always show currency codes (e.g., $1.00 USD).
  • Settings: Checkbox.
5. Animation
Enable Animation
  • Description: Toggle animations on the website.
  • Settings: Checkbox.
Slide Duration
  • Description: Adjust the duration of slide transitions.
  • Settings: Slider to set duration in milliseconds (ms).
  • Default: 600 ms.

6. Social Media
Links
  • Description: Add or search for social media links.
  • Platforms: Facebook, X (formerly Twitter), Pinterest, Instagram, TikTok, LinkedIn, Tumblr, Snapchat, YouTube, Vimeo.
  • Settings: Input fields for each platform.
7. Product Card

Image source

  • Featured image : The card will always show the main "cover" photo you’ve set in your Shopify admin.
  • Selected variant image : The card will automatically display the image tied to the first available variant (like the first color or size option image).
Show Vendor
  • Description: Display the vendor name on product cards.
  • Settings: Checkbox.
Show Secondary Image on Hover
  • Description: Display a secondary image when hovering over a product.
  • Settings: Checkbox.
Show Quick View
  • Description: Enable quick view for products.
  • Settings: Checkbox.
  • Quick Buy Button: Options for quick buy button style (Stacked, Overlay, None).
Show Quick View
  • Description: Show quick Buy for products.
  • Settings: Checkbox.
Show Product Rating
  • Description: Display product ratings.
  • Settings: Checkbox.
Image Ratio

Description: Set the image ratio for product images.

  • Settings: Dropdown menu (Square, Custom).
Image Fit
  • Description: Adjust how the product image fits within its container.
  • Settings: Options for Contain or Cover.
Offer Text
  • Show Offer Text: Display text for offers.
  • Settings: Checkbox.
  • Image Background Color: Color code for the background.
  • Offer Text Color: Color code for the offer text.

Discount Format

  • Product card discount text format and text color can be choosed
8. Badges

Badges are a great way to highlight important details about your products like sales, stock status, or custom messages. Here’s how you can set them up:

Position: Choose where you want your badges to appear—like Top Left, Bottom Right, etc. Pick the position that works best for your design.
Sale Badge

  • Show Sale Badge: This option lets you display a badge for items on sale. You can show it on the product card, product page, or in the quick view.

    Settings: Just check the box to enable this badge.

  • Sale Badge Type: Choose how you want to show the sale—by showing the discount percentage, the saved amount, or simply marking it as “Sale.”
  • Background Color: Choose the background color for your sale badge to make it stand out.
  • Text Color: Pick a color for the text on your sale badge to match your branding.
  • Enable Animation : Turns on a subtle, eye-catching animation for the badge. When enabled, the badge will have a slight movement to instantly capture the customer's attention as they scan the product listing. Use this feature to emphasize your most time-sensitive or important deals!
Soldout Badge
  • Show Soldout Badge: This badge will show up for products that are out of stock. You can display it on the product card, product page, or quick view.
  • Background Color: Choose the background color for the sold-out badge to match your store's style.
  • Text Color: Pick the text color for the sold-out badge so it stands out clearly.
Custom Badge
  • Background Color: Choose a color for the background of your custom badge.
  • Text Color: Pick the text color to make the message on your badge pop.
  • Tag: Enter the text you want to appear on your custom badge, like “Limited Edition” or “New Arrival.”
  • Enable Animation : Turns on a subtle, eye-catching animation for the badge. When enabled, the badge will have a slight movement to instantly capture the customer's attention as they scan the product listing. Use this feature to emphasize your most time-sensitive or important deals!

Note: The custom badge will only appear if the tag is set in the product’s admin panel. Only two badges can appear at once. If both the sale or sold-out badges are enabled, they’ll take priority over the custom badge and appear first.

9. Search
Enable Predictive Search Results
  • Description: Control predictive search results.
  • Settings: Checkbox.
Products
  • Show Price: Display product prices in search results.
  • Settings: Checkbox.
Article
  • Show Image: Display article images in search results.
  • Show Author: Display article authors.
  • Show Title: Display article titles.
  • Show Date: Display article dates.
  • Show Content: Display article content.
  • Settings: Checkboxes for each option.


10. Cart
Cart Type
  • Description: Choose between a cart page or drawer.

  • Settings: Radio buttons (Page, Drawer).


Enable Pop-Up Notification

When this toggle is ON, a mini pop-up shows every time a product is added to the cart (like the brown box in your screenshot!). This confirmation helps customers know their item was added — without disrupting their browsing.

It includes:

  • Product thumbnail
  • Title, color, and size
  • Quick actions like View Cart or Checkout
Show Variant Name

"Displays the exact color/size your customer picked in popup"

No more confusion about selections

• Essential for products with options
Success Message Color Changes the 'Added!' text color to match your popup background, Makes confirmations feel on-brand
Empty Button Link
  • Description: Set the link for the empty cart button.
  • Settings: Input field to paste a link.
Dynamic Checkout Buttons
  • Description: Show dynamic checkout buttons.
  • Settings: Checkbox.
Show Product Vendor
  • Description: Display the vendor name in the cart.
  • Settings: Checkbox.
Show Order Note
  • Description: Allow customers to add order notes.
  • Settings: Checkbox.

Discount Code & Badge Settings

We’ve added some new features to help make discounts easier and more eye-catching in your cart and cart drawer! 🎉

Show Discount Code

Turn this on, and your customers will see a little box in the cart where they can enter their discount code right away.

No more waiting until checkout — they’ll instantly know their savings! 💸
Discount Badge Appearance

Want your discount badge to match your store’s style? You can now customize it:

  • Background color → Sets the badge’s background. Make it pop with a bright color ✨ or keep it soft and subtle 🎨.
  • Text/Icon/Border color → Controls the color of the badge text, icons, and border. Use your brand colors or choose something bold so it stands out.
Free Shipping Bar
  • Description: Show a progress bar for free shipping.
  • Settings: Input fields to set minimum amount and configure text colors.
  • Free Shipping Minimum Amount: Set the minimum amount for free shipping.
  • Text & Bar Color: Color code for text and bar.
  • Background Color: Color code for the background.
11. Favicon
Image
  • Description: Set an image for the favicon.
  • Settings: Upload or select an image (32x32 px recommended).
12. Advanced
Show back to Top
  • Description: Enable a scroll to top button.
  • Settings: Checkbox and options to set button position (Left, Right).
  • Arrow Color: Color code for the arrow.
  • Background Color: Color code for the button background.
13. Custom CSS
Custom Styles
  • Description: Add custom CSS styles for the entire online store.
  • Settings: Text area to input custom CSS code.
  1. Change theme style
  • Option used to change your theme style
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.