Collapsible row beneath media gallery - Dawn

Solved

Collapsible row beneath media gallery - Dawn

mOONbOOTS
Explorer
75 6 10

Hello,

 

I am having trouble placing the collapsible tabs beneath the product media gallery on the Dawn theme.

 

I am using the stock Dawn theme.

 

Screenshot 2024-10-29 at 12.33.13 AM.png

 

As you can see, Adidas has done it on their product page.

 

Screenshot 2024-10-29 at 12.34.45 AM.png

Accepted Solution (1)

DaisyVo
Shopify Partner
423 64 62

This is an accepted solution.

Hi @mOONbOOTS 

 

I hope you are well. 

 

You should go to your theme > edit code first. Then follow our detailed guide here: 

 

Step 1: Search for the file "product-media-gallery.liquid" in your theme code > insert the code below above the "</media-gallery>" tag as screenshot here: https://prnt.sc/9xqGDhiPTkFk 

 

          Here is the code for Step 1: 

 

<!-- START Product Collapsible Custom -->
<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
  <details id="Details-{{ block.id }}-{{ section.id }}">
    <summary>
      <div class="summary__title">
          <span class="svg-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-dairy" viewBox="0 0 20 20">
              <path d="M6.468 3.065 4.297 6.088l-.812-.583 2.17-3.023zm8.662.087-1.65 3.084-.882-.472 1.65-3.083z"/>
              <path d="M14.522 2.583h.58l1.379 3.165a1 1 0 0 1 .083.4v9.954a1 1 0 0 1-.302.716l-2.46 2.398a1 1 0 0 1-.698.284H11v-1h2.104l2.46-2.398V6.147l-1.249-2.864.207-.09z"/>
              <path d="M3.5 5.5h10v13a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1zm1 1v12h8v-12zm1-5a1 1 0 0 1 1-1h7.602a1 1 0 0 1 1 1v1.123h-1V1.5H6.5V3h-1z"/>
              <path d="M15.013 3.089H5.876v-.5h9.137z"/>
            </svg>
          </span>
        <h2 class="h4 accordion__title inline-richtext">
          Collapsible Custom
        </h2>
      </div>
      {{- 'icon-caret.svg' | inline_asset_content -}}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
      Collapsible Custom Content
    </div>
  </details>
</div>
<!-- END Product Collapsible Custom -->

 

 

Step 2: 

- You can change the name of that section here: https://prnt.sc/jnDgmpWkdcr4

- You can change the content in the dropdown arrow per section here: https://prnt.sc/JIABl5iBcO9Q 

- Here is the icon code part for your reference: https://prnt.sc/fnjj-t1JDhr4

 

The guide to getting icon code: 

1/ Selecting icon you want to show here: (https://prnt.sc/6R5noURFmlj6) and save the change

2/ On the product page > press F12 button and copy the icon code here: (https://prnt.sc/fMHRMe9Ryyhx

3/ Press **Ctrl + U** to open the page source code, then press **Ctrl + F** and paste the copied code. Next, copy the SVG code located just above this section: https://prnt.sc/h1bjapT6RjGl

4/ Go to "Edit icon" and replace this old code: (https://prnt.sc/e2Dy11Hq4skw) with the new one.

image (1).png

 

I hope it can help. Thank you so much!

 

Best,

Daisy - Avada Support Team. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Explore other solutions
here. Live Chat Support is available 24/7.

View solution in original post

Replies 7 (7)

rajweb
Shopify Partner
302 27 33

Hey @mOONbOOTS ,

To move the collapsible tabs beneath the product media gallery on the Dawn theme, follow these steps:

1. Online Store > Themes > Edit Code 

2. Locate the Product Template:

-In the code editor, navigate to Sections > main-product.liquid.

-This is the main file for rendering the product page.

3. Move the Collapsible Tabs Code:

-Look for the code block that renders the collapsible tabs. It might look like:

{%- section 'product-recommendations' -%}
{%- section 'collapsible-tabs' -%}

-Move this block to a location below the product media gallery section. You might find a code block similar to this for the media gallery:

{%- section 'product-media-gallery' -%}

Ensure the collapsible tabs are placed after the media gallery section.

These changes should help you achieve a layout similar to the Adidas product page you shared. Let me know if you encounter any issues!

 

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

akshay_bhatt
Shopify Partner
56 5 5

hi @mOONbOOTS ,

To move the collapsible tabs beneath the product media gallery in the Dawn theme, you’ll need to modify the theme code slightly. Here’s a step-by-step guide:

Go to Online Store > Themes:

In your Shopify admin, go to Online Store > Themes.

Find your Dawn theme and click Edit code.

Locate the main-product.liquid file:

In the Sections folder, open main-product.liquid.

Identify the Collapsible Tabs Section:

Scroll down until you find the collapsible tab code. This section is usually within a { % section 'product-template' %}or{ % section 'collapsible-tabs' %} tag. If you’re using a stock Dawn theme, look for code with collapsible or similar elements.

Move the Collapsible Tabs Code:

Cut the collapsible tabs code block (usually a <div> with collapsible elements) and paste it after the media gallery section.

To find the media gallery section, look for code that includes product_media-wrapper or similar classes. Ensure that you’re placing the tabs directly below the gallery container.

Save the Changes:

After moving the collapsible tabs code, click Save to apply the changes.

Preview and Adjust:

Go to your product page to ensure that the collapsible tabs are now displaying beneath the product media gallery. You might need some minor CSS adjustments to perfect the layout.     

 

 

 Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

 

Regards 

Akshay Bhatt

- Need a Shopify Specialist?
- Custom Design | Advanced Coding | Store Modifications
- Email: akshay.bhatt9113923240@gmail.com

mOONbOOTS
Explorer
75 6 10

I wish either of those suggestions would work out of the box.

 

Dawn's collapsible code in the main-product.liquid file is:

{%- when 'collapsible_tab' -%}
                <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
                  <details id="Details-{{ block.id }}-{{ section.id }}">
                    <summary>
                      <div class="summary__title">
                        {% render 'icon-accordion', icon: block.settings.icon %}
                        <h2 class="h4 accordion__title inline-richtext">
                          {{ block.settings.heading | default: block.settings.page.title | escape }}
                        </h2>
                      </div>
                      {{- 'icon-caret.svg' | inline_asset_content -}}
                    </summary>
                    <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
                      {{ block.settings.content }}
                      {{ block.settings.page.content }}
                    </div>
                  </details>
                </div>

 

I moved that below {% render 'product-media-gallery', variant_images: variant_images %} and the only way it truly works is if I remove the Enable sticky content on desktop. I would like to be able to use the sticky content on desktop feature, but the collapsible row doesn't stay beneath the thumbnails when scrolling.

rajweb
Shopify Partner
302 27 33

@mOONbOOTS ,

To keep the collapsible tabs below the product media gallery while also enabling sticky content on desktop, you can try adjusting the CSS to control the sticky behavior more precisely. Here’s how you could approach it:

1. Wrap the Collapsible Tabs and Media Gallery in a Common Container:

-In your main-product.liquid  file, try adding a wrapper around both the media gallery and collapsible tabs.

-For example:

<div class="product-media-and-tabs">
  {% render 'product-media-gallery', variant_images: variant_images %}
  {%- when 'collapsible_tab' -%}
  <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
    <details id="Details-{{ block.id }}-{{ section.id }}">
      <summary>
        <div class="summary__title">
          {% render 'icon-accordion', icon: block.settings.icon %}
          <h2 class="h4 accordion__title inline-richtext">
            {{ block.settings.heading | default: block.settings.page.title | escape }}
          </h2>
        </div>
        {{- 'icon-caret.svg' | inline_asset_content -}}
      </summary>
      <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
        {{ block.settings.content }}
        {{ block.settings.page.content }}
      </div>
    </details>
  </div>
</div>

Add CSS to Manage Sticky Behavior:

-Open your theme’s CSS file (typically base.css or theme.css).

-Add the following CSS to handle the sticky effect more effectively for desktop:

@media (min-width: 1024px) { /* Apply only on larger screens */
  .product__info-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* Adjust this value if needed */
  }

  .product-media-and-tabs {
    display: flex;
    flex-direction: column;
  }

  .accordion {
    margin-top: 20px; /* Adjust to space the tabs from the gallery */
  }
}

Adjust the Sticky Content:

If the collapsible tabs still scroll separately, consider checking for conflicts within the sticky wrapper and adjusting its top value to match where you’d like it to stick in relation to the thumbnails.

This setup should help keep the collapsible tabs and media gallery organized while still allowing the sticky behavior on desktop. Let me know if this improves the behavior!

thanks

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

DaisyVo
Shopify Partner
423 64 62

This is an accepted solution.

Hi @mOONbOOTS 

 

I hope you are well. 

 

You should go to your theme > edit code first. Then follow our detailed guide here: 

 

Step 1: Search for the file "product-media-gallery.liquid" in your theme code > insert the code below above the "</media-gallery>" tag as screenshot here: https://prnt.sc/9xqGDhiPTkFk 

 

          Here is the code for Step 1: 

 

<!-- START Product Collapsible Custom -->
<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
  <details id="Details-{{ block.id }}-{{ section.id }}">
    <summary>
      <div class="summary__title">
          <span class="svg-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-dairy" viewBox="0 0 20 20">
              <path d="M6.468 3.065 4.297 6.088l-.812-.583 2.17-3.023zm8.662.087-1.65 3.084-.882-.472 1.65-3.083z"/>
              <path d="M14.522 2.583h.58l1.379 3.165a1 1 0 0 1 .083.4v9.954a1 1 0 0 1-.302.716l-2.46 2.398a1 1 0 0 1-.698.284H11v-1h2.104l2.46-2.398V6.147l-1.249-2.864.207-.09z"/>
              <path d="M3.5 5.5h10v13a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1zm1 1v12h8v-12zm1-5a1 1 0 0 1 1-1h7.602a1 1 0 0 1 1 1v1.123h-1V1.5H6.5V3h-1z"/>
              <path d="M15.013 3.089H5.876v-.5h9.137z"/>
            </svg>
          </span>
        <h2 class="h4 accordion__title inline-richtext">
          Collapsible Custom
        </h2>
      </div>
      {{- 'icon-caret.svg' | inline_asset_content -}}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
      Collapsible Custom Content
    </div>
  </details>
</div>
<!-- END Product Collapsible Custom -->

 

 

Step 2: 

- You can change the name of that section here: https://prnt.sc/jnDgmpWkdcr4

- You can change the content in the dropdown arrow per section here: https://prnt.sc/JIABl5iBcO9Q 

- Here is the icon code part for your reference: https://prnt.sc/fnjj-t1JDhr4

 

The guide to getting icon code: 

1/ Selecting icon you want to show here: (https://prnt.sc/6R5noURFmlj6) and save the change

2/ On the product page > press F12 button and copy the icon code here: (https://prnt.sc/fMHRMe9Ryyhx

3/ Press **Ctrl + U** to open the page source code, then press **Ctrl + F** and paste the copied code. Next, copy the SVG code located just above this section: https://prnt.sc/h1bjapT6RjGl

4/ Go to "Edit icon" and replace this old code: (https://prnt.sc/e2Dy11Hq4skw) with the new one.

image (1).png

 

I hope it can help. Thank you so much!

 

Best,

Daisy - Avada Support Team. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Explore other solutions
here. Live Chat Support is available 24/7.
mOONbOOTS
Explorer
75 6 10

Thank you for your help! That definitely worked.

 

Would it be too much to ask how I could have those rows appear below the product-info-wrapper on mobile?

 

Right now, the rows are below the product media on desktop, which is perfect, but on mobile, they're right below the product media but also above the product name, and other info.

 

Screenshot_29-10-2024_131955_admin.shopify.com.jpeg

DaisyVo
Shopify Partner
423 64 62

Hi @mOONbOOTS 

 

I hope you are well. 

 

Step 1: From this code: https://prnt.sc/3FI8DayR-_Vd  - You need to edit it a bit

Before: <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>

After: <div id="product-collap--mobile" class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>

 

Step 2: 

1/ Go to your Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there. Then save the change

 

Here is the code for Step 2: 

 

 

@media screen and (max-width: 768px){
   #product-collap--mobile{
      display: none !important;
   }
}

 

 

 

I hope it can help. Thank you so much!

 

Best,

Daisy - Avada Support Team.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Explore other solutions
here. Live Chat Support is available 24/7.