how do I move it to here?

[BE11]

hello. how do I move this to here? thanks

[FastBundle-Ian]

Hi @BE11 , it's Ian from Fast bundle.

You can try these solutions to reposition the pricing and discount information on your Shopify product page:

---

Steps to Move the Price Section in Shopify

1. Access Your Theme Editor:

   • Go to Shopify Admin > Online Store > Themes.
   • Click Actions on your active theme, then select Edit Code.

2. Locate the Product Template File:

   • In the code editor, find the file responsible for your product page. This is usually located in:
     • Sections/product-template.liquid
     • OR Templates/product.liquid / product.json.

3. Identify the Price Code Block:

   • Look for the code that renders the product price. It might look something like this:

     {{ product.price | money }}

     Or:

     <div class="product-price">
         ...
     </div>

4. Move the Code Block:

   • Cut the pricing-related code (including discounts and sale information) and move it to the desired location in the template.
     • In your case, move it above the "Add to Cart" button.
   • The "Add to Cart" button is typically defined by this code:

     <button type="submit" ...>Add to Cart</button>

   • Place the price block right above this code.

5. Save Your Changes:

   • Click Save after moving the code.

6. Preview and Test:

   • Open your store's product page to ensure the pricing and discount section now appears above the "Add to Cart" button.

---

Alternative: Theme Customizer

If your theme has a drag-and-drop builder or editable blocks for product pages (available in Shopify 2.0 themes):

1. Go to Online Store > Customize.
2. Navigate to a product page in the editor.
3. Check if you can drag and reposition the price block in the layout.

---

Tip: Use Custom CSS for Styling

If the placement is correct but the alignment or spacing needs adjustment, you can add custom CSS. For example:

.product-price {
    margin-bottom: 10px; /* Adjust spacing */
    text-align: left;    /* Adjust alignment */
}

[devcoders]

Hello @BE11 

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[BE11]

petcenter.digital is the url and password is eabeum

[BE11]

@devcoders ive written a reply sir

[EstherBui]

Hi @BE11 

I have checked and see that you are using the Dawn theme of Shopify. To able to move the price to the position as you wish, you can go follow this instruction :

1. Go to Shopify > Theme > Customize

2. Go to Product page template > drag the price block to the position as requested.

I hope it helps. 

Best, 

Esther 

[BE11]

Hey @EstherBui I did that but when I do that it moves the buy buttons/variant selector to under the picture. And I want it those to be right under the price and not right over it or under the pictures. What should I do?

[FastBundle-Ian]

Hi @BE11 , it's Ian from Fast bundle.

You can try these solutions to reposition the pricing and discount information on your Shopify product page:

---

Steps to Move the Price Section in Shopify

1. Access Your Theme Editor:

   • Go to Shopify Admin > Online Store > Themes.
   • Click Actions on your active theme, then select Edit Code.

2. Locate the Product Template File:

   • In the code editor, find the file responsible for your product page. This is usually located in:
     • Sections/product-template.liquid
     • OR Templates/product.liquid / product.json.

3. Identify the Price Code Block:

   • Look for the code that renders the product price. It might look something like this:

     {{ product.price | money }}

     Or:

     <div class="product-price">
         ...
     </div>

4. Move the Code Block:

   • Cut the pricing-related code (including discounts and sale information) and move it to the desired location in the template.
     • In your case, move it above the "Add to Cart" button.
   • The "Add to Cart" button is typically defined by this code:

     <button type="submit" ...>Add to Cart</button>

   • Place the price block right above this code.

5. Save Your Changes:

   • Click Save after moving the code.

6. Preview and Test:

   • Open your store's product page to ensure the pricing and discount section now appears above the "Add to Cart" button.

---

Alternative: Theme Customizer

If your theme has a drag-and-drop builder or editable blocks for product pages (available in Shopify 2.0 themes):

1. Go to Online Store > Customize.
2. Navigate to a product page in the editor.
3. Check if you can drag and reposition the price block in the layout.

---

Tip: Use Custom CSS for Styling

If the placement is correct but the alignment or spacing needs adjustment, you can add custom CSS. For example:

.product-price {
    margin-bottom: 10px; /* Adjust spacing */
    text-align: left;    /* Adjust alignment */
}