Need help with product page design on Empire theme

Need help with product page design on Empire theme

Derand
Visitor
2 0 0

I want to add more details with images and text to each product as I have now used Bootstrap in each product.

html.Screenshot 2023-09-21 at 12.33.49 PM.png

Replies 4 (4)

osamafarooqi71
Shopify Partner
254 21 44

Hello @Derand ,

Yes, you can add up to 25 sections. Just either convert this design into sections or just create a simple section with all the desired designs into one and add one single section in it.

 

Please feel free to ping me back if you need any further assistance.

 

Regards,

Osama Farooqi

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee
- Was your question answered? Mark this as Accepted Solution

NadiaAnthony
Shopify Partner
75 11 15

This will take some knowledge of the repository. Could you please share the URL for your store/webpage? I recommend starting with just one product.

 

Generally, navigate to Online Store > Themes > "..." > Edit Code. find the section file titled "image-with-text.liquid". Make a new section file called "productname-image-with-text.liquid" (replacing the "productname" part with a simple keyword related to specific product -- ex: 'blueshirt-image-with-text.liquid').

 

Copy the contents from the original "image-with-text.liquid" file and paste into your new section file. Hit Save. You'll now navigate to the main product file in sections... I'm not sure what it's titled for Empire, but should be something like product.liquid. You'll add the following code before the {% schema %} tag to make sure it shows up ONLY on the "blue shirt" products. Replace "Blue Shirt" with full product title.

 

 

 

{% if product.title == "Blue Shirt" %}
{% section 'blueshirt-image-with-text' %}
{% endif %}

 

 

 

Note that if the product title is changed it won't apply anymore. Also, there are MANY ways to go about targeting/applying it to the correct products or grouping by product type. etc.

 

Once this is saved/applied, go to Online Store > Themes > Customize and navigate to the "Blue Shirt" product page. You should be able to edit it in the WYSIWYG editor. 

 

You'll have to repeat a similar process to apply it each specific image-with-text section to other products. Create a new image-with-text-section, add it to the product file and specify by correlating the file names. Ex: 

 

 

 

{% if product.title == "Blue Shirt" %}
{% section 'blueshirt-image-with-text' %}

{% elsif product.title == "Green Shirt" %}
{% section 'greenshirt-image-with-text' %}

{% elsif product.title == "Red Shirt" %}
{% section 'redshirt-image-with-text' %}

{% endif %}

 

 

Hope this helps! If you'd like to discuss this more, don't hesitate to send me a PM. 

I help brands bridge the gap between complicated code and clear communication.
Derand
Visitor
2 0 0

Hi Nadia, here is my website currently and I want to switch over themes as I like the features on Empire over my Topbike theme that uses bootstrap.

 

https://derandmotorsports.com/

 

So I want to add this feature to all my bicycle and scooter products. I have two type of product pages. One that shows the html underneath and the other with a basic description and thats it - for more my basic products like chargers and stuff.

NadiaAnthony
Shopify Partner
75 11 15

You may be able to achieve this with metafields, but you can also follow a very similar method to what I described. You'll find the section similar to image-with-text (highlight?) in TopBike theme (it seems like it exists in the demo), duplicate it and continue to follow the same steps. Apply to product page section with conditions. If you'd like to discuss this more, don't hesitate to send me a PM.

I help brands bridge the gap between complicated code and clear communication.