Collapsible row beneath media gallery - Dawn

Store Design
, ,
1

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
Screenshot 2024-10-29 at 12.33.13 AM.png2940×1348 269 KB

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

Screenshot 2024-10-29 at 12.34.45 AM.png
Screenshot 2024-10-29 at 12.34.45 AM.png2940×1508 298 KB

2

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.

  1. 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

3

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

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

4

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' -%}

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.

5

@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:


  {% render 'product-media-gallery', variant_images: variant_images %}
  {%- when 'collapsible_tab' -%}

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

6

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 “” tag as screenshot here: https://prnt.sc/9xqGDhiPTkFk

Here is the code for Step 1:

Step 2:

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
image (1).png1708×861 113 KB

I hope it can help. Thank you so much!

Best,

Daisy - Avada Support Team.

7

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
Screenshot_29-10-2024_131955_admin.shopify.com.jpeg429×307 6.16 KB

8

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.

9

Hi Daisy,

I would like to do this as well. However, the code and details have been deleted. Can you or someone rehash the details?

Thank you!

10

Hi Daisy,

I would like to do this as well. However, the code and details have been deleted. Can you or someone rehash the details?

Thank you!