Git Product home page Git Product logo

shopify-checkout-customizer's Introduction

User-Configurable Shopify Checkout CSS

Enhanced Responsive Checkout Settings

These files constitute a reset for and enhancement of the new Shopify Responsive Checkout styles, to provide configuration of fonts, colors and layout via Shopify's Theme Settings admin panel.

Before attempting the customizations below, ensure that you have upgraded to Shopify's Responsive Checkout

Unleashed Options

  • Base Font Size : Insert a value that matches your shop's general configuration
  • Border Style : Border Radius Border Radius values for inputs and buttons
  • Desktop View: Max width Insert a value that matches your shop's general configuration
  • Desktop View: Padding Value for the External Wrap configure the outermost padding value
  • Wrap Background Color
  • Center Header Elements : Choose between a center-aligned layout or a left-aligned one
  • Different Background Colors for Header, Main and Footer Area
  • Header Padding
  • Header Margin
  • Shop Name ( Company Logo ) Choose between uploading a custom Image or using plain text
  • Shop Logo Image : max width
  • Shop Name Text Color (In the case no image is used for the Shop Logo)
  • Header background : Choose between using a custom image (repeating and seamless motif) or using a flat color as a background for the header area
  • Custom Header Background Image
  • Header Background Color
  • Tagline Add an explanatory/prompt line on the header
  • Tagline Color
  • Tagline Font Size
  • Headings Color
  • Headings Text Transform
  • Headings Padding
  • h1 + h2 font Size
  • h3 + h4 Font Size
  • h5 + h6 Font Size
  • Main Background Color
  • Section Border Color : separating the distinct section between customer info, shipping and billing
  • Label Color
  • Placeholder Color
  • Fieldset Background Color
  • Fieldset Border Color
  • Field Focus Color
  • Field Padding
  • Field Error : Background Color
  • Field Error : Text Color
  • Field Error : Label
  • Field Error : Placeholder
  • Order Summary : Background colorfill
  • Order Summary : Text Color
  • Order Summary : Border Color
  • Price Color
  • Price Font size
  • Currency Color
  • Currency Background Color Fill
  • Currency Font Size
  • Button Font Size
  • Button Padding
  • Button Text Transform
  • Button Focus : Background Color
  • Button Focus : Text Color
  • Inset Checkout Buttons : Changes section, discount and gift card button
  • Inset Buttons Font Size
  • Inset Buttons Top Position
  • Inset Buttons Padding
  • Inset Buttons : Background Color
  • Inset Buttons : Color
  • Inset Buttons : Hover State Background Color
  • Inset Buttons : Hover State Color
  • Footer Text Transform
  • Footer Link Separator : Add a symbol that you wish to be displayed in-between the footer's navigation links (e.g. "|")
  • Footer Top-border Color
  • Footer Font Size
  • Footer Padding
  • Footer Text Color
  • Footer Background Color Fill
  • Footer Wrap Background Color
  • Footer Link Color
  • Footer Link Hover Color
  • Custom CSS area

Usage

  • Place contents of assets folder to your Shopify theme. checkout.scss.liquid will reset the native SCSS file that Shopify delivers. (This action will ONLY affect your checkout pages)
  • Copy the new nodes from config/settings_schema.json into your own theme settings file of the same name. (This action will substitute the default Checkout tab)

Compatibility

Made to seamlessly integrate with Tricky3eme and will work on any other Shopify theme too.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.