Pop Theme Collections Page

New Member
2 0 0

Hi Community

 

I am using the free Pop Theme for my store and the Collections Page has Text at the top and Images below. I would like to swap this over so the images are the first thing that is seen on that page not the text.

 

I am not sure how to swap the code around on the collection-template.liquid to achieve my desired request.

 

Can anyone assist?

 

Thanks

Mike

0 Likes
Highlighted
New Member
2 0 0

This is the current code;

 

<style>
{% if section.settings.product_details_display_method == 'hover' %}
@media screen and (min-width: 769px) {
.product__cover,
.product__details {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
}
{% endif %}

@media screen and (min-width: 769px) {
.product__details {
{% if section.settings.product_details_display_method == 'always' %}
margin-top: 15px;
{% endif %}

z-index: 2;
}
}

{% if section.settings.product_details_display_method == 'always' %}
.product__price {
margin-bottom: 0;
}
@include at-query($min, $large) {
.product:hover .product__price {
color: {{ settings.color_accent }};
}
}
{% endif %}
</style>

{% assign product_rows = section.settings.collection_rows_per_page %}
{% assign products_per_row = section.settings.collection_products_per_row %}
{% assign products_per_page = product_rows | times: products_per_row %}

<div data-section-id="{{ section.id }}" data-section-type="collection-template">
{% paginate collection.products by products_per_page %}

<header class="section-header text-center">
<h1 class="section-header__title">{{ collection.title }}</h1>
{% if collection.description != blank or section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
<hr class="hr--small">
{% endif %}
{% if collection.description != blank %}
<div class="rte rte--header">
{{ collection.description }}
</div>
{% endif %}
{% if section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
<div class="grid--full collection-sorting{% if section.settings.collection_tags_enable %} collection-tags--enabled{% endif %}{% if section.settings.collection_sort_enable %} collection-sorting--enabled{% endif %}">
{% if section.settings.collection_tags_enable %}
{% include 'collection-tags' %}
{% endif %}
{% if section.settings.collection_sort_enable %}
{% include 'collection-sorting' %}
{% endif %}
</div>
{% endif %}
</header>

{% comment %}
Use class grid-uniform to have evenly sized columns clear
each other properly at each breakpoint.
{% endcomment %}
<div class="grid-uniform product-grid">

{% comment %}
Loop through our products in the current collection.
See the snippet 'product-grid-item' for the layout.
{% endcomment %}

{% case products_per_row %}
{% when '3' %}
{% assign grid_item_width = 'medium--one-third large--one-third' %}
{% assign product_size = 335 %}
{% when '4' %}
{% assign grid_item_width = 'medium-down--one-half large--one-quarter' %}
{% assign product_size = 460 %}
{% endcase %}

{% for product in collection.products %}
{% assign featured = product %}
<div class="grid-item {{ grid_item_width }}">
{% include 'product-grid-item' with product_size: product_size %}
</div>

{% else %}
{% if collection.handle == 'all' %}
{% include 'onboarding-empty-collection' %}
{% else %}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid-item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% endfor %}

</div>

{% if paginate.pages > 1 %}
<div class="text-center">
{% include 'pagination-custom' %}
</div>
{% endif %}
{% endpaginate %}
</div>

 

{% schema %}
{
"name": {
"de": "Kategorieseite",
"en": "Collection page",
"es": "Página de colecciones",
"fr": "Page de collection",
"it": "Pagina di collezione",
"ja": "コレクションページ",
"nl": "Collectiepagina",
"pt-BR": "Página Coleção",
"zh-CN": "产品系列页面",
"zh-TW": "商品系列頁面"
},
"settings": [
{
"type": "select",
"id": "collection_products_per_row",
"label": {
"de": "Produkte per Reihe",
"en": "Products per row",
"es": "Productos por fila",
"fr": "Produits par rangée",
"it": "Prodotti per riga",
"ja": "行あたりの商品数",
"nl": "Producten per rij",
"pt-BR": "Produtos por linha",
"zh-CN": "每行产品数",
"zh-TW": "每列產品數"
},
"options": [
{
"value": "3",
"label": {
"de": "3",
"en": "3",
"es": "3",
"fr": "3",
"it": "3",
"ja": "3",
"nl": "3",
"pt-BR": "3",
"zh-CN": "3",
"zh-TW": "3"
}
},
{
"value": "4",
"label": {
"de": "4",
"en": "4",
"es": "4",
"fr": "4",
"it": "4",
"ja": "4",
"nl": "4",
"pt-BR": "4",
"zh-CN": "4",
"zh-TW": "4"
}
}
]
},
{
"type": "select",
"id": "collection_rows_per_page",
"label": {
"de": "Zeilen pro Seite",
"en": "Rows per page",
"es": "Filas por página",
"fr": "Rangées par page",
"it": "Righe per pagina",
"ja": "ページあたりの行数",
"nl": "Rijen per pagina",
"pt-BR": "Linhas por página",
"zh-CN": "每页行数",
"zh-TW": "每頁列數"
},
"options": [
{
"value": "3",
"label": {
"de": "3",
"en": "3",
"es": "3",
"fr": "3",
"it": "3",
"ja": "3",
"nl": "3",
"pt-BR": "3",
"zh-CN": "3",
"zh-TW": "3"
}
},
{
"value": "4",
"label": {
"de": "4",
"en": "4",
"es": "4",
"fr": "4",
"it": "4",
"ja": "4",
"nl": "4",
"pt-BR": "4",
"zh-CN": "4",
"zh-TW": "4"
}
},
{
"value": "5",
"label": {
"de": "5",
"en": "5",
"es": "5",
"fr": "5",
"it": "5",
"ja": "5",
"nl": "5",
"pt-BR": "5",
"zh-CN": "5",
"zh-TW": "5"
}
},
{
"value": "6",
"label": {
"de": "6",
"en": "6",
"es": "6",
"fr": "6",
"it": "6",
"ja": "6",
"nl": "6",
"pt-BR": "6",
"zh-CN": "6",
"zh-TW": "6"
}
}
]
},
{
"type": "checkbox",
"id": "collection_tags_enable",
"label": {
"de": "Tag-Filtern erlauben",
"en": "Enable tag filtering",
"es": "Habilitar filtro de etiquetas",
"fr": "Activer le filtrage par balises",
"it": "Attiva filtro tag",
"ja": "タグでの絞り込みを有効にする",
"nl": "Filteren op tags inschakelen",
"pt-BR": "Ativar filtragem de tag",
"zh-CN": "启用标签筛选",
"zh-TW": "啟用標籤篩選功能"
}
},
{
"type": "checkbox",
"id": "collection_sort_enable",
"label": {
"de": "Kategoriesortierung aktivieren",
"en": "Enable collection sorting",
"es": "Habilitar la función ordenar colecciones",
"fr": "Activer le tri de la collection",
"it": "Abilita ordinamento collezione",
"ja": "コレクションの並べ替えを有効にする",
"nl": "Sorteren op collectie inschakelen",
"pt-BR": "Ativar a ordenação de coleções",
"zh-CN": "启用产品系列排序",
"zh-TW": "啟用商品系列排序功能"
}
},
{
"type": "select",
"id": "product_details_display_method",
"label": {
"de": "Produkttitel und Preis anzeigen",
"en": "Show product title and price",
"es": "Mostrar título y precio del producto",
"fr": "Afficher le titre et le prix du produit",
"it": "Mostra titolo e prezzo del prodotto",
"ja": "商品のタイトルと価格を表示する",
"nl": "Toon producttitel en prijs",
"pt-BR": "Exibir título e preço do produto",
"zh-CN": "显示产品标题和价格",
"zh-TW": "顯示產品名稱與價格"
},
"options": [
{
"value": "always",
"label": {
"de": "Immer",
"en": "Always",
"es": "Siempre",
"fr": "Toujours",
"it": "Sempre",
"ja": "常に",
"nl": "Altijd",
"pt-BR": "Sempre",
"zh-CN": "始终",
"zh-TW": "一律顯示"
}
},
{
"value": "hover",
"label": {
"de": "Beim Herüberfahren",
"en": "On hover",
"es": "En hover",
"fr": "Au passage de la souris",
"it": "Al passaggio del mouse",
"ja": "マウスオーバー時に",
"nl": "Bij zweven",
"pt-BR": "Ao passar",
"zh-CN": "在悬停时",
"zh-TW": "停留時顯示"
}
}
]
}
]
}
{% endschema %}

0 Likes