Checkout Styles

Print Store checkout redesign features

1. Upgraded Print Store theme designs to support Bootstrap 4 open-source toolkit for developing with HTML, CSS, and JS.
2. Entire checkout developed on the Angular framework with well-established design standards shown below.
3. 4 step process with simple layout and design: Cart > Information > Shipping > Payment 
4. On desktop and larger landscape tablet devices, the pages contain two columns with a header. Most of the fields that customers need to fill in are on the left side, while an order summary appears on the right along with discount code fields.
5. On mobile, the design shifts to a one-column layout that retains the header.
6. By contrast, the order summary, as well as the discount field, are “hidden” in a collapsible panel, while most of the fields that customers interact with are displayed in the area below.
7. All input fields use custom label control to save space and make things clear
8. Contact information email input
9. Google Places API integration for optional autofill shipping address input
10. Clear shipping methods
11. The billing address can be the same as shipping address by default.
12. Clear payment methods: Credit Card, Invoice, PO, PayPal
13. Upgraded PayPal integration to support new standards and easier checkout
14. Final receipt page after checkout
15. Ability to customize checkout footer for things like refund policy, privacy policy, terms of service
16. Extra form options under Settings > Checkout Settings > Checkout Fields

What you can control on PrintNow checkout pages

1. Added Checkout Style page at Settings > Checkout Settings > Checkout Style
2. Logo: Here is your chance to include your brand’s primary element. Make sure your logo is clear and easy to see. Some store owners use this position to include a tagline, slogan or other messaging here. While this can be a good strategy — be sure to test how this looks and reads at all sizes.
3. Logo size: This option lets you select how big the logo is. Since “small” and “large” are somewhat arbitrary, it’s a good idea to test this setting as well.
4. Logo tagline: Ability to define the tagline that will show under the logo
5. Custom banner background: By default, the checkout doesn't use a top banner. When using a background banner size it to 1000x400px to fit best in all cases. 
6. Main content area background image: This image appears behind the main content area on the left and is another chance to integrate your look and feel. Keep in mind that form fields appear on top of this, so the image should be kept simple. This image will repeat both vertically and horizontally, so tiled options work better.
7. Main Background color: Select the background color for the left column if you don’t have a background image. In general, using a solid background color is a safer, cleaner way to go for checkout pages, unless you have a subtle pattern or texture that matches your brand.
8. Form fields: You can choose either white or transparent.
9. Order summary background image: You also have an option to include a background image behind the order summary column. Remember, keeping this image light and simple is best.
10. Order summary background color: Select the background color of the order summary area if a background image is not used.
11. Typography: You can choose the font for all headings and all body copy in the checkout. Unfortunately, there’s a limited number of fonts that can be used, unlike the advanced Shopify font picker.
12. Accent link and focus color: This color is used for links, highlights, and checkmarks in the checkout area. Pick a color that’s prominent in your brand and contrasts with any background images or colors.
13. Checkout buttons: The background color of the discount, and next step buttons. For legibility purposes, this color should be bold and high contrast.
14. Checkout purchase button: The background color of the final purchase button to stand out.
15. Errors color: This color is for warnings and invalid field errors which should also be prominent. Red is a common option, but if you’re using a dark background, it can be difficult to read.