How can I personalize product pages on my ecommerce website?

Store Design
1

Hi everyone,

I’m using the debut theme for my ecommerce website. I’m selling french natural beauty products. To display information on my product page, I’d like to add a section with several tabs, below pictures and description. It would be something like this :

Marion_S_1-1630311768693.png
Marion_S_1-1630311768693.png1229×776 89.5 KB

Information need to be personalized for each product. Do you know how I can do this?

Thanks,

Marion

2

Hello @Marion_S

For that to work you have two choices:

Use An App like SmartTabs: Free Product Tabs | Shopify App Store or Easy Tabs ‑ Product Tabs | Shopify App Store for example to get those added.

Custom Code this for a more native integration.

Let me know if you need further assistance on that!

Cheers

3

Hi,

Thanks for your answer.

For the custom code, is it a paid service ?

For the app SmartTabs, I see that the tabs appear on the right of the product page. Is it possible to put it under the picture also and across the entire width?

Thanks again,

Marion

4

@Marion_S

https://community.shopify.com/topic/615138

5

Hi,

I’ve installed Tabs in Section in my store. I’d like to move the tabs below the picture and across all width but keep the description on the right. Do you know how I can do that?

Marion_S_1-1630316875520.png
Marion_S_1-1630316875520.png1273×523 61.5 KB

Thanks!

Marion

6

@Marion_S

store url?

7

Hi,

alaecosmetique.fr

password : shiseido

8

@Marion_S

thanks please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media only screen and (min-width: 750px) {
div#station-tabs-0 {
    position: relative;
    width: 100vw;
    left: -50vw;
    margin-left: 38%;
    margin-top: 260px;
}
}
9

Hi,

It doesn’t appear exactly how I’d like.

On the support site of the app, there is a step by step of how to move the tabs. But I need to figure out where is located the description product for the 1st step. Here’s the link :

https://support.stationmade.com/article/166-move-tabs

Thanks again,

Marion

10

@Marion_S

thanks for update

11

Can you help me with the step by step explanation ?

I don’t know what I need to enter in the CSS selector.

Thanks,

Marion

12

@Marion_S

sorry we don’t control third partly app code

13

At the end, I’ve used your solution and it looks great!

Thanks,

Marion

14

@Marion_S

great thanks for update