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

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

CheekinTongue
Visitor
2 0 1

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?

Reply 1 (1)

Small_Task_Help
Shopify Partner
806 26 71

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 }}';
}

 

To Get Shopify Experts Help, E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad