← Back to Sections
BC Text Collections
A modern, grid-based section for displaying your product collections or custom links with eye-catching visuals and hover effects. Perfect for category navigation, featured collections, or any grid of clickable items that need to make a strong visual impact.
Key Features:
- Display collections or custom links in a responsive 2-column grid (stacks to 1 column on mobile)
- Smart image hierarchy: uses custom images, collection images, or product images as fallbacks
- Interactive hover effects with customizable arrow icons and background color changes
- Responsive typography with clamp() scaling for perfect readability on all devices
- Flexible content options: link to Shopify collections or any custom URLs
- Rich text support for headings with full formatting control
- Complete color customization: use Dawn's color schemes or apply custom branding
- Individual image opacity controls and lazy loading options
- Desktop-only hover arrows (hidden on mobile for better touch experience)
- Comprehensive spacing controls with separate desktop, tablet, and mobile padding settings
Perfect for: Collection showcases, category navigation, featured product groups, brand story sections, or any clickable grid layout that combines images with descriptive text.
{%- style -%}
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
padding-top: {{ section.settings.padding_top_desktop }}px;
padding-bottom: {{ section.settings.padding_bottom_desktop }}px;
padding-left: {{ section.settings.horizontal_padding_desktop }}px;
padding-right: {{ section.settings.horizontal_padding_desktop }}px;
{% if section.settings.top_border_thickness > 0 %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
{% if section.settings.bottom_border_thickness > 0 %}
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
}
.section-{{ section.id }} .bc-main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 60px;
}
.section-{{ section.id }} .bc-heading * {
font-size: {{ section.settings.heading_size }}rem;
font-size: clamp({{ section.settings.heading_size | times: section.settings.heading_mobile_scale_ratio }}rem, {{ section.settings.heading_size | times: 0.7 }}rem + 2vw, {{ section.settings.heading_size }}rem) !important;
line-height: {{ section.settings.heading_line_height }};
max-width: {{ section.settings.heading_max_width }}ch;
text-align: center;
margin: 0;
}
.section-{{ section.id }} .bc-collections-grid {
display: grid;
grid-template-columns: 1fr 1fr;
min-width: 90vw;
gap: 0;
}
.section-{{ section.id }} .bc-collection-cell {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 50px;
width: 100%;
min-width: 30vw;
padding: 15px;
border-bottom: 1px solid {{ section.settings.cell_border_color }};
transition: background-color 0.2s ease;
text-decoration: none;
color: inherit;
position: relative;
}
.section-{{ section.id }} .bc-collection-cell:hover,
.section-{{ section.id }} .bc-collection-cell.bc-active {
background-color: #eee9e4;
}
.section-{{ section.id }} .bc-image-wrapper {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.section-{{ section.id }} .bc-collection-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
right: 0;
top: 0;
opacity: {{ section.settings.image_opacity }}%;
}
.section-{{ section.id }} .bc-collection-text {
font-size: {{ section.settings.text_size }}rem;
font-size: clamp({{ section.settings.text_size | times: section.settings.text_mobile_scale_ratio }}rem, {{ section.settings.text_size | times: 0.8 }}rem + 1vw, {{ section.settings.text_size }}rem) !important;
line-height: {{ section.settings.text_line_height }};
max-width: {{ section.settings.text_max_width }}ch;
transition: font-style 0.15s ease;
margin: 0;
}
.section-{{ section.id }} .bc-collection-text * {
font-size: inherit !important;
line-height: inherit;
max-width: inherit;
margin: 0;
}
.section-{{ section.id }} .bc-collection-cell:hover .bc-collection-text *,
.section-{{ section.id }} .bc-collection-cell.bc-active .bc-collection-text * {
font-style: italic;
}
.section-{{ section.id }} .bc-arrow-icon {
display: none;
position: absolute;
right: 30px;
color: {{ section.settings.icon_color }};
}
.section-{{ section.id }} .bc-collection-cell:hover .bc-arrow-icon,
.section-{{ section.id }} .bc-collection-cell.bc-active .bc-arrow-icon {
display: block;
}
.section-{{ section.id }} .bc-arrow-icon svg {
width: 50px;
height: 50px;
display: block;
}
.section-{{ section.id }} .bc-arrow-icon img {
width: 50px;
height: 50px;
object-fit: contain;
display: block;
}
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding-top: {{ section.settings.padding_top_tablet }}px;
padding-bottom: {{ section.settings.padding_bottom_tablet }}px;
padding-left: {{ section.settings.horizontal_padding_tablet }}px;
padding-right: {{ section.settings.horizontal_padding_tablet }}px;
}
.section-{{ section.id }} .bc-collection-cell {
gap: 20px;
}
.section-{{ section.id }} .bc-image-wrapper {
width: 70px;
height: 90px;
}
.section-{{ section.id }} .bc-arrow-icon {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.horizontal_padding_mobile }}px;
padding-right: {{ section.settings.horizontal_padding_mobile }}px;
}
.section-{{ section.id }} .bc-collections-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 479px) {
.section-{{ section.id }} .bc-collection-cell {
gap: 12px;
padding: 10px 5px;
}
.section-{{ section.id }} .bc-image-wrapper {
height: 80px;
}
}
{%- endstyle -%}
<div class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<div class="bc-main-container">
{% if section.settings.heading != blank %}
<div class="bc-heading">{{ section.settings.heading }}</div>
{% endif %}
<div class="bc-collections-grid">
{% for block in section.blocks %}
{% comment %} Determine the URL and title based on whether it's a collection or custom link {% endcomment %}
{% if block.settings.custom_url != blank %}
{% assign block_url = block.settings.custom_url %}
{% assign block_title = block.settings.custom_title | default: 'Link' %}
{% elsif block.settings.collection != blank %}
{% assign collection = collections[block.settings.collection] %}
{% assign block_url = collection.url %}
{% assign block_title = collection.title %}
{% else %}
{% assign block_url = '#' %}
{% assign block_title = 'No link or collection set' %}
{% endif %}
{% comment %} Only render the block if we have a valid URL {% endcomment %}
{% if block_url != '#' %}
<a
href="{{ block_url }}"
class="bc-collection-cell {% if block.settings.highlight_block %}bc-active{% endif %}"
{{ block.shopify_attributes }}
>
{% comment %} Image logic - priority: custom_image > collection image > collection first product image > placeholder {% endcomment %}
{% if block.settings.custom_image != blank %}
<div class="bc-image-wrapper">
<img
src="{{ block.settings.custom_image | img_url: '300x200', crop: 'center' }}"
loading="{{ block.settings.image_loading }}"
alt="{{ block.settings.custom_image_alt | default: block_title }}"
class="bc-collection-image"
>
</div>
{% elsif block.settings.collection != blank and collections[block.settings.collection].image %}
<div class="bc-image-wrapper">
<img
src="{{ collections[block.settings.collection].image | img_url: '300x200', crop: 'center' }}"
loading="{{ block.settings.image_loading }}"
alt="{{ block_title }}"
class="bc-collection-image"
>
</div>
{% elsif block.settings.collection != blank
and collections[block.settings.collection].products.first.featured_image
%}
<div class="bc-image-wrapper">
<img
src="{{ collections[block.settings.collection].products.first.featured_image | img_url: '300x200', crop: 'center' }}"
loading="{{ block.settings.image_loading }}"
alt="{{ block_title }}"
class="bc-collection-image"
>
</div>
{% else %}
<div class="bc-image-wrapper">
<img
src="{{ 'collection-placeholder.svg' | asset_url }}"
loading="{{ block.settings.image_loading }}"
alt="{{ block_title }}"
class="bc-collection-image"
>
</div>
{% endif %}
<div class="bc-collection-text {% if block.settings.highlight_block %}bc-active{% endif %}">
{{ block_title }}
</div>
<div class="bc-arrow-icon" style="color: {{ section.settings.icon_color }};">
{% if section.settings.icon_image != blank %}
<img
src="{{ section.settings.icon_image | img_url: 'original' }}"
alt="{{ section.settings.icon_image_alt | default: 'Arrow icon' }}"
loading="lazy"
>
{% else %}
{{ section.settings.icon_svg }}
{% endif %}
</div>
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% schema %}
{
"name": "BC Text Collections",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "icon_color",
"label": "Hover Icon Color",
"default": "#000000"
},
{
"type": "color",
"id": "cell_border_color",
"label": "Cell Border Color",
"default": "#ebebeb"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "padding_top_desktop",
"label": "Top Padding (Desktop)",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 100
},
{
"type": "range",
"id": "padding_bottom_desktop",
"label": "Bottom Padding (Desktop)",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 100
},
{
"type": "range",
"id": "horizontal_padding_desktop",
"label": "Horizontal Padding (Desktop)",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 50
},
{
"type": "range",
"id": "padding_top_tablet",
"label": "Top Padding (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 80
},
{
"type": "range",
"id": "padding_bottom_tablet",
"label": "Bottom Padding (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 80
},
{
"type": "range",
"id": "horizontal_padding_tablet",
"label": "Horizontal Padding (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "horizontal_padding_mobile",
"label": "Horizontal Padding (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 10
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "header",
"content": "Text Section"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<h2>Your Heading Goes Here</h2>"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 5,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "text_size",
"label": "Text Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 3,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "heading_line_height",
"label": "Heading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.2
},
{
"type": "range",
"id": "text_line_height",
"label": "Text Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.2
},
{
"type": "range",
"id": "heading_max_width",
"label": "Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "text_max_width",
"label": "Text Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "heading_mobile_scale_ratio",
"label": "Heading Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.7,
"unit": "×",
"info": "Controls how much heading shrinks on smaller screens"
},
{
"type": "range",
"id": "heading_tablet_scale_ratio",
"label": "Heading Tablet Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.9,
"unit": "×",
"info": "Controls how much heading shrinks on tablet screens"
},
{
"type": "range",
"id": "text_mobile_scale_ratio",
"label": "Text Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "range",
"id": "text_tablet_scale_ratio",
"label": "Text Tablet Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1,
"unit": "×",
"info": "Controls how much text shrinks on tablet screens"
},
{
"type": "header",
"content": "Media Section"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Hover Icon Image (Optional)",
"info": "Upload an image to use as the hover icon. This takes precedence over SVG code if both are provided."
},
{
"type": "text",
"id": "icon_image_alt",
"label": "Hover Icon Image Alt Text",
"placeholder": "e.g. Arrow icon"
},
{
"type": "textarea",
"id": "icon_svg",
"label": "Hover Icon SVG Code",
"info": "Paste the inline SVG code here for the hover icon. You can copy icons directly from https://lucide.dev/icons using the 'Copy SVG' button. Make sure the SVG uses 'stroke=\"currentColor\"' or 'fill=\"currentColor\"' so the color setting works.",
"default": "<svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 10 L40 10 L40 40\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"/><path d=\"M10 40 L40 10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"/></svg>"
},
{
"type": "range",
"id": "image_opacity",
"label": "Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{
"value": "lazy",
"label": "Lazy"
},
{
"value": "eager",
"label": "Eager"
}
],
"default": "lazy"
}
],
"blocks": [
{
"type": "collection",
"name": "Collection/Link",
"settings": [
{
"type": "header",
"content": "Link Type"
},
{
"type": "paragraph",
"content": "Choose either a collection OR enter a custom URL and title. If both are provided, the custom URL will take priority."
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "url",
"id": "custom_url",
"label": "Custom URL",
"info": "Enter a custom URL (e.g., /pages/about, https://example.com). This will override the collection setting."
},
{
"type": "text",
"id": "custom_title",
"label": "Custom Title",
"info": "Title to display when using custom URL. Required if using custom URL."
},
{
"type": "header",
"content": "Image & Style"
},
{
"type": "image_picker",
"id": "custom_image",
"label": "Custom Image",
"info": "If provided, this will replace the collection image"
},
{
"type": "text",
"id": "custom_image_alt",
"label": "Custom Image Alt Text",
"placeholder": "Describe the custom image"
},
{
"type": "checkbox",
"id": "highlight_block",
"label": "Highlight this block",
"default": false,
"info": "Enable to show this block as active/highlighted by default"
}
]
}
],
"presets": [
{
"name": "BC Text Collections",
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
}
]
}
]
}
{% endschema %}
