Shopify collection templates

Shopify collection templates DEFAULT

Custom collection page on Shopify

Shopify allows you to organize your products into collections to let your customers search for them by their categories. A custom collection is a grouping of products that you can create to make your store easier to navigate. You can create custom collection and then select the specific items that will fall into each category.

Edit collection page on Shopify

You can customize your collections by:

  • adding or hiding some products;
  • editing featured images of the collection;
  • changing the titles;
  • sort order of the products.

If you’ve used a custom template for your collection page, then you can alternatively set up a different template. Also, Shopify allows you to bulk edit products and its properties which is useful with large quantities of the products.

Hide collection page on Shopify

If you do not want to keep a specific collection in your online store you can both delete or hide it temporarily. Deleted collections are permanently removed from your Shopify store. Alternatively, you can hide the collection from a sales channel without deleting it so you will have your collection not showing up in your collection menu.

Shopify liquid template for collection page

If you want to implement additional features or modify your collection page, you can use Liquid templates. Liquid is an open-source template language created by Shopify. There is a collection.liquid code template which is used to display the collection page. The main aim of this page is to list up the items within a collection, often presented as a grid of images with product names and pricings.

Sours: https://spur-i-t.com/shopify-small-tasks/shopify-collection-page/

LIST OF COLLECTIONS - Creating custom page that display collections

Shopify Themes

By default, Shopify only allows to have one page to display your store collections (you cannot create different "collections of collection", as you can do with product). However our themes come with a built-in solution through a dedicated page template.

IMPORTANT, PLEASE READ THIS BEFORE: the instructions are different based on the version. To know more about which version of the theme you are using, please click here to see the instructions. Then, make sure to select the instructions that apply to your version. Using instructions that do not apply to your version will not work.

No results found

© Maestrooo 2021. Powered by Help Scout

Contact Us

Sours: https://support.maestrooo.com/article/86-list-of-collections-creating-custom-page-that-display-collections
  1. Wonder tip nails
  2. Rouses grocery store
  3. Msw ua
  4. Ds games 100 in 1
  5. Husqvarna usa motorcycles

How to customize your list-collections.liquid template in Shopify

Recently, most of the business pages that have created on Shopify are online store shops, such as for clothes or book, or accessories. Therefore, these kind of pages normally require a lot of collection of product to fulfill the need of customers need.

However, not many owner of the page how to create a collection list page, hence to customize your own collection list page in order. This problem probably become an obstacle during the process of you page operating and also the profit of your business.

To solve this problem, there are some tips for you to optimize your collection list page. You can change the layout of your collection list page from theme editor. However, your theme may not always be included in the collection list page, therefore you need to do some acts to work this out.

There are two ways to change the order of your collections list page. You can choose either to create a menu to control it or to edit your theme code to customize your list-collection.liquid template.

The template is used to render a page where all of the collections in the shop are listed. This template can be accessed by going to of the shop.

In this article, a tutorial will be given to show you how to customize your list-collections.liquid template in Shopify.

How to customize your list-collections.liquid template in Shopify

Editing the code for your collections list page can help the page shows only the collections that you have included in the menu.

Following is the tutorial for you to edit list-collection.liquid template for desktop version.

Step 1: Choose theme

Go to your Shopify admin, click Online Store > Themes.

Step 2: Edit code

Click Actions > Edit code at the theme you want to edit.

image

Step 3: Choose list collection template

Choose list-collections-template.liquid in the Sections directory.

image

Step 4: Find the code

In the code box, you need to find all the existence of the below code:

However, not all the themes are the same, do some of the themes might include the following code instead:

After find out all the asked code, you need to change all the mentioned code into the following line:

Step 5: Save

To end the process, click Save

Conclusion

Now with this tutorial, you can change the order of your collections page as well as customize your collection list page. This feature is very useful especially for online shopping stores. We hope that with this tool, your business will run well and operate at profit. If you get any trouble while practicing this tutorial, we recommend you to hire an expert in the field of Shopify platform for help.

avada marketing automation
Sours: https://avada.io/shopify/devdocs/customize-your-list-collections-liquid-template.html
Shopify Debut Theme Customization - Debut Theme Design Tutorial

Tutorial: Create additional collection templates

If you'd like to use a custom collection sidebar, collection menu (link-list) or collection settings for one or more collections, you can create a second or more collection template. That will allow you to assign the template to a certain collection and then customize that collection differently from other collection pages. 

How to:

For this to work, you'll need to be working with a live/published theme. Draft themes can't show custom templates unless you create the templates on both the live and draft themes. 

Start by opening the Code Editor:

There will be two main steps using the Code Editor when creating a new collection template. One will be creating a new section file and the second is an actual new collection template which links to the section file.

1

Create a new section file

When we create a new section file for the alternate collection template, we will use the same code from your theme's existing collection section file. Let's begin by creating a new section file, and then copy the code from the theme's existing section file into the new file. 

In the Sections folder, choose Add a new section:

Call the section:

collection-1

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

After deleting the default code, we will copy the code from the theme's existing sections/collection.liquid file and paste that code into our new collection-1 file.

(1) From the Sections folder, open collection.liquid:

(2) Copy all the code from the right side. Use Command-A on Mac or Control-A in Windows to select all the code:

Use Command-C on Mac or Control-C in Windows to copy the code 

Next, paste all that code into the new section file you created, collection-1.liquid:

To paste, use Command-V on Mac or Control-V in Windows

(If you were unable to paste any code, return to the theme's collection.liquid file from the sections folder and copy all the code again)

Example after pasting the section code:

After you've pasted the code, save the file. 

One final step for the Section file. (1) Use the Find feature in the code editor, Command-F on Mac or Control-F in Windows and search for:

Collection page

When you find "Collection page", which should be in the schema area of the code (2):

Change from (inside the quotes):

Collection page

Change to:

Collection custom

Example:

Save the file. 

2

Create a new template

Now that we have created a new section file and added code from our original section file, we can create the new alternate template. This file will reference the section file created in Step 1. 

From the Templates folder, choose Add a new template:

Change the type (1) to collection and (2) call it alternate-1:

Use the Create template button to complete. 

Next, we will modify the default code in Line 1:

Change the line from:

{% section 'collection' %}

Change the line to:

{% section 'collection-1' %}

Example after:

Save the file.

3

Assign the new template to your collection

We're finished with the Code Editor. Now let's assign the new template to the collection which will have the custom sidebar and settings.

In your Collections setup, choose the collection and modify the template option to collection.alternate-1:

Change from collection:

Change to

Use the Save button at the top to complete. 

4

Browse to the collection in the Theme Editor

Open your Theme Editor:

Quick link
https://shopify.com/admin/themes/current/editor

Browse to the collection that has the custom template assigned. This is important, make sure you browse to that collection in order to see and set the new settings.

Once you're at the right collection page, you'll see the sections settings on the left:

You'll know all your steps were completed correctly if you see the Collection custom section option rather than the regular Collection page option here.

Now you can customize the sidebar or any of the collection settings just for this collection. If you want to use this template on another collection as well, that's fine. Just remember it will share the settings for any collection that has collection.alternate-1 assigned. Changing a setting will affect all the collection pages that use this template. 

Custom menus in the sidebar

If you'll be adding custom links in the collection sidebar, then under Custom link list, choose Select menu:

If you've already created the custom menus, select the menu or create a new one:


Creating additional templates

If you need another completely different collection template to hold different settings, then repeat all the steps but choose a different name like. For example, in Step 1, use:

collection-2

You can use the same code from the link in Step 1.

In Step 2 create a new collection template and call that alternate-2

Change the default code to link to the new section file from Step 1:

In Step 3 you would also choose that new template. 

Repeat for additional templates, always use new section and template filenames.

Sours: https://help.groupthought.com/article/505-tutorial-create-a-second-collection-template

Templates shopify collection

mirceapiturca/Shopify Simple Theme - collection-template.liquid

<!-- /templates/collection.liquid -->{% paginatecollection.productsby12 %}<divdata-section-id="{{ section.id }}"data-section-type="collection-template"data-sort-enabled="{{ section.settings.collection_sort_enable }}"data-tags-enabled="{{ section.settings.collection_tag_enable }}"> <headerclass="grid"> <h1class="grid__item small--text-center {% ifsection.settings.collection_sort_enableorsection.settings.collection_tag_enable %}medium-up--one-third{% endif %}">{% ifcurrent_tags.size>0 %}{{ current_tags.first }}{% else %}{{ collection.title }}{% endif %}</h1> {% ifsection.settings.collection_sort_enableorsection.settings.collection_tag_enable %} <divclass="collection-sorting grid__item medium-up--two-thirds medium-up--text-right small--text-center"> {% ifsection.settings.collection_tag_enableandcollection.all_tags.size>0 %} <divclass="collection-sorting__dropdown"> <labelfor="BrowseBy"class="label--hidden">{{ 'collections.general.tags' | t }}</label> <selectname="BrowseBy"id="BrowseBy"> {% ifcurrent_tags %} {% ifcollection.handle %} <optionvalue="/collections/{{ collection.handle }}">{{ 'collections.general.all_tags' | t }}</option> {% elsifcollection.current_type %} <optionvalue="{{ collection.current_type | url_for_type }}">{{ 'collections.general.all_tags' | t }}</option> {% elsifcollection.current_vendor %} <optionvalue="{{ collection.current_vendor | url_for_vendor }}">{{ 'collections.general.all_tags' | t }}</option> {% endif %} {% else %} <optionvalue="">{{ 'collections.general.tags' | t }}</option> {% endif %} {% fortagincollection.all_tags %} <optionvalue="/collections/{% ifcollection.handle!=blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% ifcurrent_tagscontainstag %} selected="selected"{% endif %}>{{ tag }}</option> {% endfor %} </select> </div> {% endif %} {% ifsection.settings.collection_sort_enableandcollection.products.size>1 %} <divclass="collection-sorting__dropdown"> <labelfor="SortBy"class="label--hidden">{{ 'collections.sorting.title' | t }}</label> <selectname="SortBy"id="SortBy"data-value="{{ collection.sort_by | default: collection.default_sort_by }}"> <optionvalue="manual">{{ 'collections.sorting.featured' | t }}</option> <optionvalue="best-selling">{{ 'collections.sorting.best_selling' | t }}</option> <optionvalue="title-ascending">{{ 'collections.sorting.az' | t }}</option> <optionvalue="title-descending">{{ 'collections.sorting.za' | t }}</option> <optionvalue="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option> <optionvalue="price-descending">{{ 'collections.sorting.price_descending' | t }}</option> <optionvalue="created-descending">{{ 'collections.sorting.date_descending' | t }}</option> <optionvalue="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option> </select> </div> {% endif %} </div> {% endif %} {% ifcollection.description!=blank %} <divclass="collection-description grid__item rte"> {{ collection.description }} </div> {% endif %} </header> <divclass="grid grid--uniform"role="list"> {% forproductincollection.products %} {% ifcollection.products.size==1 %} {% assigngrid_item_width='medium-up--one-third small--one-whole' %} {% else %} {% assigngrid_item_width='medium-up--one-third small--one-half' %} {% endif %} {%- ifcollection.handle=='black-chairs' -%} {% include'product-grid-item'withcustom_option_name: 'color', custom_option_value: 'black' %} {%- else -%} {% include'product-grid-item' %} {%- endif -%} {% else %}{% comment %} Add default products to help with onboarding for collections/all only. The onboarding styles and products are only loaded if the store has no products.{% endcomment %} {% ifshop.products_count==0andcollection.handle=='all' %} {% unlessonboardingLoaded %}{% comment %} Only load onboarding styles if they have not already been loaded.{% endcomment %} {% assignonboardingLoaded=true %} {% endunless %} <divclass="grid__item"> <divclass="grid grid--uniform"> {% assigncollection_index=1 %} {% foriin (1..6) %} <divclass="grid__item small--one-half medium-up--one-third text-center"> <ahref="/admin/products"class="grid__image"> {% capturecurrent %}{% cycle1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </a> <divclass="product__title"><ahref="/admin/products">{{ 'homepage.onboarding.product_title' | t }}</a></div> <divclass="product__price">$19.99</div> </div> {% assigncollection_index=collection_index | plus: 1 %} {% endfor %} </div> </div> {% else %}{% comment %} If collection exists but is empty, display message{% endcomment %} <divclass="grid__item"> <p>{{ 'collections.general.no_matches' | t }}</p> </div> {% endif %} {% endfor %} </div> {% ifpaginate.pages>1 %} <divclass="pagination text-center"> {{ paginate | default_pagination }} </div> {% endif %} </div>{% endpaginate %}{% schema %}{ "name": { "de": "Kategorie-Seiten", "en": "Collection pages", "es": "Páginas de colección", "fr": "Pages de collections", "it": "Pagine delle collezioni", "ja": "コレクションページ", "pt-BR": "Páginas de Coleções" }, "settings": [ { "type": "checkbox", "id": "vendor_show", "label": { "de": "Produktverkäufer anzeigen", "en": "Show product vendor", "es": "Mostrar proveedor del producto", "fr": "Afficher le distributeur du produit", "it": "Mostra fornitore prodotto", "ja": "商品の販売元を表示する", "pt-BR": "Exiba o fornecedor do produto" } }, { "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": "コレクションの並べ替えを有効にする", "pt-BR": "Ativar a ordenação de coleções" }, "default": true }, { "type": "checkbox", "id": "collection_tag_enable", "label": { "de": "Filterung nach Produkt-Tag aktivieren", "en": "Enable filtering by product tag", "es": "Habilitar filtro por etiqueta de producto", "fr": "Activer le filtrage par étiquette de produit", "it": "Abilita filtri per tag di prodotto", "ja": "商品タグによる絞り込みを有効にする", "pt-BR": "Ativar filtragem por tag de produto" }, "default": false } ]}{% endschema %}
Sours: https://gist.github.com/mirceapiturca/351d246b6000141128e8845df6588ded
BEST Free Shopify Themes For 2021 - Shopify Theme Review

.

You will also like:

.



556 557 558 559 560