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/
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:
assets/theme.css using flexbox to create equal-width buttons with consistent height (50px)theme.liquid above the </head> tag, setting the “Add to Cart” button to 60% width and 52px heightCurrent 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.
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/
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;
}
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.
Hi thank you so much it works and looks perfect! But could you just make the buttons about the same equal size? ![]()
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? ![]()
Exactly same as Kids One Store: https://kidsonestore.se/products/kavat-vemdalen-vinterkanga-taupe