Overview
Shoppers expect product pages that are easy to scan and free of clutter. At the same time, brands need to share complete information, such as return policies and shipping times, to reduce avoidable customer service requests.
Accordions solve this by letting shoppers choose what they want to read and keep the rest collapsed. AfterShip Page Builder supports accordions in both the old editor and the new editor, and the setup steps differ slightly between the two.
This article explains how to add an accordion using either editor.
Old editor
In the old editor, accordions are added through the product detail content block.
Before you begin
Make sure you've already added a product detail content block to your page. Accordions are configured within this block.
Steps to add an accordion
Go your AfterShip Page Builder account and Open the page that contains your product detail content block.
In the product description section, select the Show radio button, then choose Accordion from the dropdown menu.
Choose the position of your accordion.
a. You can position it on the Right hand side of the product image below the CTA buttonb. You can position it below the product image and details at the Bottom.
Note: Accordion position can only be set for desktop view. On mobile, the accordion always appears at the bottom of the page.
Select Add block to add an accordion to the page. Repeat this step to add more than one accordion.
For each accordion block:
Enter a name in the Accordion header field.
Choose a description source: Shopify product description or Customize.
Tip: Select Customize to add information that isn't already in your Shopify product description. This is the best way to share extra details, such as policies or shipping timelines, without cluttering the main product description.
Select Save to publish your accordion blocks.
Once saved, your accordion blocks appear on the product detail page exactly where you positioned them.
New editor
In the new editor, accordions are added as a standalone section, whether you're building a page from scratch or starting from a pre-built template.
Steps to add an accordion
Open the page you want to edit, or create a new one.
In the page editor, select Add section directly on the preview page, then select Add a blank section.
Select Add elements, then choose Accordion from the list.
Configure the accordion under its two tabs:
Tab | What to do |
Settings | Select the checkbox if you want answers to expand by default. |
Blocks | Add your questions and answers.
|
5. Select Save and publish to make the accordion live on your page.
Manage accordion sections
Once an accordion section is on your page, you can:
Action | How to do it |
Reposition | Select the [::] icon and drag the section to where you want it on the page. |
Duplicate | Select the copy icon. |
Delete | Select the trash bin icon. |
Ideas for accordion content
Not sure what to put in your accordions? Think about what a shopper checks before buying, return policy, shipping time, and exchange terms are common ones. Here are three examples to get started:
Accordion | Header | Customized text |
1 | Return Policy | We have a 15-day return policy for all our products. Return requests are approved only if items are unused, undamaged, and in their original packaging. Shipping fees are non-refundable. |
2 | Shipping Time | Shipping time depends on the option selected at checkout: |
3 | Exchange Policy | We have a 30-day exchange policy for all our products. Exchange requests are approved only if items are unused, undamaged, and in their original packaging. |
Once set up, your accordion blocks will appear on the product detail page as expandable sections, giving shoppers a clean, organized view with details only a click away.
Need help?
If you have any questions, contact our chat support team for assistance.