Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I am about to go mad, can anyone help?
I would like to try and achieve 2 objectives for a custom layout of my collection template.
It is also important that the collection description remains full width on pages with none of the content added via metafields. Lastly I need to make sure that there is the proper break between the end of the collection description and the start of the products.
I found this interesting solution but have no idea how it would be applied
https://codepen.io/chadwickmeyer/pen/gqqqNE
Live dev site
https://water-street-gallery.myshopify.com/collections/dominic-vince
Pass = wsg
Current Code
HTML
<div class="one-whole column"> <div class="feature-divider"></div> </div> {% comment %} Check to see if sidebar should be enabled {% endcomment %} {% if section.blocks.size > 0 and collection.handle != 'types' and collection.handle != 'vendors' %} {% assign sidebar = true %} {% else %} {% assign sidebar = false %} {% endif %} <div class=" content-wrapper is-flex is-flex-wrap " > {% render 'sidebar', results: collection, has_faceted_filtering_block: has_faceted_filtering_block, %} {% assign bio_image = collection.metafields.custom.profile_img %} {% assign profile_quote = collection.metafields.custom.profile_quote %} {% assign profile_stats = collection.metafields.custom.profile_stats %} {% assign exhibition_callout = collection.metafields.custom.exhibition_callout %} {% if exhibition_callout != blank %} {% assign linked_collection = collections[exhibition_callout] %} {% else %} {% assign linked_collection = nil %} {% endif %} <div class="has-sidebar-option sidebar-enabled--{{ sidebar }} artist-profile-section"> <div class="container"> <div class="profile-and-bio-image"> <!-- Profile and Description Sections --> <div class="profile-and-description {% if bio_image == empty %}full-width{% endif %}"> <!-- Profile Sections --> <div class="profile-sections"> <!-- Profile Quote Section --> <div class="profile-quote"> {% if profile_quote %} <p>{{ profile_quote }}</p> {% endif %} </div> <!-- Vertical Divider --> {% if profile_quote and profile_stats %} <div class="vertical-divider"></div> {% endif %} <!-- Profile Stats Section --> <div class="profile-stats"> {% if profile_stats %} <p>{{ profile_stats }}</p> {% endif %} </div> </div> </div> <!-- Bio Image and Button Section --> {% if bio_image %} <div class="bio-image-and-button"> <img src="{{ bio_image | img_url: 'medium' }}" alt="Collection Bio Image"> {% if linked_collection %} <div> <div class="button-label"> Discover {{ collection.title | split: ' ' | first }}'s work in </div> <a href="{{ linked_collection.url }}" class="global-button"> {{ linked_collection.title }} </a> </div> {% endif %} </div> {% endif %} </div> <!-- Collection Description Section --> <div class="collection_description rte full-width"> {{ collection.description }} </div> </div> </div> <!-- Product Listing Section --> <div class="product-listing-section"> <div class="container"> <div class="one-whole column"> {% if collection.products.size == 0 %} <div class="product-list product-list--collection"> <p class="quote">{{ 'collections.general.no_matches' | t }}</p> </div> {% else %} {% render 'product-loop', paginate: paginate, products: products, skip_product: product, products_per_row: section.settings.products_per_row, sidebar: sidebar, %} {% endif %} </div> </div> {% if settings.pagination_type == 'basic_pagination' %} <!-- Pagination Section --> {% render 'pagination', paginate: paginate %} {% endif %} </div> </div> {% endpaginate %} </div> </section>
CSS
/* Base layout styling */ .artist-profile-section { display: flex; flex-direction: column; position: relative; /* Essential for absolute positioning of children */ } .profile-and-bio-image { display: flex; justify-content: space-between; align-items: flex-start; } .profile-and-description { flex-grow: 1; width: 70%; /* Controls the width to the left */ } .bio-image-and-button { flex-shrink: 0; width: 30%; text-align: center; align-self: start; margin-bottom: 50px; /* Space below the bio image section */ padding-bottom: 20px; /* Additional padding for aesthetic spacing */ } .profile-sections { display: flex; justify-content: space-between; width: 100%; } .profile-quote, .profile-stats { flex: 1; } .vertical-divider { width: 1px; background-color: #000; align-self: stretch; margin: 0 20px; } .collection_description { width: 70%; /* Matches the width of the profile description */ position: relative; /* Changed to relative */ left: 0; top: 0; /* Reset top */ z-index: 10; /* Keep the z-index to ensure it stays on top */ padding-bottom: 50px; /* Push away any elements below */ } .collection_description.full-width { width: 100%; } .container { display: flex; flex-wrap: wrap; } .container > .collection_description { width: 70%; /* Make the width 70% when alongside the bio image */ }
Mock up
Thank you in advance for any suggestion
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025