Shopify themes, liquid, logos, and UX
Hey, I would like to add the button "View all" behind some of my featured collections (Turbo Theme)
Can someone please help me?
https://structureparis.com
pw : cewleu
What I have :
What I want below :
Thanks
sorry for any issue can you please sent featured collection section code so i will check and update
Where can I find this section ?
yes please go to edit code >>>> section >>> featured collection
{% include 'include-featured-collection' %} {% schema %} { "name": "Featured collection", "class": "shopify-section--featured-collection", "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Featured collection" }, { "type": "checkbox", "id": "collection_description", "label": "Show description", "default": true }, { "type": "collection", "id": "collection", "label": "Collection" }, { "type": "radio", "id": "collection_style", "label": "Collection layout", "default": "grid", "options": [ { "value": "slider", "label": "Slider" }, { "value": "grid", "label": "Grid" } ] }, { "type": "header", "content": "Products" }, { "type": "range", "id": "products_per", "label": "Products per row", "min": 2, "max": 7, "step": 1, "default": 3 }, { "type": "range", "id": "products_limit", "label": "Limit products", "min": 2, "max": 50, "step": 1, "default": 9 }, { "type": "header", "content": "Advanced" }, { "type": "paragraph", "content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)" }, { "type": "text", "id": "css_class", "label": "CSS Class" }, { "type": "textarea", "id": "custom_css", "label": "Custom CSS" } ], "presets": [{ "name": "Featured collection", "category": "Collection" }], "templates": [ "index", "product", "page" ] } {% endschema %}
<script
type="application/json"
data-section-type="featured-collection"
data-section-id="{{ section.id }}"
>
</script>
{% include 'include-featured-collection' %}
{% schema %}
{
"name": "Featured collection",
"class": "shopify-section--featured-collection",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "checkbox",
"id": "collection_description",
"label": "Show description",
"default": true
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "radio",
"id": "collection_style",
"label": "Collection layout",
"default": "grid",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "header",
"content": "Products"
},
{
"type": "range",
"id": "products_per",
"label": "Products per row",
"min": 2,
"max": 7,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "products_limit",
"label": "Limit products",
"min": 2,
"max": 50,
"step": 1,
"default": 9
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "paragraph",
"content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
},
{
"type": "text",
"id": "css_class",
"label": "CSS Class"
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"presets": [{
"name": "Featured collection",
"category": "Collection"
}],
"templates": [
"index",
"product",
"page"
]
}
{% endschema %}
yes please share us this file code
{% include 'include-featured-collection' %}
{% comment %}
** Featured collection - dynamic **
- Draggable section
{% endcomment %}
{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}
{%- assign id = object.id -%}
{% comment %} Content settings {% endcomment %}
{%- assign title = object.settings.title | escape -%}
{%- assign collection = collections[object.settings.collection] -%}
{% comment %} End content settings {% endcomment %}
{% comment %} Advanced {% endcomment %}
{%- assign css_class = object.settings.css_class -%}
{%- assign custom_css = object.settings.custom_css -%}
{% comment %} Section specific CSS {% endcomment %}
{% style %}
{%
render 'css-loop',
css: custom_css,
id: id
%}
{% endstyle %}
{% if collection == blank %}
{%- assign section_onboarding = true -%}
{% comment %} Assign product length to be selected limit for onboarding {% endcomment %}
{%- assign products_length = object.settings.products_limit | plus: 0 -%}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}
<div class="{{ css_class }}">
<section class="section">
<div class="container">
<div class="one-whole column center homepage_content">
{% if title != blank %}
<a href="{{ collection.url }}">
<h2 class="title">{{ title }}</h2>
</a>
<div class="feature_divider"></div>
{% endif %}
{% if object.settings.collection_description and collection.description != blank %}
<div class="featured-collection__description">
{{ collection.description }}
</div>
{% endif %}
</div>
</div>
</section>
{% if object.settings.collection_style == 'slider' %}
<div class="js-product-slider homepage-product-slider full-width--true {% if object.settings.products_per == 2 or object.settings.products_per == 4 or object.settings.products_per == 6 %}even-num-slides{% endif %} featured-collection__products">
{% if section_onboarding == false %}
{% if collection.products.size > 0 %}
{% render 'product-slider',
limit: object.settings.products_limit,
products: collection.products,
per_slide: object.settings.products_per,
featured_collection: collection
%}
{% endif %}
{% else %}
<div class="slider-gallery products-slider products-length-{{ products_length }}"
data-products-per-slide="{{ object.settings.products_per }}"
data-products-limit="{{ object.settings.products_limit }}"
data-products-available="{{ products_length }}">
{% for i in (1..object.settings.products_limit) %}
{%- assign per_slide_num = object.settings.products_per -%}
<div class="gallery-cell thumbnail {% if products_length > per_slide_num %}visible-{{ object.settings.products_per }}{% else %}visible-{{ products_length }}{% endif %}">
<div class="product-wrap">
<div class="relative product_image">
<a href="#">
<object class="placeholder-image">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</object>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% else %}
{% if section_onboarding == false %}
<section class="section">
<div class="container">
<div class="one-whole column">
{% render 'product-loop',
limit: object.settings.products_limit | plus: 1,
products: collection.products,
products_per_row: object.settings.products_per
%}
</div>
</div>
</section>
{% else %}
<section class="section">
<div class="product-list collection-matrix">
<div class="container">
{% for i in (1..object.settings.products_limit) %}
{% comment %}{% assign collection_group = products | map: 'id' %}{% endcomment %}
{%- assign collection_group_thumb = collection_group | append : 'thumb' -%}
{%- assign collection_group_mobile = collection_group | append : 'mobile' -%}
<div class="{% render 'column-width', value: object.settings.products_per %} column {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %} thumbnail {% if settings.mobile_products_per_row == '1' %}medium-down--one-half small-down--one-whole{% else %}medium-down--one-half small-down--one-half{% endif %}">
<div class="product-wrap {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %}">
<div class="relative product_image">
<a href="#">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% endif %}
</div>
thanks for code can you please update this
{% comment %}
** Featured collection - dynamic **
- Draggable section
{% endcomment %}
{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}
{%- assign id = object.id -%}
{% comment %} Content settings {% endcomment %}
{%- assign title = object.settings.title | escape -%}
{%- assign collection = collections[object.settings.collection] -%}
{% comment %} End content settings {% endcomment %}
{% comment %} Advanced {% endcomment %}
{%- assign css_class = object.settings.css_class -%}
{%- assign custom_css = object.settings.custom_css -%}
{% comment %} Section specific CSS {% endcomment %}
{% style %}
{%
render 'css-loop',
css: custom_css,
id: id
%}
{% endstyle %}
{% if collection == blank %}
{%- assign section_onboarding = true -%}
{% comment %} Assign product length to be selected limit for onboarding {% endcomment %}
{%- assign products_length = object.settings.products_limit | plus: 0 -%}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}
<div class="{{ css_class }}">
<section class="section">
<div class="container">
<div class="one-whole column center homepage_content">
{% if title != blank %}
<a href="{{ collection.url }}">
<h2 class="title">{{ title }}</h2>
</a>
<div class="feature_divider"></div>
{% endif %}
{% if object.settings.collection_description and collection.description != blank %}
<div class="featured-collection__description">
{{ collection.description }}
</div>
{% endif %}
</div>
</div>
</section>
{% if object.settings.collection_style == 'slider' %}
<div class="js-product-slider homepage-product-slider full-width--true {% if object.settings.products_per == 2 or object.settings.products_per == 4 or object.settings.products_per == 6 %}even-num-slides{% endif %} featured-collection__products">
{% if section_onboarding == false %}
{% if collection.products.size > 0 %}
{% render 'product-slider',
limit: object.settings.products_limit,
products: collection.products,
per_slide: object.settings.products_per,
featured_collection: collection
%}
{% endif %}
{% else %}
<div class="slider-gallery products-slider products-length-{{ products_length }}"
data-products-per-slide="{{ object.settings.products_per }}"
data-products-limit="{{ object.settings.products_limit }}"
data-products-available="{{ products_length }}">
{% for i in (1..object.settings.products_limit) %}
{%- assign per_slide_num = object.settings.products_per -%}
<div class="gallery-cell thumbnail {% if products_length > per_slide_num %}visible-{{ object.settings.products_per }}{% else %}visible-{{ products_length }}{% endif %}">
<div class="product-wrap">
<div class="relative product_image">
<a href="#">
<object class="placeholder-image">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</object>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% else %}
{% if section_onboarding == false %}
<section class="section">
<div class="container">
<div class="one-whole column">
{% render 'product-loop',
limit: object.settings.products_limit | plus: 1,
products: collection.products,
products_per_row: object.settings.products_per
%}
</div>
</div>
</section>
{% else %}
<section class="section">
<div class="product-list collection-matrix">
<div class="container">
{% for i in (1..object.settings.products_limit) %}
{% comment %}{% assign collection_group = products | map: 'id' %}{% endcomment %}
{%- assign collection_group_thumb = collection_group | append : 'thumb' -%}
{%- assign collection_group_mobile = collection_group | append : 'mobile' -%}
<div class="{% render 'column-width', value: object.settings.products_per %} column {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %} thumbnail {% if settings.mobile_products_per_row == '1' %}medium-down--one-half small-down--one-whole{% else %}medium-down--one-half small-down--one-half{% endif %}">
<div class="product-wrap {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %}">
<div class="relative product_image">
<a href="#">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% endif %}
<div class="text-center view-all'>
<a href="{{ collection.url }}">
View all
</a>
</div>
</div>
Thanks but the text "view all" appears but you cannot click on it to see the whole collection. And I wish it was a button.
give me store url
Hello @andrew133
You can try this code
<div class="text-center">
<a href="{{ routes.collections_url }}" class="button">View all</a>
</div>
Hope this will help you
Thanks
Thanks, but I would like that the "View all" redirect to the specific collection and not all the collection.
And I wish that the "View all" was a button
yes you have just change ulr as you like
Either you can add direct link in code with this code
<div class="center">
<a href="/collection/your collection link" class="button">View all</a>
</div>
or if u want to add dynamically then you have to create a json for link and call it in your html.
And then you can manage the link from customize section
<div class="center">
<a href="{{section.settings.link }}" class="button">View all</a>
</div>
/*add this code in schema*/
{
"type": "url",
"id": "link",
"label": "LINK"
}
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024