{"id":24196434,"url":"https://github.com/brinobruno/shopify.developer-test-lookbook","last_synced_at":"2026-03-07T13:31:53.598Z","repository":{"id":271272499,"uuid":"871166491","full_name":"brinobruno/shopify.developer-test-lookbook","owner":"brinobruno","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-14T13:37:29.000Z","size":1003,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-03T08:22:17.266Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Liquid","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brinobruno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-11T12:02:44.000Z","updated_at":"2024-10-14T13:37:33.000Z","dependencies_parsed_at":"2025-01-07T03:32:33.221Z","dependency_job_id":null,"html_url":"https://github.com/brinobruno/shopify.developer-test-lookbook","commit_stats":null,"previous_names":["brinobruno/shopify.developer-test-lookbook"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brinobruno/shopify.developer-test-lookbook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brinobruno%2Fshopify.developer-test-lookbook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brinobruno%2Fshopify.developer-test-lookbook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brinobruno%2Fshopify.developer-test-lookbook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brinobruno%2Fshopify.developer-test-lookbook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brinobruno","download_url":"https://codeload.github.com/brinobruno/shopify.developer-test-lookbook/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brinobruno%2Fshopify.developer-test-lookbook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30215623,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T13:25:55.541Z","status":"ssl_error","status_checked_at":"2026-03-07T13:25:38.596Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-13T19:35:22.040Z","updated_at":"2026-03-07T13:31:53.576Z","avatar_url":"https://github.com/brinobruno.png","language":"Liquid","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lookbook Hotspot Feature for Shopify\n\nThis Shopify section enables administrators to add interactive, customizable hotspots to images on the Lookbook page. Each hotspot links to a specific product, dynamically displaying the product's image and details when clicked. The feature is fully responsive and designed to work seamlessly across desktop and mobile devices.\n\n## **Live Demo Store**\n\n[Click here to explore the live demo of the Lookbook Hotspot feature!](https://lookbook-feature.myshopify.com/pages/lookbook)\n\nStore password: rolex\n\nMake sure to check the page [\"Lookbook\"](https://lookbook-feature.myshopify.com/pages/lookbook) It's available on the header's menu\n\n---\n\n## **Overview**\n\nThis custom Shopify section allows store administrators to:\n\n- Add multiple interactive hotspots to images.\n- Link each hotspot to a product from the Shopify catalog.\n- Customize the appearance and placement of hotspots.\n- Display the linked product image and title dynamically without reloading the page.\n- Configure responsive images for both desktop and mobile views.\n\n## **Key Features**\n\n- **Admin Controls**: Add, remove, and position hotspots easily via the Shopify customizer.\n- **Customization**: Configure hotspot colors, hover effects, and product card positioning.\n- **Responsive Design**: Separate images for desktop and mobile views, ensuring a consistent experience across devices.\n- **Dynamic Product Loading**: Hotspot interaction loads product information smoothly, without requiring a page reload.\n- **Fully Documented**: Well-documented code with relevant comments, setup instructions, and clear admin guidelines.\n\n## **Setup \u0026 Installation**\n\n1. **Add the Section**  \n   In your Shopify admin, go to the **Customize theme** section. From there, add the **Hotspot Image** section to your Lookbook or any desired page.\n\n2. **Configure Settings**\n\n   - Upload **desktop** and **mobile** images for your Lookbook.\n   - Add hotspots by specifying their position (X and Y percentages) and linking each to a product in your store.\n   - Customize the appearance of the hotspots using color pickers and sliders.\n\n3. **Customize Hotspot Appearance**  \n   Adjust the hotspot background, border colors, and hover effects to align with your store’s theme. Position the product card that appears on interaction as per your preference.\n\n4. **Save \u0026 Preview**  \n   After setting up your hotspots, save the configuration and preview it on both desktop and mobile to ensure the responsive design fits perfectly.\n\n## **Customization Options**\n\n### **Section Settings**\n\n- **Desktop Lookbook Image**: Upload the main image for desktop view.\n- **Mobile Lookbook Image**: Upload the main image for mobile view.\n- **Full Width**: Choose whether the section spans the full width of the screen or is constrained by a set max-width.\n- **Hotspot Styling**: Set the background color, border color, and hover effects of the hotspots.\n- **Product Card Positioning**: Adjust the vertical and horizontal alignment of the product card displayed when a hotspot is clicked.\n\n### **Block Settings (Hotspot)**\n\nEach hotspot allows for the following configurations:\n\n- **Hotspot Label**: Name or short description of the hotspot.\n- **Position**: Set the X and Y coordinates as percentages to define the hotspot's position on the image.\n- **Linked Product**: Select the product from the Shopify catalog to link to this hotspot.\n\n## **Detailed Documentation**\n\nRefer to the comments within the `hotspot-image.liquid` file for a detailed breakdown of functionality and dependencies. Key components are as follows:\n\n- **Product Card Rendering**: The product's image and details are dynamically displayed within the designated product card area upon clicking the hotspot.\n- **Responsive Logic**: Media queries ensure the correct image and layout are used based on screen size (desktop vs. mobile).\n- **Admin Controls**: All necessary fields are exposed in the Shopify customizer, with intuitive ranges and options for easy customization.\n\n## **Testing Instructions**\n\n1. **Hotspot Functionality**: Ensure that each hotspot is clickable and displays the correct product image and title dynamically.\n2. **Responsive Behavior**: Test the section on both desktop and mobile devices to confirm that the correct image loads and hotspots are positioned accurately.\n3. **Performance Check**: Confirm that the feature does not impact page load times and performs smoothly during interaction.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrinobruno%2Fshopify.developer-test-lookbook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrinobruno%2Fshopify.developer-test-lookbook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrinobruno%2Fshopify.developer-test-lookbook/lists"}