Shopify is a popular platform for online stores, offering a range of themes and customization options. However, when it comes to tweaking the design of your store, it can be challenging to know where to start. In this article, we will show you how to resize the product information on your Shopify store’s Empire Theme and add tabs to make it more user-friendly.
The Empire Theme is a popular Shopify theme known for its clean design and minimalist aesthetic. However, the product information can take up a lot of space, which can be overwhelming for some customers. By resizing the product information and adding tabs, you can make it more user-friendly and improve the overall user experience.
To get started, you will need to add some CSS code to your Shopify store. CSS is a programming language used to style websites and make them look visually appealing. If you’re not familiar with CSS, don’t worry. We’ll provide you with the code you need to add, and we’ll explain how to do it step by step.
Step 1: Access the Shopify theme editor
First, you will need to access the Shopify theme editor. To do this, log in to your Shopify account and go to the “Online Store” section. From there, click on “Themes” and select the Empire Theme you want to edit.
Step 2: Add the CSS code
Once you have accessed the theme editor, you will need to add the CSS code that will resize the product information and add tabs. To do this, click on the “Actions” button in the top right corner of the screen and select “Edit code” from the drop-down menu.
This will take you to the theme code editor. In the left-hand menu, scroll down and click on “Assets” to open the assets folder. From there, select “theme.scss.liquid” to open the stylesheet for the Empire Theme.
Next, add the following CSS code at the bottom of the stylesheet:
@media screen and (min-width: 719px)
{
.pxu-tabs.pxu-tabs--bottom-true { width: 50%; margin-top: -36%; }
}
This code will resize the product information to half its original size and add tabs on the left-hand side of the screen.
Step 3: Save and preview the changes
Once you have added the CSS code, click on the “Save” button at the top of the screen to save your changes. Then, go back to the theme editor and click on “Preview” to see the changes in action.
If everything looks good, click on “Publish” to make the changes live on your Shopify store.
Conclusion
In conclusion, resizing the product information on your Shopify Empire Theme can improve the user experience and make your store more visually appealing. By adding tabs and aligning the elements on the left and right-hand sides of the screen, you can create a more user-friendly layout that is easier to navigate.
Remember that you can always customize the CSS code to fit your store’s specific needs. If you’re not comfortable with coding, consider hiring a Shopify expert to help you make the changes. With a little bit of tweaking, you can create a Shopify store that stands out from the competition and provides an excellent user experience for your customers.