Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
How can I create a drop-down under the add to cart so I can show my shipping and refund policy? I also want to add a size chart to each product page.
Hello @Kaliskloset
If you are using the Dawn theme, this option is available. Otherwise, follow the steps to create the feature:
1. Go to Online Store -> Theme -> Edit code.
2. Navigate to Snippet and add a new snippet named "Shipping-Return."
3. Paste the following code:
<style>
.container {
margin: 0 auto;
width: 48rem;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
border-bottom: 1px solid #03b5d2;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover,
.accordion button:focus {
cursor: pointer;
color: #03b5d2;
}
.accordion button:hover::after,
.accordion button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 5px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded='true'] {
color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
overflow-y: auto;
overflow-x: auto;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
}
</style>
<div class="container">
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false">
<span class="accordion-title">shipping Policy</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false">
<span class="accordion-title">Refund Policy</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false">
<span class="accordion-title">Size Chart</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
<img src="https://cdn.shopify.com/s/files/1/0661/1927/0613/files/Lysse_Size_Chart_600px.webp?v=1705566820">
</p>
</div>
</div>
</div>
</div>
<script>
const items = document.querySelectorAll('.accordion button');
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach((item) => item.addEventListener('click', toggleAccordion));
</script>
4. Find the main-product.liquid file and add the following line:
{%- when 'drop-down-menu' -%}
{% render 'Shipping-Return' %}
Screenshot:
5. Locate the schema and insert the following line:
{
"type": "drop-down-menu",
"name": "Accordion",
"limit": 1
},
screenshot:
6. Go to Online Store -> Theme -> Customize.
7. Select the default product. Add a block with the name "Accordion.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025