How to Display both front and back sides of the product using Dawn Theme

[CheekinTongue]

HI, I'm setting up a POD store and some of my designs have both side of the apparel printed on. How do i make it such that, should the product be selected from the catalogue, the customer is able to scroll between both the front and back sides of the design? Like an arrow at the bottom of the product image to show the customer the design on the other side?

[Small_Task_Help]

Hi,

Prepare your image first after that 

Use HTML for the Toggle Feature (at templates/product.liquid or sections/product-template.liquid)

Code example

<div class="product-image-slider">
  <div class="image-container">
    <img id="product-image" src="{{ 'front-design.jpg' | asset_url }}" alt="Product Design">
  </div>
  <div class="toggle-buttons">
    <button class="toggle-front" onclick="showFront()">Front</button>
    <button class="toggle-back" onclick="showBack()">Back</button>
  </div>
</div>

Use CSS for Styling

Use Javascript Toggle Functionality

Javascript example

function showFront() {
  document.getElementById('product-image').src='{{ 'front-design.jpg' | asset_url }}';
}

function showBack() {
  document.getElementById('product-image').src='{{ 'back-design.jpg' | asset_url }}';
}