Column 1 Heading | Column 2 Heading |
| Here is the content for the first column in the second row. | Here is the content for the second column in the second row. |
| Here is the content for the first column in the third row and also includes images. | Here is the content for the second column in the third row and also includes images.   |
| Here is the content for the first column in the fourth row. And I'll add some text in here to show that the cell can hold has much text as you desire. | Here is the content for the second column in the fourth row. I'll also add some more text to this cell to again show that the cell can contain as much text as your need for your store. |
  And this time, we'll put the text below the image |   And this time, we'll put the image above the text. |
In this video we're going to talk about the two column table section. It gives you the ability and a lot of control to create a as you can see here, a two column table with text and or images in the cells. And you have a lot of control over the placement of the text horizon and vertically and also background colors and text colors.
So let's dive into it inside of theme customization and show you the section here. And you'll see we have some table wide settings to start off with for things like background color, border color, and text color. So you can override the theme defaults if you want to, and you can decide on your global settings for alignment. We also have this custom column ratio functionality.
You check the box and then once you check the box, the slider will will change what's going on right now if I flew the slider, nothing happens. But if I check the box, you can see what the slider is doing is is saying column one is going to have 17% of the width of the table in column two will get the remainder.
So you can see here you could adjust it to be any way you want. Like you might want to have a bunch of text in column one and then an icon representing that in column two. But the icons are not very large. So you can use the slider to adjust that. If you don't use the slider, if you have this checkbox turned off, it's up to CSS to determine what the width of the columns are going to be, which is going to be determined by the content that is in them.
So if one column had, you know, little or no content and the other column had all the content, that column with all the content would get majority of the width. And that's usually, you know, a good, you know, setting if you, you know, have a lot of different various types of content, but there will be times you're going to want to set it, and there'll be times that you'll just want to let CSS to determine what it's going to be.
And then the blocks for this are for each row that you want to have on here. And when you have a row block added, you get to control, its color to override the global settings. And also you get to determine what the text is and an image and the placement of the image. Or you can put the image above the text.
As you can see here, the image is above the text or below the text like it is here. And you can also bottom align a row or top aligned or row. So you have a lot of control over all the different aspects of global settings, and you can override those with each specific rows. You remember the global settings for the the table was this light tan background and the yellow border.
And then for the first row we override that with the blue color. But the rest of the rows we don't override the global setting.
But you'll see here on the second row we don't have any color set because it's using the global setting. So that is how you can use the two column table to create a table to insert into any page type that you want. It can be on a product page, a regular page, a collection page, or on an article, or even on the home page.
Thanks for watching.
In this video we're going to talk about the two column table section. It gives you the ability and a lot of control to create a as you can see here, a two column table with text and or images in the cells. And you have a lot of control over the placement of the text horizon and vertically and also background colors and text colors.
So let's dive into it inside of theme customization and show you the section here. And you'll see we have some table wide settings to start off with for things like background color, border color, and text color. So you can override the theme defaults if you want to, and you can decide on your global settings for alignment. We also have this custom column ratio functionality.
You check the box and then once you check the box, the slider will will change what's going on right now if I flew the slider, nothing happens. But if I check the box, you can see what the slider is doing is is saying column one is going to have 17% of the width of the table in column two will get the remainder.
So you can see here you could adjust it to be any way you want. Like you might want to have a bunch of text in column one and then an icon representing that in column two. But the icons are not very large. So you can use the slider to adjust that. If you don't use the slider, if you have this checkbox turned off, it's up to CSS to determine what the width of the columns are going to be, which is going to be determined by the content that is in them.
So if one column had, you know, little or no content and the other column had all the content, that column with all the content would get majority of the width. And that's usually, you know, a good, you know, setting if you, you know, have a lot of different various types of content, but there will be times you're going to want to set it, and there'll be times that you'll just want to let CSS to determine what it's going to be.
And then the blocks for this are for each row that you want to have on here. And when you have a row block added, you get to control, its color to override the global settings. And also you get to determine what the text is and an image and the placement of the image. Or you can put the image above the text.
As you can see here, the image is above the text or below the text like it is here. And you can also bottom align a row or top aligned or row. So you have a lot of control over all the different aspects of global settings, and you can override those with each specific rows. You remember the global settings for the the table was this light tan background and the yellow border.
And then for the first row we override that with the blue color. But the rest of the rows we don't override the global setting.
But you'll see here on the second row we don't have any color set because it's using the global setting. So that is how you can use the two column table to create a table to insert into any page type that you want. It can be on a product page, a regular page, a collection page, or on an article, or even on the home page.
Thanks for watching.