Appearance
Product
Overview
The SKAPE: Products extension creates a configurable product carousel for Shopify stores. Merchants can select products, customize display settings, and style the carousel to match their store's design.
Configuration Settings
General Settings
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Select products | product_list | Products to display in the carousel | - | - |
Button Settings
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Button text | inline_richtext | Text for the Add to Cart button | "Add to cart" | - |
| Hide button | checkbox | Toggle visibility of the BUY button | false | true/false |
| Disable button animation | checkbox | Toggle slide-up animation for BUY button | false | true/false |
Carousel Settings
| Setting | Type | Description | Default | Range |
|---|---|---|---|---|
| Products per page | range | Number of products displayed per slide | 3 | 1-50 |
| Products to slide | range | Products to move when navigating | 3 | 1-50 |
| Products per page (mobile) | range | Mobile version products per slide | 1 | 1-5 |
| Products to slide (mobile) | range | Mobile navigation products 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/price text color | - | - |