Accordion

Section + block documentation

What is an accordion?

An Accordion section or block displays stacked, expandable information tabs which can be used to display additional details, FAQs, step-by-step instruction, and more.

Accordions support multiple types of content: you can add and customize text, image, and/or video content; you can also dynamically import blog posts or pages directly into each block.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row with image

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row with video

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Available blocks

An Accordion section only has one available block: the Row block.

Accordion row blocks can be added toΒ AccordionΒ sections or to theΒ Product informationΒ section on product detail pages

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

This block is far from limited in its customizable options. Add text, images, and video, or some combination of this content.

You can also import Blog post/Page details directly into individual Row blocks.

Learn more about the Row block here ⟢

Section settings

In addition to a number of standard section settings, the accordion contains certain settings built to specifically serve the accordion section functions. These are outlined below.

Add and customize text, image, and or video content or import details from a blog post or page directly into each row block.

Show full width

To set the Accordion Row blocks and Header content to the full width of your page, set the Content position setting to Full width. Useful for sections with longer-form content, i.e. multiple paragraphs or images.

Accordion row

Accordion sections are more commonly used for easily consumable quantities of content,

The ability to add image or video along with relevant text to each individual Row block gives this section the potential to efficiently contain a substantial amount of content

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Enable sticky header

A checkbox to enable the "stickiness" of the header of the accordion section. If your accordion section has multiple rows, the heading will follow the scroll position of the visitor within the bounds of the section.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Block settings

Individual Row blocks, called Accordion blocks in other sections, can be added to Accordion, Featured product, andΒ Product informationΒ sections.

Show open by default

An accordion block can be open by default by checking the Show open by default setting.

Accordion block

With the "Show open by default" setting activated, this block will appear expanded by default when the page loads.

Accordion block

The setting is not activated on this Row block so it will not expand unless manually triggered.

Use blog post or page content

Accordion blocks support selecting from published Blog posts or Pages to pull content directly into individual blocks. This will not pull content added via template, just body HTML from the actual post/page content.

If a post or page is selected, this content will overwrite any custom content set within the block itself.

Accordion using blog post content

References

Add a post to your blog

After you've created a blog, you can start writing your blog posts. Your posts can contain both text and images. You can choose to publish a post immediately, or else set a specific publishing date.

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click Add blog post.
  3. Enter a title for your blog post. You need to have a title to save the post.
  4. Enter the blog post content. This field uses the rich text editor, so you can format your post content. You can also add an image, embed a video or other media, or insert a link.
  5. Choose the settings for your blog post:
    • Author: From the drop-down menu, select the name of the person writing the post. Only the names of the store owner and staff appear in the drop-down menu.
    • Blog: Select the name of the blog where the post will be published. If you don't want to publish to one of your existing blogs, then you can create a new blog in the drop-down menu.
  6. Optional: Display an image on the blog landing page. In the Featured image section, click Upload image and then select an image to upload.
  7. Optional: Include an excerpt from your blog post on the blog landing page.
  8. Optional: Add tags to your blog posts to organize them by category or subject. Customers can click tags to find other blog posts in the same category. When a customer searches for a tag in your online store, matching blog posts will appear in the search results. Enter tags, separated by commas, in the Tags field. Tags can have up to 255 characters.
  9. Optional: If you have created a custom template for blog posts, then you can select a template. In the Template drop-down menu, select the template that you want to use for the post.
    1. Optional: Edit the search engine listing for your blog post in the Search engine listing preview section.
    2. Blog posts are hidden by default and won't appear on your online store. If you're ready to publish the post, then select Visible in the Visibility section, or set a specific publishing date for the post. You can edit or delete a published blog post at any time.
    3. Click Save.

Note

You can use Shopify Magic to automatically generate blog titles and blog post content.

Edit a blog post

You might want to edit an existing blog post to change the content, publish date, author, or other blog post details.

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click the title of the post you want to edit.
  3. Make your changes to the existing content and settings.
  4. Click Save.

Hide a blog post

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click the blog post that you want to hide.
  3. In the Visibility section, select Hidden.
  4. Click Save.

Tip

You can set a specific publishing date for a blog post.

Delete a blog post

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click the blog post that you want to delete.
  3. From the blog post's information page, click Delete blog post.
  4. In the confirmation dialog, click Delete blog post.

Add an image to a blog post

Adding images into your blog post content can make the post more engaging. You can add images that you've uploaded to Shopify, including product images, or upload a new image for the post. The best file type for blog post images is JPEG.

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Create a new blog post, or select an existing blog post.
  3. In the Content area, click the image button.
  4. Select the image to use in the blog post, or click Upload file to upload a new image to Shopify.
  5. Select the size of the image from the Size drop-down menu.
  6. Click Insert image.

Tip

You can use the rich text editor to embed other media in your blog posts, including videos, Google maps, and music or sound clips. Learn more about adding media with the rich text editor.

Display an excerpt from a blog post

You can display excerpts from a blog post on the blog landing page. Depending on what your theme supports, you might be able to include images, text formatting, and links in your excerpt. If you don't add a blog excerpt, then part of your blog post content will display instead, without any images, formatting, or links included.

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Select one of your blog posts.
  3. In the Excerpt rich text editor, add the content that you want to appear on your blog's landing page as an excerpt. The whole excerpt will be shown on your blog page, with a Read more link below.
  4. Click Save.

Add tags to a blog post

You can use tags to organize your blog posts into categories or by subject. For example, you could add a tag to all the posts about summer to create a summer category. Customers can click tags to find other blog posts in the same category. When a customer searches for a tag in your online store, matching blog posts will appear in the search results.

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click the name of the blog post.
  3. In the Tags field, enter tags, separated by commas. You can also select existing tags.
  4. Click Save.

Edit the search engine listing for a blog post

You can edit the text that appears in search engine results for a blog post. Descriptive titles and descriptions can help new customers find your online store and convince them to click the link. Learn more about search engine optimization.

You can preview a blog post's search engine listing and make changes to help new customers discover your online store.

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click the name of the blog post to edit.
  3. In the Search engine listing section, click Edit.
  4. In the Page title field, enter a descriptive title. This title will display as a link in search engine results. You can enter up to 70 characters in the title.
  5. Enter a Meta description for the search engine listing. Make sure to include relevant keywords for your product to help new customers find your link. You might also want to include your business name. You can enter up to 320 characters in the description.

Note

The page title and meta description have set character limits. If you enter more text beyond the character limit, then your page title and description will be shortened in search engine results. Learn more about search engine optimization.

  1. In the URL and handle section, you can edit the web address. In most cases, you won't need to make changes to the web address. If you do make changes, then make sure that you set up URL redirects from the old web address. The URL can't contain any spaces. Handles are used in theme design.
  2. Click Save.

Change a blog's web address

You can change the web address of your blog post in the Search engine listing preview section. When you create a blog post, a URL and handle are automatically generated. You might want to change or shorten the web address, but in most cases you can leave the default alone.

Steps:

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click the blog post that you want to update.
  3. Click Edit website SEO to open the Search engine listing preview.
  4. In the Search engine listing preview, edit the URL and handle field.
  5. If you want the old blog post URL to redirect customers to the new URL, then leave the option for redirect checked.
  6. Click Save.

Accordion using page content

This is an example page meant to demonstrate section and block features, like importing page content directly into a section or block.

This content lives in the page's main content section, and can include text, images, video, custom html, and more.

View this as a page β†’

Company XYZ placeholder image

Imagery settings

Accordion blocks have the option to add an image or video to each individual block. This is set in the accordion block's Imagery settings.

Set the vertical alignment of the image/video to above or below any customized text content. You can also add an image/video to the block without any text.

If a block is assigned both an image and a video, the video settings will override the image settings.

Accordion block with image

Image files can be uploaded directly into the editor or selected from your Store library.

Set the image to appear above or below text content or alone in the block.

Accordion block with video

Video files can be uploaded directly into the editor, selected from your Store library, or by uploading a Vimeo or Youtube link.

Accordion videos have the same standard Video settings, including Autoplay, Loop, and Mute.

Accordion block with Vimeo video

Use the Video service url setting to pull video from a Vimeo link directly into the block.

Play video

Accordion block with Youtube video

Use the Video service url setting to pull video from a Youtube link directly into the block.

Play video

Accordion block with custom video poster

This image will display as the first frame of your video and will fade out when clicked.

This setting can be useful when pulling a video from an external link.

Standard settings

Some settings are available on most sections. View documentation for these standardized settings.

FAQs

chevron_left chevron_right