How to Center Text and Price on the Alchemy Theme Product Page in Shopify

By Tony Ng.
November 1st, 2024

How to Center Text and Price on the Alchemy Theme Product Page in Shopify

E-commerce entrepreneurs often seek to refine their Shopify stores' aesthetics, ensuring a visually appealing product page layout that enhances user experience and potentially drives sales. One common customization sought by store owners using the Alchemy theme is centering all textual information and pricing details on the product page. If you've struggled to achieve this effect or if the text is centered but the price remains stubbornly left-aligned, this detailed guide will walk you through the process of aligning everything perfectly.

Understanding the Problem: Why the Misalignment Occurs

Before diving into the solution, it's essential to grasp why this issue arises. The Alchemy theme, like many other themes, comes with default CSS styles that dictate text alignment for various elements on the product page. While some elements might have a centralized alignment, others, such as the price, might be set to align left by default. This stylistic decision is often made to maintain consistency with a theme's overall design philosophy.

Additionally, the issue can be compounded by custom styles you've added to your CSS or specific theme customizations that inadvertently impact the alignment of individual page elements.

Step-by-Step Guide to Centering Text and Price

To achieve a cohesive look where both text and price are centered, you'll need to make adjustments in the theme's CSS file. Here’s how to ensure both elements align appropriately:

Step 1: Access the Theme Editor

Log in to your Shopify account and navigate to the Online Store section.
Select Themes under the sidebar.
Click Customize to enter the theme editor.

Step 2: Modify the CSS

Within the theme editor, locate the Edit code option under the Actions dropdown.
In the code editor, find and click on the Assets folder.
Look for a file named main.css, style.css, or similarly named CSS file.

Step 3: Add Custom CSS

To align your product price with the centered text, add the following CSS snippet at the bottom of your CSS file:

.product-info__price.text-lg.md\:text-xl.js-product-price {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

This code achieves the desired effect by setting the left and right margins to auto, thereby centering the element, and ensuring the text within is also centered.

Step 4: Save and Review Changes

After inserting the CSS code, don't forget to save changes by clicking the Save button at the top right corner of the editor.
Preview your changes by going to the product page and refreshing it to confirm that both the text and price are now perfectly centered.

Troubleshooting Common Issues

Sometimes, despite following the steps, issues may persist. Here are some common problems and how to address them:

Caching Problems: Browser or server caches may prevent new changes from displaying. Try clearing your browser's cache or disable server-side caching temporarily to see the changes.
Conflicting CSS: External apps or custom scripts may have conflicting CSS rules. Inspect your page using browser development tools to identify and resolve conflicting styles.

Additional Tips for Customization

Use Em or Rem Units: For responsive sizing, especially if your theme supports different devices, consider using em or rem units for consistent styling across various screen sizes.
Centralize Other Elements: Want to apply similar styling to other elements, like buttons? You can mimic the approach above and adjust margins of other div class names.