Check
<div class="art-product-container">
<h1 class="art-product-title">{{ product.title }}</h1>
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt }}">
<p class="art-product-description">{{ product.description }}</p>
<p class="art-product-price">{{ product.price | money }}</p>
<button class="add-to-cart-button" type="submit">Add to Cart</button>
</div>
<style>
.art-product-container {
text-align: center;
}
.art-product-title {
font-size: 36px;
margin-bottom: 20px;
}
.art-product-description {
font-size: 18px;
margin-bottom: 20px;
}
.art-product-price {
font-size: 24px;
margin-bottom: 20px;
}
.add-to-cart-button {
background-color: #0066cc;
color: white;
font-size: 18px;
padding: 10px 20px;
border-radius: 5px;
}
</style>
<h1 class="art-product-title">{{ product.title }}</h1>
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt }}">
<p class="art-product-description">{{ product.description }}</p>
<p class="art-product-price">{{ product.price | money }}</p>
<button class="add-to-cart-button" type="submit">Add to Cart</button>
</div>
<style>
.art-product-container {
text-align: center;
}
.art-product-title {
font-size: 36px;
margin-bottom: 20px;
}
.art-product-description {
font-size: 18px;
margin-bottom: 20px;
}
.art-product-price {
font-size: 24px;
margin-bottom: 20px;
}
.add-to-cart-button {
background-color: #0066cc;
color: white;
font-size: 18px;
padding: 10px 20px;
border-radius: 5px;
}
</style>