Collection

Overview

The SKAPE: Collections extension creates a configurable collection carousel for Shopify stores. Merchants can showcase product collections with customizable display settings and styling options.

Configuration Settings

General Settings

Setting	Type	Description	Default	Options
Select collections	collection_list	Collections to display in the carousel	-	-
Collection style	select	Visual style for collection cards	"shadow"	"default", "shadow", "zoom"

Carousel Settings

Setting	Type	Description	Default	Range
Collections per page	range	Number of collections displayed per slide	3	1-50
Collections to slide	range	Collections to move when navigating	3	1-50
Collections per page (mobile)	range	Mobile version collections per slide	1	1-5
Collections to slide (mobile)	range	Mobile navigation collections to move	1	1-5
Enable autoplay	checkbox	Auto-rotate carousel	true	true/false
RTL autoplay	checkbox	Right-to-left autoplay direction	false	true/false
Autoplay speed	range	Time between slides (ms)	5000	1000-5000
Adjust arrow vertically	range	Vertical position of arrows	35	0-100
Hide pagination	checkbox	Hide navigation dots	false	true/false
Hide arrows	checkbox	Hide navigation arrows	false	true/false

Carousel Style

Setting	Type	Description	Default	Options
Navigation style	select	Pagination display style	"numbers"	"numbers", "dot", "line"
Arrow style	select	Navigation arrow design	"chevron"	"chevron", "arrow", "caret"
Arrow size	range	Navigation arrow size (px)	16	0-100
Arrow color	color	Arrow text color	#ffffff	-
Arrow background radius	range	Arrow background border radius	5	0-100
Remove arrow background	checkbox	Hide arrow background	false	true/false
Background	color_background	Carousel background color	-	-
Primary color	color	Main accent color	#A69C95	-
Secondary color	color	Secondary accent color	#6F533F	-
Text color	color	Title text color	-	-

Implementation Example

{% schema %}
  {
    "name": "SKAPE: Collections",
    "target": "section",
    "settings": [
      {
        "type": "collection_list",
        "label": "Select collections",
        "id": "slide_selected_collections"
      },
      {
        "type": "select",
        "id": "collection_style",
        "options": [
          {"value": "default", "label": "Default"},
          {"value": "shadow", "label": "Shadow"},
          {"value": "zoom", "label": "Zoom"}
        ],
        "default": "shadow",
        "label": "Collection style"
      }
      // Additional settings...
    ]
  }
{% endschema %}