Please help! How do I get this exact same as Kids One Store? The buy buttons and the icons below?

Topic summary

A Shopify store owner using the Focal theme wants to replicate the product page layout from Kids One Store, specifically matching the buy button styling and icon arrangement below it.

Solutions Provided:

Two community members offered CSS-based solutions:

  • devcoders suggested adding CSS to assets/theme.css using flexbox to create equal-width buttons with consistent height (50px)
  • DaisyVo recommended inserting custom styles in theme.liquid above the </head> tag, setting the “Add to Cart” button to 60% width and 52px height

Current Status:

The original poster confirmed one solution works but requested a refinement: making both buttons exactly equal in size to match the reference store. The discussion remains open with this adjustment pending, as the poster duplicated their follow-up request asking for equal button sizing.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Please help! How do I get this exact same as Kids One Store? The buy buttons and the icons below? I use Focal theme.

Kids One Store: https://kidsonestore.se/products/kavat-vemdalen-vinterkanga-taupe
My website: https://dhkvex-ak.myshopify.com/

1 Like

Hello @Williamtommy

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.

.product-form__payment-container {
display: flex;
gap: 10px;
justify-content: space-between;
}

.product-form__add-button,
.shopify-payment-button__button {
flex: 1;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
text-align: center;
}

1 Like

Hi @Williamtommy

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
product-payment-container {
    display: flex !important;
}
button#AddToCart {
    height: 52px !important;
    width: 60%;
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like

Hi thank you so much it works and looks perfect! But could you just make the buttons about the same equal size? :slightly_smiling_face:
Exactly same as Kids One Store: https://kidsonestore.se/products/kavat-vemdalen-vinterkanga-taupe

Hi thank you so much it works and looks perfect! But could you just make the buttons about the same equal size? :slightly_smiling_face:
Exactly same as Kids One Store: https://kidsonestore.se/products/kavat-vemdalen-vinterkanga-taupe