Shopify themes, liquid, logos, and UX
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.
As you can see, Adidas has done it on their product page.
Solved! Go to the solution
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.
I hope it can help. Thank you so much!
Best,
Daisy - Avada Support Team.
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
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
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.
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
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.
I hope it can help. Thank you so much!
Best,
Daisy - Avada Support Team.
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.
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.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024