Instead of the carousel being underneath my main product image horizontally, I want it on the side, going vertically. How do I do this? There is another thread but the code didn’t work. Any update?
Topic summary
Main issue: The OP wants product thumbnails in the Shopify Dawn theme displayed vertically beside the main product image instead of horizontally below it; prior code from another thread didn’t work and they’re seeking an updated method.
Requests/inputs: A responder asked for the store URL to diagnose specifics. This implies theme/version or customizations may affect the solution.
Proposed approach: A sample flexbox-based layout was shared, suggesting a .product-container wrapping the main image and a .vertical-carousel for thumbnails. However, the provided markup appears empty and the CSS is placeholder-level with a typo in the .product-image selector and no concrete dimensions or orientation rules, so it’s not a drop-in fix.
Resources: A YouTube tutorial link was provided on making thumbnails vertical, which may guide implementation.
Status/outcomes: No confirmed working solution yet. Action items are to share the store URL for tailored help and to refine/apply a proper markup/CSS implementation (e.g., flex layout with a vertical thumbnail column). The thread remains open with unresolved key details. Code snippets and the video are central to understanding the proposed solution.
@EmmaButler Can you provide your store urL?
Certainly! Here’s an example code snippet to help you get started with a vertical carousel positioned on the side of your main product image:
.product-container {
display: flex;
}
.product-image {
/* CSS styles for your main product image */
/* Adjust width, height, margin, etc. as needed */
}
.vertical-carousel {
/* CSS styles for your vertical carousel */
/* Adjust width, height, margin, etc. as needed */
}
Display thumbnail images to vertical:
