Re: Edit the looks of dynamic checkout buttons

Solved

Edit the looks of dynamic checkout buttons

TrendBlend
Trailblazer
315 0 33

Hello, I'm currently having a problem with dynamic checkout buttons (fast payment options like PayPal, Google Pay and Apple Pay). I have all those 3 enabled, I have had contact with shopify support about this aswell. My theme is DAWN and URL: Je winkelwagen – TrendBlend

 

So I want the dynamic checkout buttons to show in the cart under the green 'Afrekenen' button which means pay.

tbfout.jpg

^ On phone at checkout it currently looks like this which is perfect! All 3 dynamic payment buttons show next to each other and it just looks good.

 

d8ebe017-63c4-4c7a-9dab-302e97f935b1.png

^ Then on desktop it looks like this, because it is not an iOS laptop which is also good.

 

IMG_2413.jpg

^ But I'm having a problem in the cart with dynamic checkout buttons. They currently show like this on mobile phone. So the PayPal button is missing and PayPal is enabled as a payment method and is shown at checkout so it should actually show. I don't know why it is not showing. And I'm also having a problem with dynamic checkout buttons on desktop, on desktop Google Pay is the only dynamic checkout button showing. So Apple Pay is missing because the device is not iOS, but Paypal is missing once again... And again PayPal, Google Pay and Apple Pay are all enabled for checkout options. They also work on mobile phone so the problem is not that they are not enabled for checkout options, I think something in the design is messed up or something? If you know how to fix it please let me know! Thanks in advance

Schermafbeelding 2024-06-20 121118.png

 

Accepted Solutions (2)

BSSCommerce-TA
Shopify Partner
124 24 24

This is an accepted solution.

Hi @TrendBlend

I still see the Paypal button element present in the html document. That means your payment settings probably aren't the problem. I think maybe the Paypal button not showing up is caused by one of the applications you installed. Try closing all applications and re-visiting the shopping cart page to see how it goes. If the Paypal button appears, try re-enabling all applications and then disabling them one by one to see which application is causing the problem. If the above solution still does not work, can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

BSSCommerceTA_0-1718985917117.png

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-TA
Shopify Partner
124 24 24

This is an accepted solution.

Hi, @TrendBlend. You can follow these steps: 

 

Step 1: Access the theme editing section

In the admin panel, select "Online Store" from the left navigation bar. In the "Themes" section, you'll see your store's current theme. Click the "Customize" button to open the customization interface.

 

Step 2: Open the theme source code editor

In the top right corner of the Customize page, you'll see a button with a three-dot icon (⋮). Click on it. Select "Edit code" from the drop-down menu.

 

Step 3: Edit source code

The source code editor will open, allowing you to edit the theme files. Since you said your theme is "Dawn", select the "base.css" file and paste the CSS code below at the top:

 

#dynamic-checkout-cart ul {
    display: flex;
    flex-direction: row !important; /* Arrange list items horizontally */
    justify-content: space-between; /* Distribute the space evenly between items */
    padding: 0; /* Remove default padding of ul */
    margin: 0; /* Remove default margin of ul */
    list-style: none; /* Remove bullet points of ul */
    gap: 10px; /* Space between list items */
}

#dynamic-checkout-cart ul li {
    flex: 1; /* Make all list items the same size */
}

 

 

Step 5: Save changes

Click the "Save" button in the top right corner to save your changes.

 

The result will look like this: 

BSSCommerceTA_0-1719036591467.png

 

If you have any more questions, don't hesitate to ask us. 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 5 (5)

BSSCommerce-TA
Shopify Partner
124 24 24

This is an accepted solution.

Hi @TrendBlend

I still see the Paypal button element present in the html document. That means your payment settings probably aren't the problem. I think maybe the Paypal button not showing up is caused by one of the applications you installed. Try closing all applications and re-visiting the shopping cart page to see how it goes. If the Paypal button appears, try re-enabling all applications and then disabling them one by one to see which application is causing the problem. If the above solution still does not work, can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

BSSCommerceTA_0-1718985917117.png

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
TrendBlend
Trailblazer
315 0 33

Hello, you were right it was an app causing the problem. But I would still like to make the Apple Pay visible for other devices than only IOs devices, do you know if this is possible? Because it currently does not look good there is still space next to the two buttons and it would look nice if Apple Pay just shows. Kind regards, Stef

TrendBlend
Trailblazer
315 0 33

@BSSCommerce-TA And do you maybe know if I can make the dynamic checkout buttons on the cart page to be next to each other like this (on checkout page)

00E50F7D-BB6A-4894-93A8-C34582EE1CF7.png

 it currently looks like this on the cart page but I think the buttons at the blue parts look good

64034C0E-E0C8-4C07-91D9-74EBA1C9147E.jpeg

BSSCommerce-TA
Shopify Partner
124 24 24

This is an accepted solution.

Hi, @TrendBlend. You can follow these steps: 

 

Step 1: Access the theme editing section

In the admin panel, select "Online Store" from the left navigation bar. In the "Themes" section, you'll see your store's current theme. Click the "Customize" button to open the customization interface.

 

Step 2: Open the theme source code editor

In the top right corner of the Customize page, you'll see a button with a three-dot icon (⋮). Click on it. Select "Edit code" from the drop-down menu.

 

Step 3: Edit source code

The source code editor will open, allowing you to edit the theme files. Since you said your theme is "Dawn", select the "base.css" file and paste the CSS code below at the top:

 

#dynamic-checkout-cart ul {
    display: flex;
    flex-direction: row !important; /* Arrange list items horizontally */
    justify-content: space-between; /* Distribute the space evenly between items */
    padding: 0; /* Remove default padding of ul */
    margin: 0; /* Remove default margin of ul */
    list-style: none; /* Remove bullet points of ul */
    gap: 10px; /* Space between list items */
}

#dynamic-checkout-cart ul li {
    flex: 1; /* Make all list items the same size */
}

 

 

Step 5: Save changes

Click the "Save" button in the top right corner to save your changes.

 

The result will look like this: 

BSSCommerceTA_0-1719036591467.png

 

If you have any more questions, don't hesitate to ask us. 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
TrendBlend
Trailblazer
315 0 33

Thank you 🙂