Checkout Extensibility Upgrade AMA: Checkout Branding with Autrement

[Jacqui]

Let the experts at Shopify Plus agency Autrement show you how to build a checkout with reduced friction that looks and feels like your brand using apps, and the checkout and accounts editor. Watch the video, and ask the team at Autrement any follow up questions you may have in the AMA thread below.

Interested in working with Autrement? Email [email protected] 

This AMA will be open from July 22nd - 26th. We’ll aim to answer questions within a 24-hour window, though we can’t guarantee that every question will be answered.

Rules of engagement:

We’ll do our best to follow up on every question during the event.

• You must be logged into your account on Community to participate.
• Assume positive intent with one another and be kind. Some users may be new and learning how to engage with the Community. 
• Be authentic and honest with your questions and answers.
• Do not ask for or share store admin login details or passwords.
• Like posts and threads that are of interest or helpful to you.
• Be constructive with criticism, not offensive.
• Share your experiences and insights whenever you can to support others. 
• Abuse, harassment, and spam content won’t be tolerated.

Check out our other Checkout Extensibility AMA's

[TheBarn]

Great video. I have some questions for Checkout styling.

Question 1 : Thumbnails

In checkout liquid we have been able to style the order summary thumbnails. There are many stores with non-square product images so we have updated styling to support rectangle images. We have also been able to load higher quality images as the default images are a bit low rez.

Shopify does not display rectangular thumbnails very well by default.

EG

VS

So far we have not seen an option in the apps or anything in the GraphQL spec to style the thumbnails beyond the changing the border.

Is there a way to do this in the new checkout system?

Question 2 : Font weights

Using Checkout blocks app, setting the font weights does not appear to show in the UI, is there a trick to getting this to work?

Any tips greatly appreciated!

[TheBarn]

We've solved the font weights issue. It works on the "live" view/preview, the fonts just don't show correctly in the theme customizer.

[blanklob]

Hey, thanks for watching the video. I hope it answered some of your other questions.

Question 1 : Thumbnails

Regarding the thumbnails, indeed right now there is no way on both the app or even on the API level to choose our own aspect ratio or change it from square to portrait, for example. Have you tried using section styles and removing the borders? Since the image is not square, you have extra background padding showing below the image. To remove it, we can create a section style with the same background color but instead select subdued background. This will generate a background color the same as the padding below the image and give you that portrait aspect ratio. However, the image might be small.

1. Go to checkout blocks order summary section
2. Create a styles section, and add some padding and background color of your choice. 
3. Choose subdued background. [Screenshot]
4. Remove the border in the product thumbnails section. Lastly, you get something like this [Screenshot]

Question 2 : Font weights

For font weights, it's a minor issue with the checkout editor; weights load properly on the main preview, like you said. Thanks.

[bansavagemyntr]

What's the best way to add custom fonts as Shopify's Checkout Blocks custom font upload is broken and no there is no estimated fix timeline?

[blanklob]

Hey, if Checkout Blocks font picker fails, I would recommend using the GraphQL Admin API to do so, I made a guide explainer video here, feel free to ask if you have more questions.

- Here are some ressources from video:

- Checkout Branding Mutation.
- Query all checkout profiles
- Query all generic files (Including font, you can also filter by file type (woff or woff2)

[ReavoEnd]

Hi! Many of our product images are not square, and/or have transparent backgrounds. With our existing setup (checkout.liquid), we set our product thumbnails to have a white background. However, I cannot see any method in the GraphiQL Admin API nor the checkout editor which would enable me to set specifically the product thumbnail's background color. Am I missing something?

One more question: I have several feature requests for the checkoutBrandingUpsert API endpoint, as there are some things we would like to style but have no option for. Is there a good place to post or share those requests/suggestions?

[blanklob]

Hey, regarding the product thumbnail question, I already answered above will paste answer here:

Right now there is no way on both the app or even on the API level to choose our own aspect ratio or change it from square to portrait, for example. Have you tried using section styles and removing the borders? Since the image is not square, you have extra background padding showing below the image. To remove it, we can create a section style with the same background color but instead select subdued background. This will generate a background color the same as the padding below the image and give you that portrait aspect ratio. However, the image might be small.

1. Go to checkout blocks order summary section
2. Create a styles section, and add some padding and background color of your choice. 
3. Choose subdued background. [Screenshot]
4. Remove the border in the product thumbnails section. Lastly, you get something like this [Screenshot]

For Feature requests, I would recommend either sharing with your Shopify account manager, or in Github via this repo.

[Jacqui · Accepted solution]

AMA CLOSED

Thank you to all who participated in this AMA for Checkout Extensibility! No new questions will be accepted moving forward. 

The Autrement team will continue to respond to questions already asked as they are able, but some questions might not be answered. If your question goes unanswered you're welcome to post on our Shopify Plus board or our one of our other discussion boards.

Make sure you check out our Checkout Extensibility Upgrade board which has many FAQs and docs to help your business with the August 13th upgrade deadline.