Fluorescent
Spark
HelpEclipseCornerstoneStilettoLorenzaSparkIraContext
Spark
HelpEclipseCornerstoneStilettoLorenzaSparkIraContext
  • Spark Help Center
    • Start using Spark
      • Migrate your theme
      • Theme licenses
    • FAQs
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • H1 headings tags
      • SEO for Shopify themes
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
      • Upgrade to OS2
  • Theme styles
    • Theme settings
    • Style presets
    • Fonts
    • Colors
    • Animation
    • Buttons
  • Pages
    • Templates
      • About page
      • Blogs page
      • Blog posts template
      • Collections list page
      • Contact page
      • FAQ page
      • Lookbook page
      • Password page
      • Search page
      • 404 page
      • Home page
    • Sections
      • Blog posts
      • Collection list
      • Countdown banner
      • Events
      • Featured collection
      • Featured collection row
      • Featured product
      • Image with features
      • Image with text
      • Inline features
      • Logo list
      • Map
      • Mosaic grid
      • Newsletter
      • Questions and answers
      • Quotes
      • Rich text
      • Shoppable feature
      • Shoppable image
      • Slideshow
      • Social proof
      • Testimonials
      • Text columns with images
      • Video
      • Video hero
    • Popups
  • Header
    • Header
      • Logo
      • Layout and style
      • Transparent header
      • Customer account link
    • Announcement bar
    • Quick search
  • Footer
    • Footer
      • Links block
      • Newsletter block
      • Text and image block
      • Payment icons
      • Language selector
      • Country selector
      • Social media icons
      • Footer text
  • Products
    • Product listings
    • Hover add-to-cart
  • Cart
    • Cart page
    • Fly-out cart
  • Product pages
    • Product template
      • Pre-order template
      • Alternate product template
    • Layout and style
      • Breadcrumbs
      • Navigation buttons
      • Media gallery
      • Quick purchase bar
      • Gift recipient form
    • Product overview blocks
      • Default blocks
        • Title
        • Price
        • Description
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
      • Accordion block
      • Complementary products
      • Custom text field
      • Information popup
      • Payment accordion
      • Security accordion
      • Shipping accordion
      • Stock level indicator
      • Text block
      • App blocks
    • Product page sections
      • Product reviews
      • Recommended products
    • Variant options
      • Variant chips
      • Variant swatches
        • Use default colors
        • Use custom colors
        • Use custom images
        • Show on product cards
        • Dynamic option availability
      • Sibling product swatches
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page

Was this helpful?

  1. Product pages
  2. Product overview blocks

Shipping accordion

Product page block

Last updated 1 year ago

Was this helpful?

In the Product template, you can add a Shipping accordion block to display shipping information and a Estimate shipping button to let customers estimate their shipping costs.

Shopify | The Shipping estimator will appear only if shipping rates are enabled in your Shopify admin. Shipping rates are a Shopify feature: see their

Set up shipping block

Follow the steps to add a shipping widget block and customize the layout, headings, and add ab optional image.

STEPS

In your theme editor (Customize):

  1. Click on the Shipping block to open the settings.

  2. Choose to display the accordion in the Left or Right Column.

    The Left column sits below your product media. The Right column sits below your product form.

  3. Set the Style of the accordion to be Open or Closed when customers first visit your product page.

  4. (Optional.) Change the Icon next to the title of your accordion or set it to None.

  5. Change the Title text to display as the heading that will reveal the content when clicked on.

  6. For the Payment or Shipping accordions, choose to Show payment options or Show shipping estimator

  7. Add a Title.

    We recommended a short title of just a few words.

    To show different titles on different product pages, you can create new templates or insert dynamic content with metafields..

  8. Change the Text content to tell customers more about your product or store.

    Use the formatting buttons to add bold, italics, or links.

    To show different text on different product pages, you can create new templates or insert dynamic content with metafields..

  9. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  10. Click Save.

Related links

Editing a template changes all pages that use that template. To edit specific pages, you can or .

Product template
Shipping rates guide ↗
insert dynamic content using metafields
create and assign new templates