Under the “add to cart” text like “Easy 30-Day Returns” and “Fast Shipping” in same line. It should be in a window- the window with light background grey or reddish color so it is visible. In front the both texts there should be badges so for the returns the twisted arrow back and for the shipping some truck lets say. Can someone create that?
Topic summary
Goal: Create a styled benefits section below the Add to Cart button featuring “Easy 30-Day Returns” and “Fast Shipping” with icons, displayed in a colored background box.
Solution Provided:
- Add an HTML/CSS code snippet via Theme Customizer → Product Page → Custom Liquid block
- Code includes flexbox layout with emoji/SVG icons and light grey background
- Alternative suggestion: Use Shopify’s AI-generated theme blocks feature (2025)
Implementation Challenges:
- Initial confusion about where to add code in the theme editor (resolved: Shopify recently updated the editor interface)
- User successfully implemented the code but found the design “childish” and not premium enough for an adult fashion brand
- Specific concerns: excessive spacing, insufficient width, icons/styling don’t match desired aesthetic
Current Status:
- User seeking design refinements to achieve a more premium, trustworthy look
- Reference image shows desired bordered container with full-width layout
- Latest code iteration includes SVG icons and border styling, but further customization needed to match reference design
1 Like
Hi @Jim3 ,
You can achieve this in Shopify by adding a small HTML/CSS snippet (and optionally SVG icons for the badges) below your Add to Cart button.
Go to theme > customize > product page > add liquid block after add to cart button and paste below code on it.
<div class="pdp-benefits">
<div class="benefit">
<span class="icon">🔄</span>
<span class="text">Easy 30-Day Returns</span>
</div>
<div class="benefit">
<span class="icon">🚚</span>
<span class="text">Fast Shipping</span>
</div>
</div>
<style>
.pdp-benefits {
display: flex;
gap: 15px;
background-color: #f8f8f8; /* light grey background, can use #ffe5e5 for light red */
padding: 10px 15px;
border-radius: 8px;
margin-top: 15px;
justify-content: flex-start;
}
.pdp-benefits .benefit {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #333;
}
.pdp-benefits .benefit .icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background-color: #fff;
border-radius: 50%;
padding: 5px;
width: 28px;
height: 28px;
}
</style>
1 Like
Hi @Jim3
Just simple use the AI-generation theme block from Shopify 2025 feature How to Create AI-Generated Theme Blocks with Shopify Magic (Summer 2025 Edition) - Bify
It will automatic generate any your requirement easy
1 Like
Hi, @oscprofessional
I basically can’t understand where exactly should I add the code? Is it somewhere here where I shown on the screenshot?
Hi, @BiDeal-Discount
Is weird but as you see on my screenshot, there is no option to “add new section” in my theme code menu as shown in the link you gave me.
Maybe I can try to connect with Shopify support and ask them where is that thing..?
It’s the first icon on your theme name “Updated Copy of Impulse”
1 Like
Look when on the video are pressing the “add ne section” they get this window with the option to choose the type of file.. But if you talk about the first item which I put in circle on the second screenshot then it is not giving anything like that..
HI @Jim3
Image from the video is from some time ago with old editor. New one now everyone has and to add a new file, you do, like you showed on the second screenshot:
- select folder first
- click on file+ icon
- give a proper name (ai-block-genreated.liquid), do not forget .liquid
- copy code
- save file
1 Like
Hey Shopify recently change the theme editor, my post created before that so it maybe different
@Laza_Binaery and @BiDeal-Discount Okay guys, thank you so much. You are correct and I made it, but the problem now is that I can’t add the created window under the Add To Cart…
And also I dont like the design of it. It doesn’t look premium…
Some other ideas?
Sorry I missed a point, just focused on editor 
You do not need a section, but a block inside the main product section.
But as @oscprofessional said, you can maybe use an “HTML block” in the Impulse theme and add that block to section where you want. Inside that HTML block, copy the same code.
You could also try to edit main product section add one more block option with a few (image/svg plus text items). And that would require custom code. And for Premium design, find some online and make similar.
@Laza_Binaery and @oscprofessional I actually made it! Thanks. Here is how it looks. Unfortunately it doesnt look premium, sleek. It looks very childish and the type of vibe which I am trying to create is of a adult fashion brand. So with this desing is not working well. The size is big, not wide enough and is having a huge spacing between the Add To Cart and this section. Excuse me I don’t want to sound like someone with too high expectations but I just need the design to be trustful and premium. Some other ideas? Unfortunately the website I saw this at, it change it design and I cant show it to you right now..
It is a matter of choosing image or svg, for example
<div class="pdp-benefits">
<div class="benefit">
<span class="icon"><svg width="40" height="40" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path d="m850.78 540v-14.531l-2.2969-12.141-30.094-164.11h-436.78l-30.141 164.16-2.2969 12.141 0.046875 14.484v310.78h501.61zm-446.86-164.16h392.29l25.219 137.53h-442.74zm267.14 164.16v135.84l-71.062-28.547-71.062 28.547v-135.84zm153.1 284.16h-448.31v-284.16h126.37v175.22l97.781-39.141 97.688 39.141v-175.22h126.37v284.16z"/>
<path d="m405.71 768h77.625v26.625h-77.625z"/>
<path d="m509.39 768h77.766v26.625h-77.766z"/>
<path d="m612.94 768h77.766v26.625h-77.766z"/>
<path d="m716.53 768h77.625v26.625h-77.625z"/>
<path d="m196.55 387.94c9-16.922 19.219-33.703 30.703-49.922 77.062-108.14 196.69-177.24 328.22-189.37 28.688-2.625 56.297-2.625 84.938 0l2.3906-26.531c-30.375-2.7656-59.531-2.7656-89.859 0-139.22 12.844-265.78 85.922-347.53 200.39-10.312 14.625-19.547 29.625-28.078 44.766l-14.766-78.469-26.156 4.9219 24.141 128.06 128.06-24.141-4.9219-26.156z"/>
<path d="m1037.9 772.55-127.69 25.781 5.2969 26.156 86.859-17.531c-8.7656 17.062-18.844 33.938-30 50.391-75.703 109.22-194.39 179.63-325.78 193.45-14.391 1.5469-28.688 2.3906-42.469 2.5312s-28.078-0.23438-42.469-1.4531l-2.0625 26.625c13.219 1.0781 26.297 1.5469 38.859 1.5469h6c14.531-0.23438 29.625-1.0781 44.859-2.625 139.08-14.625 264.71-89.297 344.86-204.84 10.078-14.766 19.219-29.859 27.469-45.141l15.844 78.234 26.156-5.2969z"/>
</svg>
</span>
<span class="text">Easy 30-Day Returns</span>
</div>
<div class="benefit">
<span class="icon"><svg width="40" height="40" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path d="m1160.4 536.4-52.801-122.4c-19.199-44.398-62.398-73.199-111.6-73.199h-85.199v-31.199c0-25.199-20.398-46.801-46.801-46.801h-595.2c-18 0-31.199 14.398-31.199 31.199s14.398 31.199 31.199 31.199h577.2v230.4c0 28.801 22.801 51.602 51.602 51.602h207.6v145.2c0 6-4.8008 10.801-10.801 10.801h-38.402c-20.398-34.801-57.602-57.602-99.602-57.602s-79.199 24-99.602 57.602h-320.4c-20.398-34.801-57.602-57.602-99.602-57.602s-79.199 24-99.602 57.602h-110.4c-18 0-31.199 14.398-31.199 31.199 0 18 14.398 31.199 31.199 31.199h94.801c2.3984 61.199 52.801 110.4 115.2 110.4s112.8-49.199 115.2-110.4h289.2c2.3984 61.199 52.801 110.4 115.2 110.4 62.398 0 112.8-49.199 115.2-110.4h25.199c40.801 0 73.199-33.602 73.199-73.199v-168c0.007812-15.598-3.5938-32.398-9.5938-48zm-723.6 337.2c-28.801 0-52.801-24-52.801-52.801s24-52.801 52.801-52.801 52.801 24 52.801 52.801-24 52.801-52.801 52.801zm519.6 0c-28.801 0-52.801-24-52.801-52.801s24-52.801 52.801-52.801c28.801 0 52.801 24 52.801 52.801s-24 52.801-52.801 52.801zm-46.797-469.2h85.199c22.801 0 44.398 13.199 52.801 34.801l45.602 105.6h-183.6z"/>
<path d="m178.8 456h220.8c18 0 31.199-14.398 31.199-31.199 0-18-14.398-31.199-31.199-31.199h-220.8c-18 0-31.199 14.398-31.199 31.199s14.398 31.199 31.199 31.199z"/>
<path d="m120 576h220.8c18 0 31.199-14.398 31.199-31.199 0-18-14.398-31.199-31.199-31.199h-220.8c-18 0-31.199 14.398-31.199 31.199s14.398 31.199 31.199 31.199z"/>
<path d="m314.4 664.8c0-18-14.398-31.199-31.199-31.199h-222c-18 0-31.199 14.398-31.199 31.199 0 18 14.398 31.199 31.199 31.199h220.8c18 1.1992 32.398-13.199 32.398-31.199z"/>
</svg></span>
<span class="text">Fast Shipping</span>
</div>
</div>
<style>
.pdp-benefits {
display: flex;
gap: 15px;
background-color: #f8f8f8; /* light grey background, can use #ffe5e5 for light red */
padding: 10px 15px;
border-radius: 8px;
margin-top: 15px;
justify-content: flex-start;
}
.pdp-benefits .benefit {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #333;
}
.pdp-benefits .benefit .icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
padding: 5px;
width: 40px;
height: 40px;
}
</style>
1 Like
I see but is not much difference. Look at this screenshot of this website. Their thing is in a window.. I try to accomplish the same but of course not so thick one - Just less than half and also the both statement to be aligned in the both ends. Not finishing in the middle like now
Ok with border then
<div class="pdp-benefits">
<div class="benefit">
<span class="icon"><svg width="40" height="40" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path d="m850.78 540v-14.531l-2.2969-12.141-30.094-164.11h-436.78l-30.141 164.16-2.2969 12.141 0.046875 14.484v310.78h501.61zm-446.86-164.16h392.29l25.219 137.53h-442.74zm267.14 164.16v135.84l-71.062-28.547-71.062 28.547v-135.84zm153.1 284.16h-448.31v-284.16h126.37v175.22l97.781-39.141 97.688 39.141v-175.22h126.37v284.16z"/>
<path d="m405.71 768h77.625v26.625h-77.625z"/>
<path d="m509.39 768h77.766v26.625h-77.766z"/>
<path d="m612.94 768h77.766v26.625h-77.766z"/>
<path d="m716.53 768h77.625v26.625h-77.625z"/>
<path d="m196.55 387.94c9-16.922 19.219-33.703 30.703-49.922 77.062-108.14 196.69-177.24 328.22-189.37 28.688-2.625 56.297-2.625 84.938 0l2.3906-26.531c-30.375-2.7656-59.531-2.7656-89.859 0-139.22 12.844-265.78 85.922-347.53 200.39-10.312 14.625-19.547 29.625-28.078 44.766l-14.766-78.469-26.156 4.9219 24.141 128.06 128.06-24.141-4.9219-26.156z"/>
<path d="m1037.9 772.55-127.69 25.781 5.2969 26.156 86.859-17.531c-8.7656 17.062-18.844 33.938-30 50.391-75.703 109.22-194.39 179.63-325.78 193.45-14.391 1.5469-28.688 2.3906-42.469 2.5312s-28.078-0.23438-42.469-1.4531l-2.0625 26.625c13.219 1.0781 26.297 1.5469 38.859 1.5469h6c14.531-0.23438 29.625-1.0781 44.859-2.625 139.08-14.625 264.71-89.297 344.86-204.84 10.078-14.766 19.219-29.859 27.469-45.141l15.844 78.234 26.156-5.2969z"/>
</svg>
</span>
<span class="text">Easy 30-Day Returns</span>
</div>
<div class="benefit">
<span class="icon"><svg width="40" height="40" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path d="m1160.4 536.4-52.801-122.4c-19.199-44.398-62.398-73.199-111.6-73.199h-85.199v-31.199c0-25.199-20.398-46.801-46.801-46.801h-595.2c-18 0-31.199 14.398-31.199 31.199s14.398 31.199 31.199 31.199h577.2v230.4c0 28.801 22.801 51.602 51.602 51.602h207.6v145.2c0 6-4.8008 10.801-10.801 10.801h-38.402c-20.398-34.801-57.602-57.602-99.602-57.602s-79.199 24-99.602 57.602h-320.4c-20.398-34.801-57.602-57.602-99.602-57.602s-79.199 24-99.602 57.602h-110.4c-18 0-31.199 14.398-31.199 31.199 0 18 14.398 31.199 31.199 31.199h94.801c2.3984 61.199 52.801 110.4 115.2 110.4s112.8-49.199 115.2-110.4h289.2c2.3984 61.199 52.801 110.4 115.2 110.4 62.398 0 112.8-49.199 115.2-110.4h25.199c40.801 0 73.199-33.602 73.199-73.199v-168c0.007812-15.598-3.5938-32.398-9.5938-48zm-723.6 337.2c-28.801 0-52.801-24-52.801-52.801s24-52.801 52.801-52.801 52.801 24 52.801 52.801-24 52.801-52.801 52.801zm519.6 0c-28.801 0-52.801-24-52.801-52.801s24-52.801 52.801-52.801c28.801 0 52.801 24 52.801 52.801s-24 52.801-52.801 52.801zm-46.797-469.2h85.199c22.801 0 44.398 13.199 52.801 34.801l45.602 105.6h-183.6z"/>
<path d="m178.8 456h220.8c18 0 31.199-14.398 31.199-31.199 0-18-14.398-31.199-31.199-31.199h-220.8c-18 0-31.199 14.398-31.199 31.199s14.398 31.199 31.199 31.199z"/>
<path d="m120 576h220.8c18 0 31.199-14.398 31.199-31.199 0-18-14.398-31.199-31.199-31.199h-220.8c-18 0-31.199 14.398-31.199 31.199s14.398 31.199 31.199 31.199z"/>
<path d="m314.4 664.8c0-18-14.398-31.199-31.199-31.199h-222c-18 0-31.199 14.398-31.199 31.199 0 18 14.398 31.199 31.199 31.199h220.8c18 1.1992 32.398-13.199 32.398-31.199z"/>
</svg></span>
<span class="text">Fast Shipping</span>
</div>
</div>
<style>
.pdp-benefits {
display: flex;
gap: 15px;
background-color: #f8f8f8; /* light grey background, can use #ffe5e5 for light red */
padding: 10px 15px;
border-radius: 8px;
margin-top: 15px;
justify-content: flex-start;
}
.pdp-benefits .benefit {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #333;
}
.pdp-benefits .benefit .icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
padding: 5px;
width: 40px;
height: 40px;
}
</style>
1 Like